Workbox预缓存与RuntimeCaching混合配置：如何实现PWA更新直接加载新版？

问题根因 #

你之前的方案在updated事件才触发刷新，updated事件触发的前提是新Service Worker已经完成了全部预缓存资源的下载和安装流程，这中间的2-5秒就是资源下载的耗时，用户这段时间一直看到的是旧页面，自然体验差。

你设想的在updatefound事件触发刷新的思路是正确的，只需要补充两处配置就能实现你要的效果，不会出现刷新后返回旧缓存的问题：

• 调整Service Worker配置，增加clientsClaim()调用，确保新SW激活后立刻接管所有已打开的页面，不会再由旧SW提供旧缓存
• 在SW注册逻辑里增加防重复刷新的标记，避免异常场景下的循环刷新

调整后的完整代码 #

1. Service Worker 代码

// Service worker extract
import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute';
import { clientsClaim } from 'workbox-core';
// 按需引入runtime caching相关依赖
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

// 激活后立刻接管所有已打开的页面
clientsClaim();
// 原有预缓存逻辑
precacheAndRoute(self.__WB_MANIFEST);
self.skipWaiting();

// 以下是Runtime Caching混合配置示例，按需添加即可
// 示例1：缓存同域API请求，用 stale-while-revalidate 策略兼顾速度和新鲜度
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
  })
);

// 示例2：缓存第三方CDN静态资源
registerRoute(
  ({ url }) => url.origin === 'https://你的CDN域名',
  new StaleWhileRevalidate({
    cacheName: 'cdn-resource-cache',
  })
);

2. Service Worker 注册代码

// Register service worker extract
import { register } from 'register-service-worker';

// 新增刷新标记，避免循环触发刷新
let isRefreshing = false;

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    updatefound() {
      // 检测到新SW开始下载时立刻强制刷新
      if (!isRefreshing) {
        isRefreshing = true;
        // true参数表示跳过本地缓存拉取最新资源
        window.location.reload(true);
      }
    },
    updated() {
      // 兜底逻辑，异常场景下如果没有在updatefound阶段刷新，这里补触发
      if (!isRefreshing) {
        isRefreshing = true;
        window.location.reload(true);
      }
    },
  });
}

逻辑说明 #

你触发的window.location.reload(true)是强制刷新，会跳过本地缓存直接拉取最新的HTML，同时新SW安装完成后调用clientsClaim()会立刻接管页面，后续的静态资源请求都会匹配新的预缓存清单，不会返回旧的缓存资源，完全符合你要的混合缓存模式需求。

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