Vue3 PWA场景下，如何验证Service Worker已缓存所有清单文件？

1. 判断所有预缓存文件是否完成缓存 #

Vue CLI PWA 基于 Workbox 实现预缓存，可通过以下两种方式判断缓存完成：

方式一：监听 Workbox 预缓存完成事件 #

在自动生成的 Service Worker 中，Workbox 会触发 precacheComplete 事件，可在 SW 中监听并通知前端页面：

// 在 service-worker.js 中添加（自定义SW模板需确保引入Workbox）
workbox.precaching.addPlugins([
  {
    precacheComplete: () => {
      // 所有预缓存文件完成缓存，通知所有打开的页面
      self.clients.matchAll().then(clients => {
        clients.forEach(client => {
          client.postMessage({ type: 'PRECACHE_COMPLETE' });
        });
      });
    }
  }
]);

方式二：主动校验预缓存列表 #

通过 self.__WB_MANIFEST 获取预缓存文件列表，遍历检查每个文件是否在缓存中存在：

// Service Worker 中执行校验逻辑
async function checkAllPrecached() {
  const cacheName = self.__WB_CACHE_NAME;
  const cache = await caches.open(cacheName);
  const cachedRequests = await cache.keys();
  const manifestUrls = self.__WB_MANIFEST.map(item => item.url);
  
  // 对比所有文件是否已缓存
  const allCached = manifestUrls.every(url => 
    cachedRequests.some(req => req.url.includes(url))
  );
  
  return allCached;
}

// 校验完成后通知前端
checkAllPrecached().then(isComplete => {
  if (isComplete) {
    self.clients.matchAll().then(clients => {
      clients.forEach(client => client.postMessage({ type: 'PRECACHE_COMPLETE' }));
    });
  }
});

前端页面监听消息控制动画：

// 页面脚本中监听SW消息
navigator.serviceWorker.addEventListener('message', (event) => {
  if (event.data.type === 'PRECACHE_COMPLETE') {
    // 隐藏加载动画
    document.getElementById('cache-loader').style.display = 'none';
  }
});

2. 缓存名称确定及后缀说明 #

缓存名称的获取与配置 #

• 默认规则：Vue CLI PWA 生成的预缓存名称格式为 ${项目名}-precache-v${版本号}-${站点origin}，比如你看到的vue-pwa-test-precache-v2-https://domainname就是实际缓存名。
• 自定义配置：可在 vue.config.js 中修改缓存名前缀：

module.exports = {
  pwa: {
    workboxOptions: {
      cacheName: 'my-custom-precache'
    }
  }
};

• SW中直接获取：在 Service Worker 里通过 self.__WB_CACHE_NAME 可直接拿到当前预缓存的完整名称。

DevTools后缀说明 #

你在谷歌开发者工具中看到的- https://domainname是 DevTools 自动附加的标识，不属于缓存名称本身，仅用于区分不同站点下的同名缓存，实际缓存名是前面的部分。

3. 缓存等待时显示加载动画 #

实现步骤： #

1. 页面初始化时显示加载动画：

<!-- 页面中的加载动画组件 -->
<div id="cache-loader" style="position: fixed; inset: 0; background: #fff; display: flex; align-items: center; justify-content: center;">
  <div class="loader">正在缓存离线资源...</div>
</div>

2. 注册 Service Worker 后，监听来自 SW 的缓存完成消息（如前文代码），收到消息后隐藏动画。
3. 覆盖首次安装和更新场景：首次安装时SW后台预缓存所有文件，完成后发消息；应用更新时，SW缓存新文件激活后通知页面，更新过程中也可保持动画显示。

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