sharedworker 由 javascript 实例化，非 html 创建；需 https 或 localhost 环境，safari ios 16.4 前不支持；构造失败常见原因包括浏览器不支持、协议不符或安全错误。
SharedWorker 不是“HTML 做出来的”，它靠 JavaScript 实例化，HTML 只负责承载页面脚本。不支持 HTTPS 或 localhost 环境下直接运行，Safari 旧版本（iOS 16.4 之前）压根不认，硬上等于白搭。
SharedWorker 构造失败的常见原因
页面调用 new SharedWorker('worker.js') 后没反应，或控制台报 SharedWorker is not defined、SecurityError，基本就这几种情况：
-
typeof SharedWorker === 'undefined'：浏览器不支持（如 Safari - 脚本路径 404：传入的
'worker.js'路径不是同源绝对路径，比如写成'./js/worker.js'但页面在子目录下，实际请求 404，DevTools 的 Sources 面板里也看不到该文件 - 跨域加载：worker 脚本响应头缺少
Content-Type: application/javascript，Chrome 会静默拒绝 - 同源策略踩坑：协议、域名、端口必须完全一致；localhost:3000 和 127.0.0.1:3000 被视为不同源
SharedWorker 脚本里不能用 console.log？
能用，但默认不显示在页面 Console 里。你得手动切换上下文：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 打开 Chrome DevTools → Console → 左上角环境切换按钮（两个重叠方块图标）→ 选
shared_worker (worker.js) - 如果下拉菜单里没有这个选项，说明 SharedWorker 还没真正启动：至少一个页面要完成
worker.port.start()，且 worker 脚本已执行到self.onconnect回调内 - 推荐在 worker 脚本开头加
self.console.log('init')，而不是console.log，避免某些环境报错 - 调试时可在
onconnect里打印e.ports[0].name（若设了 name）或用self.clients.matchAll()查活跃客户端数
怎么让多个页面同步购物车数据？
SharedWorker 本身不存状态，只管中转和协调。真要落地，必须搭配 localStorage 持久化 + 显式广播逻辑：
- SharedWorker 启动时从
localStorage.getItem('cart')读取初始值，解析为Map或普通对象 - 每个
port.onmessage处理增删改时，先更新内存数据，再localStorage.setItem('cart', JSON.stringify(...))，注意加防抖（比如setTimeout延迟 300ms 写入） - 变更后遍历所有 port 广播：
port.postMessage({ type: 'cart:update', data })，不要漏掉刚连进来的 port - 页面端首次连接后，先发
port.postMessage({ type: 'cart:get' })主动拉一次快照，再监听后续update消息，避免 UI 初始为空 - 若
new SharedWorker报错，立刻 fallback 到监听storage事件 + 自行读取localStorage，这是 iOS Safari 的唯一可行路径
真正麻烦的不是写通通信，而是竞态——比如两个标签页同时点“加购”，SharedWorker 里没锁机制，count++ 可能只生效一次。简单方案是用时间戳+版本号校验，或者把操作转成原子指令（如 { op: 'add', id: 'p1001', qty: 1 }）再逐条 apply。这点容易被忽略，但线上出过问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
