sharedworker可实现多窗口共用通知通道：同源https页面通过主页面授权后将pushsubscription传入sharedworker，后者统一管理并广播消息，各页面接收后调用notification显示，权限与ui分离，状态不依赖内存。
SharedWorker 是 HTML5 提供的一种多上下文（多个页面、iframe、甚至 Service Worker）共享的 Web Worker，它能让不同窗口（同源）复用同一套后台逻辑和状态。要实现“多个窗口共用同一个通知推送通道”，核心思路是：由 SharedWorker 统一管理通知权限、订阅状态、消息接收与分发，避免每个页面重复申请权限或建立冗余连接。
一、确保跨窗口通信的基础条件
SharedWorker 要生效，必须满足以下前提：
- 所有页面必须同源（协议、域名、端口完全一致），否则浏览器直接拒绝创建 SharedWorker；
- 页面需运行在安全上下文（https 或 localhost），否则 Notification API 和 SharedWorker 均不可用；
- 用户已主动授予站点通知权限（不能静默触发），且权限需在 SharedWorker 初始化前至少有一个页面完成授权；
- SharedWorker 的脚本路径需为绝对 URL（如
/js/push-worker.js），相对路径可能因页面路径不同导致加载失败。
二、SharedWorker 内统一管理通知权限与 PushManager
SharedWorker 中不能直接调用 Notification.requestPermission()（该 API 只能在 window 上下文中调用），但可以协调主页面完成授权后，将权限状态和 PushSubscription 传递进来。推荐结构如下：
- 主页面首次加载时调用
Notification.requestPermission()，成功后通过port.postMessage({type: 'init', permission: 'granted', subscription})将订阅信息传给 SharedWorker； - SharedWorker 内部缓存当前有效的
PushSubscription对象，并监听来自各端口的消息； - 当收到服务端推送（例如通过 EventSource、WebSocket 或 fetch 轮询），SharedWorker 解析消息内容，再广播给所有已连接的端口（即所有打开的页面）；
- 各页面通过自己的 port 监听 SharedWorker 的广播，收到后调用
new Notification(...)显示通知——此时权限已由主页面确认，无需再次申请。
三、页面端与 SharedWorker 的连接与消息路由
每个页面需独立连接 SharedWorker，并约定消息格式，便于统一调度：
// 页面中
const worker = new SharedWorker('/js/push-worker.js');
worker.port.onmessage = (e) => {
if (e.data.type === 'show-notification') {
// 权限已就绪，直接显示
new Notification(e.data.title, {
body: e.data.body,
icon: e.data.icon
});
}
};
worker.port.start();
// 向 SharedWorker 发送初始化或心跳等消息
worker.port.postMessage({ type: 'register', tabId: Date.now() });
SharedWorker 脚本中维护一个 ports 数组，每次 onconnect 时保存 port，并在收到推送消息时遍历广播：
// push-worker.js
let ports = [];
let currentSubscription = null;
self.onconnect = function(e) {
const port = e.ports[0];
ports.push(port);
port.onmessage = function(msg) {
if (msg.data.type === 'init') {
currentSubscription = msg.data.subscription;
// 可选：向所有已连接页面广播上线状态
broadcast({ type: 'ready' });
}
};
port.start();
};
function broadcast(msg) {
ports.forEach(port => port.postMessage(msg));
}
四、处理订阅更新与失效场景
PushSubscription 可能过期或变更（如用户清除站点数据、更换设备），SharedWorker 需配合后端做订阅同步：
- 页面检测到
navigator.serviceWorker.ready后，应检查是否已有有效 subscription，若无则调用pushManager.subscribe()并将结果发给 SharedWorker； - SharedWorker 收到新 subscription 后，覆盖旧值，并可主动调用后端 API 更新数据库；
- 当某页面关闭，其 port 会自动断开，SharedWorker 可监听
port.onclose清理数组（现代浏览器会自动清理，但显式处理更稳妥）； - 若所有页面关闭，SharedWorker 实例会被浏览器自动终止，下次有新页面连接时重新启动，因此状态不应持久化在内存中——关键数据（如 subscription）需存于 IndexedDB 或由后端托管。
不复杂但容易忽略的是：SharedWorker 无法访问 DOM、localStorage、window 或 document，所有 UI 操作（包括通知弹出）必须交还给页面端执行。它的角色是“中枢调度员”，而非“执行者”。把权限判断、消息解码、去重分发交给 SharedWorker，把展示、交互、错误反馈留给页面，才能真正实现多窗口轻量、一致的通知体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
