使用Workbox Broadcast Update追踪缓存更新遇问题，求可靠方案

问题根源 #

你当前使用Date头作为缓存更新检测依据，这是完全不可靠的——Date头返回的是服务器处理请求的当前时间，每次请求都会变化，导致BroadcastUpdatePlugin每次都会误判为缓存更新。另外控制台的错误大概率是CORS配置问题：跨域请求下，浏览器默认不允许Service Worker读取Date这类非CORS安全头，即便通过服务器配置Access-Control-Expose-Headers暴露该头，Date本身也不适合做更新检测。

可行替代方案 #

1. 使用标准资源校验头（推荐）

服务器通常默认支持ETag或Last-Modified头，这两个是专门用于标识资源内容是否变更的标准头：

• ETag：资源内容的哈希值，内容变更则哈希值同步变更
• Last-Modified：资源最后修改的时间戳，内容更新时时间戳同步更新

修改Workbox代码，替换检测头：

workbox.routing.registerRoute(
  ({ url }) =>
    url.pathname.includes("/home/") ||
    url.pathname.includes("/consultant/group/list/withConsultants"),
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: "api_cache",
    plugins: [
      new workbox.broadcastUpdate.BroadcastUpdatePlugin({
        headersToCheck: ["ETag", "Last-Modified"], // 替换为标准校验头
      }),
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [200],
        headers: {
          "content-type": "application/json;charset=UTF-8",
        },
      }),
    ],
  })
);

服务器配置要求：如果是跨域请求，需要在响应头中添加：

Access-Control-Expose-Headers: ETag, Last-Modified

确保Service Worker能读取到这两个头进行对比。

2. 使用自定义版本头

如果服务器不支持标准校验头，可以让后端添加自定义响应头（比如X-Content-Version），当接口返回内容变更时，同步更新该头的值（比如递增版本号、修改哈希字符串）。

代码修改示例：

new workbox.broadcastUpdate.BroadcastUpdatePlugin({
  headersToCheck: ["X-Content-Version"], // 检测自定义版本头
}),

同样需要服务器配置Access-Control-Expose-Headers: X-Content-Version来暴露该头。

3. 手动对比响应内容（无需后端改头）

如果无法修改服务器配置，可自定义Workbox插件，直接对比缓存响应与新响应的内容：

// 自定义更新检测插件
class CustomContentUpdatePlugin {
  async cacheDidUpdate({ cacheName, oldResponse, newResponse }) {
    if (!oldResponse || !newResponse) return;

    try {
      // 解析响应为JSON
      const oldData = await oldResponse.json();
      const newData = await newResponse.json();

      // 对比逻辑：优先对比接口返回的版本标识字段（推荐），或全量对比（大内容不推荐）
      if (oldData.version !== newData.version) {
        // 发送广播通知页面缓存更新
        const channel = new BroadcastChannel('workbox-updates');
        channel.postMessage({
          type: 'CACHE_UPDATED',
          cacheName,
          url: newResponse.url,
        });
        channel.close();
      }
    } catch (err) {
      console.error('对比响应内容失败:', err);
    }
  }
}

// 注册路由时使用自定义插件
workbox.routing.registerRoute(
  ({ url }) =>
    url.pathname.includes("/home/") ||
    url.pathname.includes("/consultant/group/list/withConsultants"),
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: "api_cache",
    plugins: [
      new CustomContentUpdatePlugin(), // 替换原BroadcastUpdatePlugin
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [200],
        headers: {
          "content-type": "application/json;charset=UTF-8",
        },
      }),
    ],
  })
);

注意：如果响应内容较大，全量对比（比如JSON.stringify(oldData) !== JSON.stringify(newData)）会有性能损耗，建议优先在接口数据中加入专门的版本标识字段。

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