PWA 实战：Service Worker 生命周期、缓存策略与离线体验

// sw.js：一份带注释的骨架
const VERSION = 'v3';
const PRECACHE = `precache-${VERSION}`;
const RUNTIME = `runtime-${VERSION}`;

self.addEventListener('install', (event) => {
  // waitUntil 会推迟"安装完成"的确认，装一半退出会整体作废
  event.waitUntil(
    caches.open(PRECACHE).then((cache) => cache.addAll(PRECACHE_URLS))
  );
});

self.addEventListener('activate', (event) => {
  event.waitUntil(
    // 1. 清理不属于当前版本的所有缓存
    caches.keys().then((keys) =>
      Promise.all(keys.filter((k) => ![PRECACHE, RUNTIME].includes(k)).map((k) => caches.delete(k)))
    // 2. 立即控制未受控页面，否则要等下一次导航才生效
    ).then(() => self.clients.claim())
  );
});

// 主页面：load 后注册，不抢首屏资源
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const reg = await navigator.serviceWorker.register('/sw.js', {
        scope: '/',          // 控制范围，默认 = sw.js 所在目录
        updateViaCache: 'none', // 更新检查时绕过 HTTP 缓存，包括 import 的子脚本
      });
      console.log('SW registered, scope:', reg.scope);
    } catch (err) {
      console.error('SW register failed:', err);
      // 注册失败不影响页面功能——SW 必须是增强，不是依赖
    }
  });
}

// 1. cache-first：静态资源
async function cacheFirst(request) {
  const cached = await caches.match(request);
  if (cached) return cached;

  const response = await fetch(request);
  if (response.ok) {
    const cache = await caches.open(RUNTIME);
    cache.put(request, response.clone()); // clone 后一份入缓存一份返回
  }
  return response;
}

// 2. network-first：API
async function networkFirst(request) {
  try {
    const response = await fetch(request);
    if (response.ok) {
      const cache = await caches.open(RUNTIME);
      cache.put(request, response.clone());
    }
    return response;
  } catch {
    const cached = await caches.match(request);
    if (cached) return cached;               // 离线回退到旧数据
    return new Response(JSON.stringify({ offline: true }), {
      status: 503,
      headers: { 'Content-Type': 'application/json' },
    });
  }
}

// 3. stale-while-revalidate：常用非关键资源
async function staleWhileRevalidate(request) {
  const cached = await caches.match(request);
  const refresh = fetch(request)
    .then((response) => {
      if (response.ok) {
        caches.open(RUNTIME).then((cache) => cache.put(request, response.clone()));
      }
      return response;
    })
    .catch(() => cached); // 网络失败且无缓存时返回 undefined，由上层兜底

  return cached || refresh;
}

// fetch 路由：按 URL 特征分发策略
self.addEventListener('fetch', (event) => {
  const { request } = event;
  const url = new URL(request.url);

  if (request.method !== 'GET') return;           // 写操作永远直连
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(request));
    return;
  }
  if (/\.[0-9a-f]{8,}\.(js|css|woff2?)$/.test(url.pathname)) {
    event.respondWith(cacheFirst(request));       // 带内容哈希的静态资源
    return;
  }
  if (request.mode === 'navigate') {
    event.respondWith(handleNavigation(request)); // 导航请求，见"离线回退页"
    return;
  }
  event.respondWith(staleWhileRevalidate(request));
});

const PRECACHE_URLS = ['/', '/offline.html', '/app.css', '/app.js'];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(PRECACHE).then((cache) => {
      // addAll 是原子的：一条失败全部失败，install 就会中断——这是保护，不是 bug
      return cache.addAll(PRECACHE_URLS);
    })
  );
});

// 页面端：轮询/事件检测 waiting，弹"发现新版本"
async function watchUpdate() {
  const reg = await navigator.serviceWorker.getRegistration();

  reg?.addEventListener('updatefound', () => {
    const worker = reg.installing;
    worker?.addEventListener('statechange', () => {
      if (worker.state === 'installed' && navigator.serviceWorker.controller) {
        showUpdateBar(worker); // 有新版本已就绪，controller 存在说明不是首次安装
      }
    });
  });
}

async function applyUpdate(worker) {
  worker.postMessage({ type: 'SKIP_WAITING' });
  navigator.serviceWorker.addEventListener('controllerchange', () => {
    window.location.reload(); // 新 SW 接管后刷新，拿到新资源
  }, { once: true });
}

// sw.js：响应页面的跳过等待指令
self.addEventListener('message', (event) => {
  if (event.data?.type === 'SKIP_WAITING') self.skipWaiting();
});

async function handleNavigation(request) {
  try {
    const response = await fetch(request);
    return response;
  } catch {
    const offline = await caches.match('/offline.html');
    return offline || new Response('网络不可用', {
      status: 503,
      headers: { 'Content-Type': 'text/plain; charset=utf-8' },
    });
  }
}

// 页面 → SW：单发
navigator.serviceWorker.controller?.postMessage({ type: 'CACHE_PAGE', url: location.href });

// SW → 页面：用 clients 找到窗口
self.addEventListener('message', (event) => {
  if (event.data?.type === 'CACHE_PAGE') {
    event.waitUntil(cachePage(event.data.url));
    // 回执：通过 event.source 或 clients 广播
    self.clients.matchAll({ includeUncontrolled: true }).then((clients) => {
      clients.forEach((client) => client.postMessage({ type: 'CACHE_PAGE_DONE' }));
    });
  }
});

// 页面接收
navigator.serviceWorker.addEventListener('message', (event) => {
  if (event.data?.type === 'CACHE_PAGE_DONE') toast('本页已可离线访问');
});