Service Worker 與效能

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    // 等 load 之後再註冊，避免和首屏資源搶頻寬與 CPU
    const reg = await navigator.serviceWorker.register('/sw.js', { updateViaCache: 'none' });

    reg.addEventListener('updatefound', () => {
      const newWorker = reg.installing;
      newWorker.addEventListener('statechange', () => {
        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
          // 新版已就緒但在等待：提示使用者重新整理
          showToast('有新版本', { action: () => newWorker.postMessage({ type: 'SKIP_WAITING' }) });
        }
      });
    });

    // 新 SW 接手後重新載入，確保頁面與 SW 版本一致
    navigator.serviceWorker.addEventListener('controllerchange', () => location.reload());
  });
}

const VERSION = 'v2026-09-12';
const SHELL_CACHE = `shell-${VERSION}`;
const RUNTIME_CACHE = `runtime-${VERSION}`;
const SHELL = ['/', '/offline.html', '/assets/app.3f2a1b.js', '/assets/main.9c0d.css'];

self.addEventListener('install', (event) => {
  event.waitUntil(caches.open(SHELL_CACHE).then((c) => c.addAll(SHELL)));
});

self.addEventListener('activate', (event) => {
  event.waitUntil((async () => {
    // 刪掉不是這個版本的快取
    for (const key of await caches.keys()) {
      if (!key.endsWith(VERSION)) await caches.delete(key);
    }
    await self.clients.claim();
  })());
});

self.addEventListener('message', (e) => {
  if (e.data?.type === 'SKIP_WAITING') self.skipWaiting();
});

self.addEventListener('fetch', (event) => {
  const { request } = event;
  if (request.method !== 'GET') return;           // 非 GET 一律不經手（Network Only）
  const url = new URL(request.url);

  if (request.mode === 'navigate') {
    event.respondWith(networkFirst(request));     // HTML：Network First + 離線頁
  } else if (url.pathname.startsWith('/assets/')) {
    event.respondWith(cacheFirst(request));       // 雜湊資源：Cache First
  } else if (request.destination === 'image') {
    event.respondWith(staleWhileRevalidate(request));
  }
  // 其他請求不呼叫 respondWith → 瀏覽器照常處理
});

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);
    cache.put(request, response.clone());         // body 只能讀一次，要 clone
  }
  return response;
}

async function networkFirst(request, timeoutMs = 3000) {
  const cache = await caches.open(RUNTIME_CACHE);
  try {
    const response = await Promise.race([
      fetch(request),
      new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), timeoutMs)),
    ]);
    if (response.ok) cache.put(request, response.clone());
    return response;
  } catch {
    return (await cache.match(request)) || (await caches.match('/offline.html'));
  }
}

async function staleWhileRevalidate(request) {
  const cache = await caches.open(RUNTIME_CACHE);
  const cached = await cache.match(request);
  const fetching = fetch(request).then((response) => {
    if (response.ok) cache.put(request, response.clone());
    return response;
  }).catch(() => cached);
  return cached || fetching;
}

self.addEventListener('activate', (event) => {
  event.waitUntil((async () => {
    if (self.registration.navigationPreload) {
      await self.registration.navigationPreload.enable();
      // 伺服器可透過 Service-Worker-Navigation-Preload 標頭辨認這種請求
      await self.registration.navigationPreload.setHeaderValue('shell-v2');
    }
  })());
});

self.addEventListener('fetch', (event) => {
  if (event.request.mode !== 'navigate') return;
  event.respondWith((async () => {
    const preload = await event.preloadResponse;   // 可能是 undefined
    if (preload) return preload;
    return fetch(event.request);
  })());
});

self.addEventListener('install', (event) => {
  event.addRoutes([
    // 影片與大型下載：一律直接走網路，不喚醒 SW
    { condition: { requestDestination: 'video' }, source: 'network' },
    { condition: { urlPattern: '/api/*' }, source: 'network' },
    // 雜湊資源：直接查 Cache Storage 中名為 shell-v2026 的快取，查不到才進 fetch handler
    { condition: { urlPattern: '/assets/*' }, source: { cacheName: 'shell-v2026-09-12' } },
    // SW 正在啟動時，導覽請求同時走網路與 fetch handler，誰快用誰
    { condition: { requestMode: 'navigate', runningStatus: 'not-running' },
      source: 'race-network-and-fetch-handler' },
  ]);
});

import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching';
import { registerRoute, NavigationRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

// 建置工具會把 [{url, revision}] 清單注入 self.__WB_MANIFEST
precacheAndRoute(self.__WB_MANIFEST);
cleanupOutdatedCaches();

// HTML 導覽：Network First，3 秒逾時
registerRoute(new NavigationRoute(new NetworkFirst({ cacheName: 'pages', networkTimeoutSeconds: 3 })));

// 圖片：Cache First，最多 60 張、30 天
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      new CacheableResponsePlugin({ statuses: [0, 200] }),
      new ExpirationPlugin({ maxEntries: 60, maxAgeSeconds: 30 * 24 * 60 * 60 }),
    ],
  })
);

// 非關鍵 API：SWR
registerRoute(({ url }) => url.pathname.startsWith('/api/feed'), new StaleWhileRevalidate({ cacheName: 'api' }));

const nav = performance.getEntriesByType('navigation')[0];
if (nav.workerStart > 0) {
  console.log('SW 啟動 + 攔截前置（ms）:', (nav.fetchStart - nav.workerStart).toFixed(1));
}

const viaSW = performance.getEntriesByType('resource').filter(e => e.workerStart > 0);
console.table(viaSW.map(e => ({
  name: e.name.split('/').pop(),
  swOverhead: (e.fetchStart - e.workerStart).toFixed(1),
  total: e.duration.toFixed(1),
  fromNetwork: e.transferSize > 0,
})));