求助：PWA应用在移动端Chrome中JS缓存无法自动更新问题

嘿，这个PWA缓存顽固不更新的问题我太熟了——尤其是移动端Chrome，卸载重装都不管用，普通用户又不会手动清缓存，确实头疼。结合Webpack构建的特性，给你几个无需用户干预的靠谱解决方案：

这是最基础也最核心的方案，让文件名随文件内容变化而变化，浏览器看到新文件名就会自动请求新资源，根本不会碰旧缓存。
在你的webpack.config.js里修改输出配置：

output: {
  filename: '[name].[contenthash].js',
  chunkFilename: '[name].[contenthash].chunk.js',
}

比如之前的main.js会变成main.abc123.js，只要JS内容有改动，哈希值就会变成def456，生成main.def456.js，浏览器绝对不会混淆新旧文件。

PWA的缓存大多由Service Worker掌控，得让它主动检测更新、替换旧缓存：
如果你用的是Webpack官方推荐的workbox工具，可以直接开启两个关键配置：

// 在workbox配置文件或自定义Service Worker中
workbox.core.skipWaiting(); // 新SW安装后立即激活，不用等旧SW关闭
workbox.core.clientsClaim(); // 新SW激活后立即接管所有打开的页面

如果是自定义Service Worker，记得在激活阶段清理旧缓存并接管客户端：

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      // 删除所有旧缓存（只保留当前版本的缓存名称）
      return Promise.all(
        cacheNames.filter(name => name !== 'your-app-cache-v2')
          .map(oldCache => caches.delete(oldCache))
      );
    }).then(() => self.clients.claim()) // 接管所有页面
  );
});

HTML是入口文件，如果它被浏览器长期缓存，就算JS文件名变了，用户也拿不到新的HTML去加载新JS。所以要给HTML设置短时效的缓存：

• 服务器端配置（比如Nginx）更可靠：

location ~ \.html$ {
  expires 10m;
  add_header Cache-Control "public, max-age=600";
}

• 也可以通过Webpack的HtmlWebpackPlugin添加meta标签（优先级低于服务器配置）：

new HtmlWebpackPlugin({
  meta: {
    'Cache-Control': 'public, max-age=600'
  }
})

在应用启动时主动检查SW更新，或者定期轮询，确保不会错过新版本：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    const registration = await navigator.serviceWorker.register('/sw.js');
    
    // 每小时检查一次更新（可根据需求调整频率）
    setInterval(() => {
      registration.update();
    }, 3600000);
    
    // 监听更新可用事件，可选提示用户刷新（更友好）
    registration.addEventListener('updatefound', () => {
      const newWorker = registration.installing;
      newWorker.addEventListener('statechange', () => {
        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
          // 这里可以显示一个友好提示，比如"有新版本啦，点击刷新获取"
          alert('应用已更新，请刷新页面体验最新版本');
          // 也可以自动刷新，但建议让用户手动操作，避免打断体验
          // window.location.reload();
        }
      });
    });
  });
}

这些方案搭配起来，基本能彻底解决移动端Chrome里PWA JS不更新的问题，用户完全不用手动清缓存，就能自动获取最新版本。

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