什么是离线缓存？Cache API的使用

// 在你的主页面（例如index.html）中
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('Service Worker registered with scope:', registration.scope);
      })
      .catch(error => {
        console.error('Service Worker registration failed:', error);
      });
  });
}

sw.js

// sw.js
const CACHE_NAME = 'my-site-cache-v1'; // 缓存名称，用于版本控制
const urlsToCache = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/app.js',
  '/images/logo.png'
];

// 安装事件：Service Worker首次安装时触发，通常用于预缓存核心资源
self.addEventListener('install', (event) => {
  console.log('Service Worker installing...');
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache); // 将指定资源添加到缓存
      })
      .catch(error => {
        console.error('Failed to cache during install:', error);
      })
  );
});

// 激活事件：Service Worker安装成功并激活时触发，通常用于清理旧缓存
self.addEventListener('activate', (event) => {
  console.log('Service Worker activating...');
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (cacheName !== CACHE_NAME) {
            console.log('Deleting old cache:', cacheName);
            return caches.delete(cacheName); // 删除旧版本的缓存
          }
          return null;
        })
      );
    })
  );
});

// 抓取事件：Service Worker拦截网络请求时触发
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request) // 尝试从缓存中匹配请求
      .then((response) => {
        // 如果缓存中有匹配的响应，直接返回
        if (response) {
          console.log('Serving from cache:', event.request.url);
          return response;
        }
        // 否则，发起网络请求
        console.log('Fetching from network:', event.request.url);
        return fetch(event.request).then((networkResponse) => {
          // 检查响应是否有效，例如HTTP状态码200
          if (!networkResponse || networkResponse.status !== 200 || networkResponse.type !== 'basic') {
            return networkResponse;
          }

          // 克隆响应，因为响应流只能被消费一次
          const responseToCache = networkResponse.clone();
          caches.open(CACHE_NAME).then((cache) => {
            cache.put(event.request, responseToCache); // 将新的网络响应存入缓存
          });
          return networkResponse;
        });
      })
      .catch(error => {
        console.error('Fetch failed:', error);
        // 可以在这里返回一个离线页面
        // return caches.match('/offline.html');
      })
  );
});

CACHE_NAME

// 使用Workbox的例子 (在sw.js中)
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate, CacheFirst, NetworkFirst } from 'workbox-strategies';
import { precacheAndRoute } from 'workbox-precaching';

// 预缓存通过构建工具注入的资源列表
precacheAndRoute(self.__WB_MANIFEST || []);

// 缓存图片：缓存优先，但设置过期时间
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      // workbox-expiration插件，设置缓存图片的最大数量和过期时间
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30天
      }),
    ],
  })
);

// 缓存CSS和JS文件：缓存优先
registerRoute(
  ({ request }) => request.destination === 'script' || request.destination === 'style',
  new CacheFirst({
    cacheName: 'static-assets',
  })
);

// 缓存API请求：陈旧时重新验证
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-data',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 20,
        maxAgeSeconds: 60 * 60, // 1小时
      }),
    ],
  })
);

// 默认情况下，所有未匹配的请求都走网络优先
registerRoute(
  ({ request }) => request.mode === 'navigate',
  new NetworkFirst({
    cacheName: 'pages',
  })
);