元素
元素
工具
博客
问答

PWA 更新后用户看不到新内容怎么办？

Prog.亚楠 阅读 6
前端

我用 Workbox 搭了个 PWA，上线后发现用户经常看不到最新版本。明明我已经更新了 service worker，也看到浏览器后台注册了新的 sw.js，但页面还是老的，除非手动清除缓存或者强制刷新。

我现在的策略是用 staleWhileRevalidate 处理 HTML，其他静态资源用 cache-first。是不是 HTML 的缓存策略有问题？试过在 sw 注册时加 { updateViaCache: 'none' } 也没用。

workbox.routing.registerRoute(
  ({ request }) => request.destination === 'document',
  new workbox.strategies.StaleWhileRevalidate()
);
更新策略
我来解答 赞 2 收藏
二维码
手机扫码查看
反馈
1 条解答
小素伟
小素伟 Lv1
PWA更新问题确实让人头疼，特别是涉及到缓存策略的时候。按照规范，staleWhileRevalidate对HTML资源的处理可能会导致这个问题。

首先检查你的service worker激活逻辑。确保在新的sw.js注册后立即激活它，而不是等到下一次页面加载。可以试试在register时添加这个：



if ('serviceWorker' in navigator) {

  navigator.serviceWorker.register('/sw.js').then(function(registration) {

    if (registration.waiting) {

      registration.waiting.postMessage({type: 'SKIP_WAITING'});

    }

  });

}


然后在service worker里监听message事件来处理skipWaiting：



self.addEventListener('message', function(event) {

  if (event.data && event.data.type === 'SKIP_WAITING') {

    self.skipWaiting();

  }

});


另外建议给你的HTML缓存加上版本号或者hash值，这样每次更新都能强制刷新资源。workbox有专门的插件来做这件事，叫workbox-precaching，用起来比staleWhileRevalidate更稳妥些。

最后提醒一下，缓存策略要综合考虑用户体验和资源更新需求，别为了追求极致性能把用户都搞懵了。这活儿真不容易啊，我也折腾了不少次才摸清楚门道。
点赞
2026-03-26 20:05
相关推荐
元素
元素
工具
博客
问答
登录/注册