ServiceWorker

2025年01月19日

柏拉文

越努力，越幸运

一、认识

---

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

二、实现

---

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