sharedworker 无法直接感知前台标签页，但可通过页面主动上报焦点状态并由 worker 轻量仲裁，精确识别当前最前端标签页；页面用 visibilitychange/focus/blur 上报，worker 维护 currentfronttab 并广播变更，配合端口关闭与卸载清理实现高可靠性。
sharedworker 本身无法直接感知哪个标签页处于前台焦点态——它没有访问 window.document.visibilitystate 或 document.hasfocus() 的权限，也不具备监听页面 visibilitychange 或 focus/blur 事件的能力。但你可以通过“页面主动上报 + worker 状态仲裁”的方式，**近似实现对最前端标签页的精确识别与锁定**，关键在于让每个页面在获得/失去焦点时，及时、可靠地通知 sharedworker。
页面端：实时上报焦点状态变更
每个标签页需监听自身可见性与焦点变化，并向 SharedWorker 发送带唯一标识的状态消息：
- 使用
document.addEventListener('visibilitychange')捕获页面是否可见（visibilityState === 'visible'） - 补充监听
window.addEventListener('focus')和blur，覆盖从后台切回、点击激活等更细粒度场景 - 每次状态变为“活跃可见”时，发送
{ type: 'focus', tabId: 'tab-abc123' }；变为隐藏或失焦时，发送{ type: 'blur', tabId: 'tab-abc123' } -
tabId 必须唯一且稳定：推荐用
crypto.randomUUID()在页面首次加载时生成并持久存于sessionStorage，避免刷新丢失
SharedWorker 端：维护当前“最可能前台”的标签页
Worker 不做复杂判断，只基于最新有效上报做轻量仲裁：
- 用一个变量
let currentFrontTab = null记录当前被标记为 focus 的 tabId - 收到
focus消息时，直接更新currentFrontTab = msg.data.tabId，并广播{ type: 'front_tab_changed', tabId: currentFrontTab }给所有端口 - 收到
blur消息时，检查currentFrontTab === msg.data.tabId，若匹配则清空currentFrontTab = null，再广播变更 - 不依赖定时轮询或超时自动降级——焦点状态由页面主动驱动，更准更快
容错与边界处理
真实场景中需应对页面崩溃、强制关闭、无响应等情况：
- 监听
port.onclose：一旦某个端口断开（如标签页关闭），立即从内部状态中清理对应 tabId，防止残留 - 页面卸载前显式通知：在
beforeunload中调用port.postMessage({ type: 'unload', tabId })，Worker 提前释放资源 - 不假设“只有一个前台页”：允许短暂重叠（如双屏操作、DevTools 切换），以最后一条
focus消息为准，符合用户直觉 - Worker 不主动探测页面状态，避免引入
self.clients.matchAll()这类高开销 API（部分浏览器尚不支持或触发权限警告）
典型使用场景示例
例如实现“仅最前台标签页播放通知音效”或“仅前台页触发一次版本检查”：
- 页面监听 Worker 广播：
port.onmessage = ({ data }) => { if (data.type === 'front_tab_changed') { isFront = data.tabId === myTabId; } }; - 当收到新消息或需要执行敏感操作时，先校验
isFront再执行，其他页面静默跳过 - 无需轮询、不依赖 visibilityState 延迟（Chrome 中该事件可能滞后 100ms+），响应及时
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
