Workbox SW：运行时缓存需二次刷新才生效问题咨询

我刚接触Service Worker和Workbox的时候也碰到过一模一样的问题！其实核心原因是首次加载页面时，Service Worker还处于安装/激活阶段，浏览器已经发起了第三方资源的请求，这时候Service Worker还没来得及拦截这些请求，自然不会缓存它们；第二次刷新时Service Worker已经完全激活，才能正常拦截并处理缓存逻辑。

下面给你几个针对性的解决办法：

1. 让Service Worker激活后立即接管所有页面 #

在你的Service Worker代码里添加激活事件处理，调用clients.claim()，这样激活后的Service Worker不用等页面刷新，就能立刻控制当前打开的所有页面：

self.addEventListener('activate', (event) => {
  // 等待所有激活逻辑完成，然后接管客户端
  event.waitUntil(clients.claim());
});

2. 确保Workbox路由处理第三方请求的CORS配置 #

第三方域名的请求大多涉及跨域，需要在路由策略里配置正确的fetchOptions，避免请求失败导致缓存不生效：

workbox.routing.registerRoute(
  // 匹配你的第三方域名规则
  new RegExp('^https://abc.(?:domain).com/'),
  // 推荐用StaleWhileRevalidate，兼顾缓存速度和内容新鲜度
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'third-party-abc-assets', // 给缓存起个明确的名字
    fetchOptions: {
      mode: 'cors', // 跨域请求必须指定这个模式
      credentials: 'omit', // 如果第三方不需要cookie等凭证，就设为omit；需要的话改成'include'
    },
  })
);

3. 尽早注册Service Worker #

在你的页面代码里，尽量提前注册Service Worker，减少“页面发起第三方请求”和“Service Worker激活”之间的时间差，提高首次加载时拦截请求的概率：

<script>
if ('serviceWorker' in navigator) {
  // 不用等window.load，DOM加载完成就注册
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('Service Worker 注册成功:', reg))
    .catch(err => console.error('Service Worker 注册失败:', err));
}
</script>

额外检查点 #

• 打开浏览器DevTools的Application > Service Workers面板，确认Service Worker状态是activated且is controlling当前页面
• 查看Cache Storage面板，确认第三方资源是否在你配置的缓存名称下被存储

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