如何阻止 PWA 缓存我的网站

Question

我有一个简单的 PWA，我从 Github 页面更新和更改。

当我更新网站时，它不会显示在使用该网站的设备上，因为（至少我认为）它被缓存了。 我没有任何服务人员来缓存该站点。

即使是网站的正常刷新（使用所有这些）

不刷新它并显示更改。 在 iOS 上，我必须手动进入设置并清除网站数据以查看更改。

我怎样才能解决这个问题？

Answer 1

使用网络优先（网络回退到缓存）

https://developers.google.com/web/tools/workbox/modules/workbox-strategies#network_first_network_falling_back_to_cache

对于频繁更新的请求，网络优先策略是理想的解决方案。 默认情况下，它会尝试从网络获取最新的响应。 如果请求成功，它会将响应放入缓存中。 如果网络无法返回响应，则将使用缓存的响应。

Answer 2

当您重新加载页面时，会进行新的检查以验证是否有新的软件版本可用。 但是，您需要关闭所有应用浏览器选项卡才能安装新的 Service Worker 版本。

在 Chrome 开发工具中，您可以选中“应用程序”选项卡上的“重新加载时更新”复选框。 这对开发很有用。

我建议阅读有关它的Google 文档。

另外，如果您想了解有关 PWA 的更多详细信息，请查看我的文章。

---

更新

浏览器在导航后自动检查更新（最迟每 24 小时一次）。 但是，您也可以手动触发更新（例如，您可以有一个计时器，每小时或根据您的需要触发一次）：

navigator.serviceWorker.register('/sw.js').then(reg => {
  // ...

  // Trigger this after your timeout
  reg.update();
});

或者，您可以使用updatefound事件在您的代码中检测可用的新 sw 版本：

ServiceWorkerRegistration 接口的onupdatefound属性是一个 EventListener 属性，每当statechange类型的事件被触发时就会调用； 每当 ServiceWorkerRegistration.installing 属性获得新的 Service Worker 时，它就会被触发。

navigator.serviceWorker.register('/sw.js').then(reg => {
  reg.addEventListener('updatefound', () => {

    const newSW = reg.installing;
    newSW.addEventListener('statechange', () => {

      // Check service worker state
      if (newSW.state === 'installed') {
          // A new SW is available and installed.
          // You can update the page directly or better
          // show a notification to the user to prompt for a page reload 
          // and inform about the new version available
         }
       });
      });
    });