让页面切换快如闪电：GitHub Issues 的缓存、预取与 Service Worker 实战

// sw.js — Service Worker 缓存策略
const CACHE_NAME = 'issues-cache-v1';
const API_PREFIX = '/api/';

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      // 预缓存应用 shell（HTML + 关键静态资源）
      return cache.addAll([
        '/',
        '/index.html',
        '/app.js',
        '/app.css',
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);

  // API 请求：stale-while-revalidate
  if (url.pathname.startsWith(API_PREFIX)) {
    event.respondWith(
      caches.open(CACHE_NAME).then(async (cache) => {
        const cached = await cache.match(event.request);
        const networkPromise = fetch(event.request)
          .then((response) => {
            // 只缓存成功响应
            if (response.ok) {
              cache.put(event.request, response.clone());
            }
            return response;
          })
          .catch(() => cached); // 网络失败时 fallback 到缓存

        // 有缓存就立即返回，同时后台更新
        return cached || networkPromise;
      })
    );
    return;
  }

  // 非 API 请求：常规 cache-first
  event.respondWith(
    caches.match(event.request).then((cached) => {
      return cached || fetch(event.request);
    })
  );
});

// main.js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

// cache.js — 客户端细粒度缓存
const resourceCache = new Map();

export function getCachedResource(key) {
  return resourceCache.get(key) || null;
}

export function setCachedResource(key, data) {
  resourceCache.set(key, {
    data,
    timestamp: Date.now(),
  });
}

// stale-while-revalidate：先返缓存，后台刷新
export async function fetchWithCache(key, url) {
  const cached = getCachedResource(key);
  const networkPromise = fetch(url)
    .then((res) => res.json())
    .then((data) => {
      setCachedResource(key, data);
      return data;
    });

  if (cached) {
    // 缓存命中：立即返回，不阻塞
    return cached.data;
  }
  // 无缓存：等网络
  return networkPromise;
}

// prefetch.js — 智能预取
import { setCachedResource } from './cache.js';

const prefetched = new Set();

export function prefetchOnHover(linkElement, fetchUrl) {
  linkElement.addEventListener('mouseenter', () => {
    const key = fetchUrl;
    if (prefetched.has(key)) return; // 已预取，跳过
    prefetched.add(key);

    fetch(fetchUrl)
      .then((res) => res.json())
      .then((data) => {
        setCachedResource(key, data);
      })
      .catch(() => {
        prefetched.delete(key); // 失败则移除标记，允许重试
      });
  }, { passive: true });
}

// IssuesList.jsx
import { fetchWithCache, getCachedResource } from './cache';
import { prefetchOnHover } from './prefetch';
import { useEffect, useRef } from 'react';

function IssueItem({ issue }) {
  const linkRef = useRef(null);

  useEffect(() => {
    if (linkRef.current) {
      prefetchOnHover(linkRef.current, `/api/issues/${issue.id}`);
    }
  }, [issue.id]);

  return (
    <a ref={linkRef} href={`/issues/${issue.id}`}>
      {issue.title}
    </a>
  );
}

export function IssuesList() {
  const [issues, setIssues] = useState(null);

  useEffect(() => {
    // 列表数据也走缓存
    fetchWithCache('issues-list', '/api/issues').then(setIssues);
  }, []);

  if (!issues) return <div>Loading...</div>;
  return issues.map((issue) => <IssueItem key={issue.id} issue={issue} />);
}

// IssueDetail.jsx
import { getCachedResource, fetchWithCache } from './cache';

export function IssueDetail({ issueId }) {
  const [issue, setIssue] = useState(() => {
    // 同步查缓存：如果 hover 预取已命中，零等待渲染
    return getCachedResource(`/api/issues/${issueId}`);
  });

  useEffect(() => {
    // 无论缓存是否命中，都后台刷新保证数据新鲜
    fetchWithCache(`/api/issues/${issueId}`, `/api/issues/${issueId}`)
      .then((fresh) => setIssue(fresh));
  }, [issueId]);

  if (!issue) return <div>Loading...</div>;
  return <div>{issue.title} — {issue.body}</div>;
}