ServiceWorker

2025年01月19日

柏拉文

越努力，越幸运

一、认识

---

Service Worker 可以作为跨标签页通信的中间层，通过 postMessage 实现消息分发。

利用 Service Workers，各个标签页可以通过 self.clients.matchAll() 方法找到所有其 他客户端(如打开的标签页)，然后使用 postMessage 发送消息。

这个方法相比 BroadcastChannel 更加灵活，因为 Service Workers 可以通过 Focus 和 Navigate 事件来控制页面的焦点和导航等。 ServiceWorkers 提供了在后台运行脚本的能力，这些脚本可以在网络受限或没有网 络的情况下运行。当你用 ServiceWorkers 进行页面间的通信，你可以利用它们来推 送消息到打开的 (如浏览器标签页)。

二、实现

---

2.1 发布消息

创建 Service Worker

self.addEventListener('message', (event) => {
    const clients = await self.clients.matchAll();
    clients.forEach(client => client.postMessage(event.data));
});

注册 Service Worker

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js').then(() => {
        console.log('Service Worker registered');
    });
}

发布消息

// 发送消息
navigator.serviceWorker.controller.postMessage({ text: 'Hello, Tabs!' });

2.2 接收消息

创建 Service Worker

self.addEventListener('message', (event) => {
    const clients = await self.clients.matchAll();
    clients.forEach(client => client.postMessage(event.data));
});

注册 Service Worker

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js').then(() => {
        console.log('Service Worker registered');
    });
}

发布消息

// 接收消息
navigator.serviceWorker.onmessage = (event) => {
    console.log('Received message:', event.data);
};