Workbox-broadcast-update

回應含快取項目的要求時，如果回應速度很快 有利於使用者看到過時的資料。

workbox-broadcast-update 套件提供標準方式，可通知 Window 用戶端已更新快取回應。最常見的用途是與 StaleWhileRevalidate 策略。

每當該策略的「重新驗證」步驟從網路擷取的回應與先前快取的回應不同，這個模組就會透過 postMessage() 將訊息傳送至目前服務工作者範圍內的所有 Window 用戶端。

視窗用戶端可以監聽更新並採取適當行動，例如 自動顯示訊息，告知使用者有更新 可以使用。

如何決定更新？

系統會比較快取和新 Response 物件的特定標頭，如果任何標頭的值不同，就會視為更新。

根據預設，系統會比較 Content-Length、ETag 和 Last-Modified 標頭。

Workbox 使用標頭值而不是位元組對位元組的比較 尤其是對 大型回應

使用廣播更新

這個程式庫應該與 StaleWhileRevalidate 搭配使用 快取策略，因為此策略需要 立即回應，也提供更新機制 以非同步的方式快取

如要播送更新，只要將 broadcastUpdate.BroadcastUpdatePlugin新增到 策略選項

import {registerRoute} from 'workbox-routing'; import {StaleWhileRevalidate} from 'workbox-strategies'; import {BroadcastUpdatePlugin} from 'workbox-broadcast-update';  registerRoute(   ({url}) => url.pathname.startsWith('/api/'),   new StaleWhileRevalidate({     plugins: [new BroadcastUpdatePlugin()],   }) );

在網頁應用程式中，DOMContentLoaded 之前 事件觸發後，您可以監聽這些事件，例如：

navigator.serviceWorker.addEventListener('message', async event => {   // Optional: ensure the message came from workbox-broadcast-update   if (event.data.meta === 'workbox-broadcast-update') {     const {cacheName, updatedURL} = event.data.payload;      // Do something with cacheName and updatedURL.     // For example, get the cached content and update     // the content on the page.     const cache = await caches.open(cacheName);     const updatedResponse = await cache.match(updatedURL);     const updatedText = await updatedResponse.text();   } });

訊息格式

在網頁應用程式中叫用 message 事件監聽器時， event.data 屬性將具有以下格式：

{   type: 'CACHE_UPDATED',   meta: 'workbox-broadcast-update',   // The two payload values vary depending on the actual update:   payload: {     cacheName: 'the-cache-name',     updatedURL: 'https://example.com/'   } }

自訂要檢查的標頭

如要自訂要檢查的標頭，請設定 headersToCheck 資源。

import {registerRoute} from 'workbox-routing'; import {StaleWhileRevalidate} from 'workbox-strategies'; import {BroadcastUpdatePlugin} from 'workbox-broadcast-update';  registerRoute(   ({url}) => url.pathname.startsWith('/api/'),   new StaleWhileRevalidate({     plugins: [       new BroadcastUpdatePlugin({         headersToCheck: ['X-My-Custom-Header'],       }),     ],   }) );

進階用途

雖然大多數開發人員會將 workbox-broadcast-update 用於特定策略的外掛程式，如上方所示，但也可以在服務工作者程式碼中使用基礎邏輯。

import {BroadcastCacheUpdate} from 'workbox-broadcast-update';  const broadcastUpdate = new BroadcastCacheUpdate({   headersToCheck: ['X-My-Custom-Header'], });  const cacheName = 'api-cache'; const request = new Request('https://example.com/api');  const cache = await caches.open(cacheName); const oldResponse = await cache.match(request); const newResponse = await fetch(request);  broadcastUpdate.notifyIfUpdated({   cacheName,   oldResponse,   newResponse,   request, );

類型

BroadcastCacheUpdate

在快取回應更新時，使用 postMessage() API 通知所有已開啟的視窗/分頁。

為了提升效率，我們不會比較基礎回應主體。 系統只會檢查特定回應標頭。

屬性

  • 建構函式

    void

    建構具有特定 channelName 的 BroadcastCacheUpdate 執行個體，以便 開啟廣播訊息

    constructor 函式如下所示： 

    (options?: BroadcastCacheUpdateOptions) => {...}

  • notifyIfUpdated

    void

    比較兩個回應，並在回應不同時，透過 postMessage() 將訊息傳送至所有視窗用戶端。兩種回應都不可以 不透明。

    發布的訊息採用以下格式 (其中 payload 可以 透過建立執行個體的 generatePayload 選項進行自訂 提供者：

    {   type: 'CACHE_UPDATED',   meta: 'workbox-broadcast-update',   payload: {     cacheName: 'the-cache-name',     updatedURL: 'https://example.com/'   } }

    notifyIfUpdated 函式如下所示： 

    (options: CacheDidUpdateCallbackParam) => {...}

    • returns

      承諾<void>

      更新傳送後即會解決。

BroadcastCacheUpdateOptions

屬性

BroadcastUpdatePlugin

這個外掛程式會在收到快取回應時自動廣播訊息 已更新。

屬性

方法

responsesAreSame()

workbox-broadcast-update.responsesAreSame(
  firstResponse: Response,
  secondResponse: Response,
  headersToCheck: string[],
): boolean

指定兩個 Response's，比較多個標頭值，瞭解 會保持不變

參數

  • firstResponse

    回應

  • secondResponse

    回應

  • headersToCheck

    string[]

傳回

  • 布林值