前端Wiki/词条/Service Worker 离线缓存

Service Worker 离线缓存

定义运行在浏览器后台的可编程代理线程，可拦截网络请求并离线响应

Service Worker 是一种特殊的 Worker：它独立于页面、没有 DOM、页面关闭后仍可被事件唤醒，能在 fetch 请求经过时决定返回缓存、转发网络或两者结合。注册后经 installing/installated/activating/activated 生命周期，install 阶段预缓存核心资源，activate 阶段清理旧缓存。

它必须以 HTTPS 部署（localhost 例外），作用域只能在注册路径之下。Cache API 是配套的存储：cache.put 写入请求响应对，cache.match 匹配读取。配合 Cache First / Network First / Stale While Revalidate 等策略，就能实现离线可用、弱网秒开的资源缓存体系。

只在 HTTPS 下注册（localhost 例外），作用域限于注册路径之下
install 预缓存、activate 清旧缓存、fetch 拦截并响应
缓存策略选 Cache First 离线优先、Network First 数据优先

JavaScript

// 注册（页面脚本）
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function (reg) {
    console.log('注册成功，作用域:', reg.scope);
  }).catch(function (err) { console.log('注册失败', err); });
}

// sw.js 核心逻辑
var CACHE = 'app-v1';
self.addEventListener('install', function (e) {
  e.waitUntil(caches.open(CACHE).then(function (c) {
    return c.addAll(['/index.html', '/style.css']);
  }));
});
self.addEventListener('fetch', function (e) {
  e.respondWith(caches.match(e.request).then(function (r) {
    return r || fetch(e.request);
  }));
});

⚠ 常见误区

在 install 里缓存失败却不 waitUntil，激活前缓存没写完
改了缓存内容但版本号没变，旧缓存一直被命中
service worker 里 console.log 在主页面看不到——独立的上下文

🔗 相关词条离线存储渐进增强