Service Worker 离线缓存

Service Worker：生命周期（install/waiting/activate/fetch）、Cache API缓存策略（Cache First/Network First/Stale While Revalidate）、离线PWA、Background Sync后台同步 · 难度：入门 · +10XP

Service Worker —— 让网页离线也能用

Service Worker是运行在浏览器后台的JavaScript线程，可以拦截网络请求、缓存资源、推送通知。它是PWA（渐进式Web应用）的核心技术。

注册Service Worker

// 主页面
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(reg => {
    console.log('Service Worker 注册成功');
  });
}

sw.js —— 缓存策略

const CACHE_NAME = 'v1';
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache =>
      cache.addAll(['/', '/style.css', '/app.js'])
    )
  );
});
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response =>
      response || fetch(event.request)
    )
  );
});

动手练习

1. 基础练习：注册一个Service Worker，缓存首页HTML/CSS/JS。
2. 进阶应用：实现"缓存优先，网络更新"策略——先返回缓存，再后台更新。
3. 项目实战：用Workbox（Google的SW工具库）给你的网站添加离线支持。