跨标签页通信（二）：Service Worker

在现代 Web 开发中，跨标签页通信的需求越来越普遍。无论是实现多标签页之间的数据同步，还是构建实时协作功能，跨标签页通信都能极大地提升用户体验。今天，我们将探讨一种强大的实现方式：Service Worker。

一、什么是 Service Worker？

Service Worker 是一种运行在浏览器后台的脚本，它可以在页面刷新或关闭后继续运行。Service Worker 的主要功能包括离线缓存、转发请求和网络代理。它还可以拦截和处理页面的网络请求，甚至可以在没有页面打开的情况下运行。

（一）特点

后台运行：Service Worker 在浏览器后台运行，不受页面刷新或关闭的影响。
事件驱动 ：Service Worker 通过监听事件（如 fetch、message）来处理请求。
离线支持：Service Worker 可以缓存资源，使页面在离线状态下也能正常加载。

（二）适用场景

离线支持：缓存页面资源，使用户在离线状态下也能访问。
性能优化：通过缓存资源减少网络请求，提升页面加载速度。
跨标签页通信：在多个标签页之间共享数据和状态。

二、Service Worker 实现跨标签页通信

Service Worker 可以作为多个标签页之间的通信桥梁。通过在 Service Worker 中监听 message 事件，我们可以将消息广播到所有注册了该 Service Worker 的标签页。

（一）注册 Service Worker

在页面中注册 Service Worker，确保 Service Worker 脚本被加载和运行。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面一</title>
</head>
<body>
    <input type="text" id="content" placeholder="请输入消息">
    <button id="btn">发送消息</button>
    <script>
        // 注册 Service Worker
        navigator.serviceWorker.register('sw.js')
            .then(() => {
                console.log("Service Worker 注册成功");
            });

        const content = document.querySelector("#content");
        const btn = document.querySelector("#btn");

        btn.onclick = function () {
            navigator.serviceWorker.controller.postMessage({
                value: content.value
            });
        };
    </script>
</body>
</html>

（二）Service Worker 脚本

在 Service Worker 脚本中，监听 message 事件，并将消息广播到所有注册了该 Service Worker 的标签页。

javascript 复制代码

// sw.js
self.addEventListener("message", async event => {
    const clients = await self.clients.matchAll();
    clients.forEach(client => {
        client.postMessage(event.data.value);
    });
});

（三）接收消息

在其他标签页中，注册相同的 Service Worker，并监听 message 事件以接收消息。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面二</title>
</head>
<body>
    <script>
        // 注册 Service Worker
        navigator.serviceWorker.register('sw.js')
            .then(() => {
                console.log("Service Worker 注册成功");
            });

        navigator.serviceWorker.onmessage = function ({ data }) {
            console.log("接收到消息:", data);
        };
    </script>
</body>
</html>

（四）效果

打开两个标签页，分别加载页面一和页面二。
在页面一中输入消息并点击"发送消息"按钮。
页面二的控制台会立即打印出接收到的消息。

三、注意事项

（一）同源限制

Service Worker 只能在同源页面之间通信。如果页面的协议、域名或端口不同，通信将无法进行。

（二）浏览器支持

Service Worker 是较新的技术，虽然现代浏览器（如 Chrome、Firefox、Safari）都已支持，但在使用前最好进行兼容性检查。

javascript 复制代码

if (!navigator.serviceWorker) {
    console.warn("Service Worker 不被支持");
}

（三）性能影响

虽然 Service Worker 的性能开销较小，但在高频率发送消息时，仍需注意对性能的影响。