SuperAPI AI 工具集

service-worker

编程与开发

查看项目

更新于 10-15 23:32

技能介绍

用途:本技能提供 Service Worker API 的实现指导,覆盖注册、生命周期、缓存策略、推送通知与后台同步,适合需要离线访问、请求拦截或后台能力的 Web 项目。

主要能力:讲解注册流程(navigator.serviceWorker.register)、生命周期(下载→安装→等待→激活→控制 Fetch)、install 预缓存、activate 清理旧缓存、fetch 拦截请求、navigation preload、页面与 SW 双向通信,以及 Next.js 集成方式。

必要用法:SW 需 HTTPS(localhost 开发豁免),运行于独立线程,无 DOM、无同步 XHR、无 localStorage,仅支持静态 import。作用域默认限于 SW 文件所在目录,可用 Service-Worker-Allowed 响应头扩大。更新时递增缓存名并在 activate 删除旧缓存,可调用 self.skipWaiting() 与 self.clients.claim() 立即接管。Next.js 中将文件放于 public/sw.js,由客户端组件注册。

限制与注意:响应体只能读取一次,缓存与返回前需 response.clone();跨域无 CORS 返回 opaque 响应,cache.add() 会拒绝;waitUntil 需在事件处理器内同步调用;SW 空闲可能被终止,状态应存于 Cache API 或 IndexedDB。缓存策略、推送与同步、API 速查见参考文件。