如何阻止PWA缓存我的网站

Question

我有一个简单的PWA，在Github页面上进行更新和更改。

当我对网站进行更新时，使用该网站的设备上不会显示更新内容，因为（至少我认为）它被缓存了。我没有任何服务工作者来缓存该网站。

即使从网站进行普通刷新（使用所有这些方法），也无法刷新并显示更改。在iOS上，我需要手动进入设置并清除网站数据才能看到更改。

如何解决这个问题？

- Jayy

---

如果您正在使用Angular，则可以在ngsw-config.json中更改版本，例如“version”：1.5。这将在下一次用户访问页面时下载最新更新。 - Richardson. M

我正在使用原生JS，不知道如何设置Angular，但我有JQuery。 - Jayy

最简单的检查缓存问题的方法是尝试在不同的网络浏览器或新的私密浏览/无痕窗口中打开页面。新内容是否出现？如果没有，那可能只是部署问题。 - chrismclarke

Answer 1

使用先网络后缓存策略

对于更新频繁的请求，网络优先策略是理想的解决方案。默认情况下，它将尝试从网络中获取最新的响应。如果请求成功，则将响应放入缓存中。如果网络无法返回响应，则使用缓存中的响应。 https://developers.google.com/web/tools/workbox/modules/workbox-strategies#network_first_network_falling_back_to_cache

- Shano

Answer 2

当您重新加载页面时，会进行新的检查以验证是否有新的 SW 版本可用。但是，您需要关闭所有应用程序浏览器选项卡，以安装新的服务工作程序版本。

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

我建议阅读Google文档了解更多信息。

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

---

更新

浏览器会在导航后自动检查更新(最迟每24小时一次)。但是，您也可以手动触发更新(例如，您可以设置一个计时器，每小时触发一次或根据您的需求触发):

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

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

或者您可以使用updatefound事件来检测代码中是否有新的sw版本可用：

ServiceWorkerRegistration接口的onupdatefound属性是一个EventListener属性，每当statechange类型的事件被触发时都会调用它；它会在ServiceWorkerRegistration.installing属性获取新的服务工作者时触发。

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
         }
       });
      });
    });

- Francesco

---

这是因为当我推送新的更新，例如更新index.html时，它在任何浏览器或平台上都不会显示，直到我手动清除网站数据。我认为这不是一个好的设计，每次更新时都要让用户这样做。 - Jayy

我没有使用服务工作者的经验。您能帮我设置一个可以执行你在回答中所说的操作的服务工作者吗？ - Jayy