清理缓存后如何恢复Blazor WASM的offline-cache离线缓存

Blazor PWA 内置的 Service Worker 默认仅在首次安装激活阶段执行离线资源预缓存逻辑，也就是把静态资源写入offline-cache-<随机哈希>缓存桶。你手动删除所有缓存后，当前激活的 Service Worker 已经完成过安装流程，不会自动重新执行预缓存步骤；而blazor-resources-/是运行时动态缓存，用户访问资源时会自动填充，所以才有你遇到的差异表现。

方案1：版本升级时触发 Service Worker 更新（推荐） #

该方案符合 Blazor PWA 的默认设计逻辑，适合版本升级的业务场景：

1. 修改你的缓存清理逻辑，清缓存后主动触发 Service Worker 检查更新：

window.clearCache = async () => {
    // 原有清缓存逻辑
    const cachesNames = await caches.keys()
    for (let i = 0; i < cachesNames.length; i++) {
        await caches.delete(cachesNames[i])
    }
    // 新增：主动触发 Service Worker 更新
    if ('serviceWorker' in navigator) {
        const registration = await navigator.serviceWorker.getRegistration()
        if (registration) await registration.update()
    }
    // 之后再执行强制重载逻辑
}

2. 版本升级时只要你修改了前端静态资源，Blazor 会自动更新service-worker-assets.js里的版本哈希，新的 Service Worker 安装时会自动执行预缓存逻辑，把所有资源写入新的offline-cache-<新哈希>缓存桶。

方案2：手动触发预缓存（无需更新 Service Worker 版本） #

如果不需要升级 Service Worker，只是补全已删除的离线缓存，可以通过消息通信主动触发预缓存：

1. 首先修改 Service Worker 文件（默认是service-worker.js），抽离预缓存逻辑并监听主线程消息：

// 抽离公共预缓存方法
async function precacheOfflineAssets() {
  const cacheName = `offline-cache-${self.assetsManifest.version}`
  const cache = await caches.open(cacheName)
  const assetUrls = self.assetsManifest.assets.map(item => item.url)
  await cache.addAll(assetUrls)
}

// 监听主线程触发预缓存的消息
self.addEventListener('message', async (event) => {
  if (event.data?.action === 'RUN_PRECACHE') {
    await precacheOfflineAssets()
    event.ports[0]?.postMessage({ done: true })
  }
})

2. 在前端页面加载完成后，主动给 Service Worker 发消息触发预缓存：

async function runManualPrecache() {
  if (!('serviceWorker' in navigator) || !navigator.serviceWorker.controller) return
  return new Promise(resolve => {
    const channel = new MessageChannel()
    channel.port1.onmessage = e => e.data.done && resolve()
    navigator.serviceWorker.controller.postMessage(
      { action: 'RUN_PRECACHE' },
      [channel.port2]
    )
  })
}

• 非版本升级场景下不要全量删除所有缓存，建议仅删除旧版本的offline-cache-*缓存，避免丢失离线资源
• 可通过浏览器开发者工具的 Application > Cache Storage 面板查看离线缓存的填充状态，也可以在Service Workers面板手动触发更新、跳过等待等操作验证逻辑

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