PWA 离线能力解析:Service Worker 与缓存策略怎么选

2026-08-08 MDN Web Docs 产品中心 6

浏览器中的网络代理

Service Worker 是运行在网页主线程之外的事件驱动脚本,可位于 Web 应用与网络之间,拦截受控范围内的请求。它能在安装阶段预缓存应用外壳,在 fetch 事件中决定返回缓存内容还是访问网络,因此是 PWA 离线体验、后台同步和推送能力的重要基础。

静态图标、字体和带内容哈希的脚本适合 Cache First:先读缓存,未命中再联网。对新闻、库存等强调新鲜度的数据,可采用 Network First,网络失败时回退缓存。Stale While Revalidate 会立即返回旧缓存,同时在后台更新,适合允许短暂陈旧的内容。

缓存不是越多越好

需要为缓存命名和版本化,在 activate 阶段清理旧缓存,避免长期占用设备空间。包含个人信息的响应、一次性链接和 POST 请求通常不应随意缓存。接口响应还要考虑用户隔离,防止账号切换后读取上一个用户的数据。

Service Worker 通常要求 HTTPS。发布新版时要测试安装、激活和旧页面共存过程,避免新旧资源不兼容。离线页面应明确告知网络状态,并为关键提交设计重试或后台同步机制,而不是让用户误以为操作已经成功。

参考资料:https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

上一篇
没有了
下一篇
没有了