Workbox-broadcast-update

在快速回應含有快取項目的要求時，偶爾會權衡使用者看到過時的資料。

workbox-broadcast-update 套件提供一種標準方式，可通知視窗用戶端快取回應已更新。最常與 StaleWhileRevalidate 策略搭配使用。

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

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 做為特定策略的外掛程式，但您也可以在 Service Worker 程式碼中使用基礎邏輯。

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,
);

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