美洽Service Worker怎么配？

美洽的 Service Worker 配置要点是：在前端注册并部署合适的 sw 脚本（并指定 scope），在脚本里处理 install/activate/fetch/push/notificationclick 等事件，配合后台配置推送凭证与回调接口，确保站点用 HTTPS 提供服务，设定合理的缓存和版本更新策略，最后在多浏览器与真机环境中充分测试通知、离线和恢复逻辑。

先弄明白：什么是 Service Worker，为什么要配给美洽

把 Service Worker 想象成浏览器里跑的一个小工人，它可以拦截网络请求、缓存资源、接收推送并响应用户点击。对于美洽这类实时客服平台，Service Worker 能在页面未打开时接收推送消息、展示通知并把用户唤醒到聊天窗口，提升消息到达率和用户体验。

总体流程概览（四步走）

• 前端注册：在网站主脚本中注册 Service Worker 并指定 scope。
• 部署脚本：编写并部署 sw 脚本，处理生命周期与事件。
• 后台对接：在美洽后台或自建推送服务中配置推送凭证与回调。
• 测试与优化：验证通知展示、离线缓存、权限提示和多端兼容性。

具体步骤详解（Feynman 式分解）

1. 在前端如何注册

把注册想成告诉浏览器“请启动这个小工人并让它看守某个目录”。典型写法是在主 JS 里（页面加载时）写：

if (‘serviceWorker’ in navigator) { navigator.serviceWorker.register(‘/mq-sw.js’, {scope: ‘/’}); }

注意几点：

• 路径与 scope：sw 文件的路径决定它能拦截的目录，通常放在根目录并用 scope: ‘/’，这样能覆盖整个站点。
• HTTPS：Service Worker 只在 HTTPS 或 localhost 下生效。
• 注册时机：可以在页面首次加载时注册，也可以在用户触发登录/打开聊天时再注册，后者避免首次加载热量。

2. 编写并部署 sw 脚本（mq-sw.js）

脚本里需要实现几个核心事件处理函数：install、activate、fetch、push、notificationclick。每个函数有明确的职责：

• install：预缓存关键资源或离线页面。
• activate：清理旧缓存，做好版本切换。
• fetch：拦截请求以实现缓存优先、网络优先或混合策略。
• push：接收推送负载并显示通知。
• notificationclick：处理用户点击通知后的跳转或打开聊天窗口。

示例（伪代码，说明思路）：

self.addEventListener(‘push’, evt => { const data = evt.data.json(); self.registration.showNotification(data.title, {body: data.body, data: data}); });

3. 后台如何配合（美洽相关要点）

美洽通常会提供推送能力或与第三方推送对接。后台需要：

• 生成并配置推送凭证（浏览器推送通常使用 VAPID 公私钥对）
• 在美洽控制台或你的服务端保存用户的订阅信息（subscription 对象），用于发送 push 消息
• 实现消息回调与事件上报接口，保证消息投递和用户行为能回流到客服系统

关键点是：在用户同意通知后，前端会通过 pushManager.subscribe() 得到 subscription，对象需要发送到后端并与美洽账号关联。

4. 缓存与离线策略：别把缓存当成万灵药

缓存策略要符合业务需求。常见策略有：

• Cache First：首页/静态资源，优先读缓存，加速加载。
• Network First：聊天消息等需要最新数据，优先网络，失败则回退缓存。
• Stale-While-Revalidate：显示缓存并后台刷新，兼顾速度与时效。

注意缓存容量、版本管理与清理，避免用户长期看到旧资源。

实战示例：一个最小可用的 mq-sw.js 模板

下面这段伪代码说明最小可用逻辑：安装时预缓存一个离线页面；接收到 push 时展示通知；点击通知时打开或聚焦聊天页。

// install: 缓存离线页； activate: 清理旧缓存； fetch: 离线回退； push: 展示通知； notificationclick: 打开聊天

常见问题与调试技巧

• 为什么收不到推送？确认 subscription 是否发送到后端、后端是否使用正确的 VAPID/凭证、以及浏览器是否给了通知权限。
• 通知显示格式不对？检查 push 负载（大小、字段），不同浏览器对 notification 支持的字段不同。
• sw 更新不生效？确认脚本版本号变更并在 activate 阶段合理调用 clients.claim() 或 skipWaiting()。
• 本地调试技巧：使用浏览器 DevTools 的 Application → Service Workers 面板查看注册、日志与缓存；还可以在控制台通过 navigator.serviceWorker.getRegistration() 做调试。

与美洽系统对接的注意事项

• 用户识别：前端订阅时要把用户 ID 或会话 token 一并发送到后端，保证消息能推到正确会话。
• 安全与隐私：订阅信息与推送凭证是敏感信息，后端要做好权限控制与存储加密。
• 通知体验：不要滥用推送，合理控制频率并在消息中带上唤起到对应会话的参数。
• 多端一致性：如果用户同时在多个设备或标签页登录，处理好消息去重与聚焦逻辑。

一张表把常见事件和处理建议列清楚

测试矩阵（建议）

• 浏览器：Chrome/Edge/Firefox（移动端与桌面）
• 网络条件：在线、离线、弱网
• 权限场景：首次提示、拒绝后再允许、通知被屏蔽
• 多标签页：消息去重、聚焦逻辑

常见坑与小技巧（真是边做边想出来的）

• 不要把重要的 API 请求全部交给 Service Worker 代理，调试会非常麻烦，先在业务上区分可缓存静态与动态接口。
• 用好日志：在 sw 中把关键步骤用 postMessage 回主线程或用报错上报到后台，便于定位问题。
• 浏览器差异：像 iOS 的 Safari 到现在对 push 支持有限，设计体验时要有降级方案，比如通过短信或邮件补偿。
• 版本更新策略：在新 sw 安装完后用 notification 或 UI 提示用户刷新以获得新功能。

这些步骤按顺序做一遍通常就能把美洽的 Service Worker 配置好：前端注册、脚本实现、后端订阅管理与推送、最后测试和优化。配置过程会碰到各种小问题，但按着事件职责拆解就能逐个解决。希望这些说明能直接用得上，做的时候边试边改，遇到具体错误代码可以拿出来一起看。