在某些情況下,服務工作處理程序可能需要主動與 標籤,藉此告知特定事件。例如:
- 在安裝新版本的 Service Worker 時通知頁面,使頁面 可以向使用者顯示「更新以重新整理」按鈕,讓他們使用新功能 立即生效
- 透過下列方式,告知使用者服務工作處理程序端的快取資料異動: 上出現類似這樣的圖示:「應用程式已可離線使用」或新版 內容」。
我們會呼叫這些類型的用途,讓 Service Worker 不需要接收來自 Service Worker 的訊息 開始與「廣播更新」通訊。在本指南中,我們將探討 讓頁面和服務工作人員透過 瀏覽器 API 和 Workbox 程式庫。
正式環境案例
Tinder
Tinder PWA 使用 workbox-window
聆聽
網頁中的重要 Service Worker 生命週期片段 (「已安裝」、「控制」和
「已啟用」)。這樣新的服務工作處理程序開始時,就會顯示「有可用的更新」
橫幅,更新 PWA 並使用最新功能:
紅杉
在 Squoosh PWA 中,當 Service Worker 快取了所有需要的 素材資源會先傳到網頁,並顯示「可離線使用」訊息 浮動式訊息,讓使用者瞭解這項功能:
使用 Workbox
監聽 Service Worker 生命週期事件
workbox-window
提供簡單明瞭的介面,方便您監聽重要的 Service Worker 生命週期
事件。
程式庫實際上會使用以下用戶端 API:
updatefound
敬上
和 statechange
並在 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
敬上
提供了一種標準方法,可讓視窗用戶端通知快取回應已更新。這是
最常與 SnarWithRevalidate 驗證
策略。
如要播送更新,請在以下策略選項中加入 broadcastUpdate.BroadcastUpdatePlugin
:
Service Worker 端:
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:
廣播頻道 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。
用戶端 API
Client API 是簡單明瞭的
可透過疊代陣列的陣列,與 Service Worker 的多個用戶端進行通訊
Client
物件。
使用下列 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,但並非所有方法都支援 API。先檢查瀏覽器支援 利用 Vertex AI Workbench 使用者
訊息管道
訊息頻道需要
初始設定步驟,方法是將通訊埠從網頁傳遞至 Service Worker,以建立
與其他通訊管道頁面會將 MessageChannel
物件例項化,並傳遞
或是透過 postMessage()
介面連線至 Service 工作站:
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 的通訊模式,請參閱: