Service Worker 是什么？怎么实现离线缓存？

register → install（预缓存）→ waiting（有旧版本在控制页面时）→ activate（清理旧缓存）→ 拦截 fetch 等事件

// 页面中注册：等页面加载完再注册，避免和首屏资源抢带宽
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
  })
}

// sw.js
const CACHE_NAME = 'static-v2' // 资源有变化就改版本号
const PRECACHE_URLS = ['/', '/assets/app.js', '/assets/app.css', '/assets/logo.png']

self.addEventListener('install', (event) => {
  // 预缓存静态资源；任何一个请求失败，这次安装就失败
  event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(PRECACHE_URLS)))
})

self.addEventListener('activate', (event) => {
  // 删除旧版本的缓存
  event.waitUntil(
    caches.keys().then((names) =>
      Promise.all(
        names
          .filter((name) => name.startsWith('static-') && name !== CACHE_NAME)
          .map((name) => caches.delete(name))
      )
    )
  )
})

self.addEventListener('fetch', (event) => {
  const { request } = event
  const url = new URL(request.url)
  const isApi = url.pathname.startsWith('/api/')
  // 只处理同源的 GET 静态资源；不调用 respondWith 的请求照常走网络
  if (request.method !== 'GET' || url.origin !== self.location.origin || isApi) return
  event.respondWith(cacheFirst(request))
})

// Cache First：先查缓存，没有再请求网络，并把结果存起来
async function cacheFirst(request) {
  const cache = await caches.open(CACHE_NAME)
  const cached = await cache.match(request)
  if (cached) return cached

  const response = await fetch(request)
  if (response.ok) {
    cache.put(request, response.clone()) // 响应体只能读一次，缓存的是副本
  }
  return response
}