service worker 不属于 bom,但通过 navigator.serviceworker 注册与通信;其缓存、推送、消息传递等功能需与 bom 协作完成,如 notification.requestpermission、clients.openwindow 等。

Service Worker 不属于 BOM(Browser Object Model),它和 window、navigator、location 这些 BOM 对象没有从属关系。它是一个独立运行在浏览器后台的脚本,由浏览器直接管理,不能通过 BOM API 创建或调用。但你可以借助 BOM 中的 navigator.serviceWorker 这个接口来注册、查询和通信——这是 BOM 提供的唯一“入口”。
注册 Service Worker:靠 navigator.serviceWorker
这是唯一与 BOM 直接挂钩的环节。必须在页面加载完成(或至少 DOM 就绪)后,通过 navigator.serviceWorker.register() 发起注册请求:
- 路径必须是同源的,且推荐放在根目录(如
/sw.js),否则作用域受限 - 仅 HTTPS 或
localhost下可用,BOM 不会允许非安全上下文注册 - 注册成功返回
ServiceWorkerRegistration对象,可监听更新、获取控制状态
离线缓存:完全在 Service Worker 内部实现
缓存逻辑不依赖 BOM,全部写在 sw.js 里:
-
install 阶段:用
caches.open()和cache.addAll()预存 HTML、CSS、JS、图片等静态资源 -
fetch 阶段:拦截所有网络请求,按策略返回缓存(如
cache.match(request))或发起新请求 -
activate 阶段:清理旧缓存版本,避免冗余;调用
self.clients.claim()让新 SW 立即接管当前页面
网页推送通知:BOM 提供权限,SW 负责接收与展示
推送不是 BOM 直接发的,而是三方协作:
- 前端用 BOM 的
Notification.requestPermission()向用户申请权限 - 后端通过 Push API(如 Web Push Protocol)向浏览器推送加密消息
- Service Worker 在
push事件中接收消息,再调用self.registration.showNotification()弹出通知 - 用户点击通知时,SW 触发
notificationclick事件,可通过clients.openWindow()(BOM 接口)唤起指定页面
与页面通信:靠 postMessage + BOM 的 message 事件
Service Worker 和页面无法直接共享变量,只能靠消息传递:
- 页面用
navigator.serviceWorker.controller?.postMessage(data)向激活的 SW 发消息 - SW 用
event.source.postMessage()或client.postMessage()回复 - 页面监听
navigator.serviceWorker.addEventListener('message', ...)(BOM 提供的事件)接收响应
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











