为网站Service Worker添加activate事件监听器及Fetch功能咨询

嘿，我来帮你搞定Service Worker的离线缓存配置问题！你现在卡在activate和fetch的整合，还漏掉了几个关键环节，我一步步给你讲清楚～

首先：补上你遗漏的核心环节——Install事件 #

你之前的代码只处理了fetch事件，但要实现离线访问，第一步得在Service Worker安装时预缓存网站的核心静态资源（比如HTML、CSS、基础图片），不然用户第一次离线时根本没东西可加载。同时我们加上activate事件来管理缓存版本，避免旧缓存干扰。

下面是整合了install、activate、fetch的完整代码：

// 定义缓存名称和版本，更新资源时改版本号即可清理旧缓存
const CACHE_NAME = 'my-site-cache-v1';
// 把你网站需要离线访问的所有静态文件列在这里
const PRECACHE_ASSETS = [
  '/',
  '/index.html',
  '/styles.css',
  // 比如还有图片：'/images/logo.png'，按需添加
];

// 1. Install事件：预缓存核心资源
self.addEventListener('install', (event) => {
  // 等待缓存完成后再激活Service Worker
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(PRECACHE_ASSETS))
      .then(() => self.skipWaiting()) // 强制新SW立即激活，不用等用户刷新
  );
});

// 2. Activate事件：清理旧缓存，确保用最新版本
self.addEventListener('activate', (event) => {
  const currentCaches = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      // 过滤出旧缓存（不在当前缓存列表里的）
      return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
    }).then(cachesToDelete => {
      // 删除所有旧缓存
      return Promise.all(cachesToDelete.map(cacheToDelete => caches.delete(cacheToDelete)));
    }).then(() => self.clients.claim()) // 让新SW立即接管所有打开的页面
  );
});

// 3. Fetch事件：处理资源请求，实现离线访问
self.addEventListener('fetch', (event) => {
  // 只处理GET请求，跳过POST等不适合缓存的请求
  if (event.request.method !== 'GET') return;

  event.respondWith(
    caches.match(event.request)
      .then(cachedResponse => {
        // 情况1：缓存里有资源，直接返回，同时后台去网络更新缓存
        if (cachedResponse) {
          // 后台更新缓存，不阻塞当前请求
          fetch(event.request).then(networkResponse => {
            caches.open(CACHE_NAME).then(cache => {
              cache.put(event.request, networkResponse);
            });
          });
          return cachedResponse;
        }

        // 情况2：缓存里没有，去网络请求，成功后存入缓存
        return fetch(event.request).then(networkResponse => {
          // 只缓存成功的响应
          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;
        });
      })
  );
});

然后：在主页面注册Service Worker #

这也是很容易漏掉的一步！你需要在网站的主HTML文件里添加注册代码，让浏览器知道要加载这个Service Worker：

<script>
// 先检查浏览器是否支持Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    // 注册SW文件，注意路径要正确（比如你的SW文件放在根目录就写'/sw.js'）
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('Service Worker注册成功，作用域：', registration.scope);
      })
      .catch(err => {
        console.log('Service Worker注册失败：', err);
      });
  });
}
</script>

几个关键注意事项 #

• 缓存版本管理：每次更新网站静态资源时，记得修改CACHE_NAME里的版本号（比如从v1改成v2），这样Service Worker会自动触发install和activate事件，清理旧缓存并缓存新资源。
• HTTPS要求：Service Worker只能在HTTPS环境下运行（localhost开发环境除外），所以部署到线上时要确保网站用HTTPS。
• 资源路径要准确：预缓存列表里的文件路径必须和实际请求路径一致，不然会缓存失败。
• 调试工具：用Chrome DevTools的「Application -> Service Workers」面板可以轻松调试，比如强制更新SW、模拟离线环境、查看缓存内容等。

内容的提问来源于stack exchange，提问作者Will