在某些情況下，Service Worker 可能需要主動與其控制的任何有效分頁通訊，以通知特定事件。例如：
- 在安裝新版 Service Worker 時通知網頁，以便網頁向使用者顯示「更新以重新整理」按鈕，讓使用者立即存取新功能。
- 向使用者顯示「應用程式現在可以離線運作」或「新版內容已推出」等訊息，告知 Service Worker 端快取資料已變更。
我們將這類使用案例稱為「廣播更新」，也就是 Service Worker 不需要從網頁接收訊息，即可啟動通訊。在本指南中，我們將使用標準瀏覽器 API 和 Workbox 程式庫，探討網頁與 Service Worker 之間這類通訊的不同實作方式。
實際工作環境案例
Tinder
Tinder PWA 會使用 workbox-window 監聽網頁的重要 Service Worker 生命週期時刻 (「已安裝」、「已控制」和「已啟用」)。這樣一來，當新的 Service Worker 開始運作時，就會顯示「有可用的更新」橫幅，讓使用者重新整理 PWA 並存取最新功能：
Squoosh
在 Squoosh PWA 中，當 Service Worker 已經快取所有必要資產，可離線運作時，就會傳送訊息給網頁，顯示「已可離線運作」浮動式訊息，讓使用者瞭解這項功能：
使用 Workbox
監聽 Service Worker 生命週期事件
workbox-window 提供簡單的介面，可監聽重要的 Service Worker 生命週期事件。在幕後，程式庫會使用 updatefound 和 statechange 等用戶端 API，並在 workbox-window 物件中提供更高層級的事件監聽器，方便使用者運用這些事件。
下列網頁程式碼可讓您偵測每次安裝的新版 Service Worker，以便通知使用者：
const wb = new Workbox('/sw.js');
wb.addEventListener('installed', (event) => {
if (event.isUpdate) {
// Show "Update App" banner
}
});
wb.register();
通知網頁快取資料的變更
Workbox 套件 workbox-broadcast-update 提供標準方式，通知視窗用戶端快取回應已更新。這項策略最常與 StaleWhileRevalidate 策略搭配使用。
如要播送更新，請在 Service Worker 端將 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(),
],
})
);
在網頁應用程式中，您可以監聽這些事件，如下所示：
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();
}
});
使用瀏覽器 API
如果 Workbox 提供的功能不足以滿足您的需求，請使用下列瀏覽器 API 實作「廣播更新」：
Broadcast Channel API
Service Worker 會建立 BroadcastChannel 物件，並開始傳送訊息。任何有興趣接收這些訊息的內容 (例如網頁) 都可以例項化 BroadcastChannel 物件，並實作訊息處理常式來接收訊息。
如要在安裝新的 Service Worker 時通知網頁，請使用下列程式碼：
// Create Broadcast Channel to send messages to the page
const broadcast = new BroadcastChannel('sw-update-channel');
self.addEventListener('install', function (event) {
// Inform the page every time a new service worker is installed
broadcast.postMessage({type: 'CRITICAL_SW_UPDATE'});
});
頁面會訂閱 sw-update-channel，藉此監聽這些事件：
// Create Broadcast Channel and listen to messages sent to it
const broadcast = new BroadcastChannel('sw-update-channel');
broadcast.onmessage = (event) => {
if (event.data && event.data.type === 'CRITICAL_SW_UPDATE') {
// Show "update to refresh" banner to the user.
}
};
這是簡單的技巧，但限制是瀏覽器支援：撰寫本文時，Safari 不支援這個 API。
Client API
用戶端 API 提供簡單的方式，可透過疊代 Client 物件陣列，與 Service Worker 的多個用戶端通訊。
請使用下列 Service Worker 程式碼，將訊息傳送至最後一個焦點分頁：
// Obtain an array of Window client objects
self.clients.matchAll(options).then(function (clients) {
if (clients && clients.length) {
// Respond to last focused tab
clients[0].postMessage({type: 'MSG_ID'});
}
});
網頁會實作訊息處理常式，攔截這些訊息：
// Listen to messages
navigator.serviceWorker.onmessage = (event) => {
if (event.data && event.data.type === 'MSG_ID') {
// Process response
}
};
如果需要將資訊廣播至多個有效分頁，就很適合使用 Client API。所有主要瀏覽器都支援這項 API，但並非所有方法都支援。使用前請先確認瀏覽器是否支援。
訊息管道
訊息管道需要初始設定步驟，方法是將通訊埠從網頁傳遞至 Service Worker，在兩者之間建立通訊管道。網頁會將 MessageChannel 物件例項化，並透過 postMessage() 介面將通訊埠傳遞至 Service Worker：
const messageChannel = new MessageChannel();
// Init port
navigator.serviceWorker.controller.postMessage({type: 'PORT_INITIALIZATION'}, [
messageChannel.port2,
]);
網頁會透過在該通訊埠上實作「onmessage」處理常式，監聽訊息：
// Listen to messages
messageChannel.port1.onmessage = (event) => {
// Process message
};
服務工作人員會收到通訊埠，並儲存其參照：
// Initialize
let communicationPort;
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'PORT_INITIALIZATION') {
communicationPort = event.ports[0];
}
});
從該時間點起，它可以透過在參照埠中呼叫 postMessage()，將訊息傳送至網頁：
// Communicate
communicationPort.postMessage({type: 'MSG_ID' });
MessageChannel 由於需要初始化通訊埠，因此實作可能較為複雜，但所有主要瀏覽器都支援這項功能。
後續步驟
在本指南中，我們探討了 Window 與 Service Worker 通訊的其中一個特定案例：「廣播更新」。我們探討的範例包括監聽重要的 Service Worker 生命週期事件，以及向網頁傳達內容或快取資料的變更。您可以思考更多有趣的用途，例如 Service Worker 主動與網頁通訊，而先前未收到任何訊息。
如需更多視窗和 Service Worker 通訊模式，請參閱：