Javascript 如何阻止PWA缓存我的网站

我有一个简单的PWA，可以从Github页面进行更新和更改

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

即使是从网站正常刷新（使用所有）

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

---

如何修复此问题？

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

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

我建议读一读关于它的文章

另外，如果您想了解有关PWAs的更多详细信息

---

更新

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

或者，您可以使用

updatefound

事件来检测代码中是否有可用的新软件版本：

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

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

---

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

如果使用Angular，则可以在ngsw-config.json中更改版本，如“版本”：1.5。这将在用户下次访问页面时下载最新更新。我使用的是vanilla JS，我不知道如何设置Angular，我有JQuerry。检查是否存在缓存问题的最简单方法是尝试在其他webbrowser或新的私人浏览/匿名窗口中打开页面。有更新的内容吗？如果不是，这可能只是部署的问题，因为当我推送一个新的更新时，比如update index.html，但它不会显示在任何浏览器或平台上，直到我清除了网站数据。我认为这不是一个好的设计，让用户在每次我更新时都这样做。我没有与服务人员打交道的经验。你能帮我建立一个能做你刚才在回答中所说的事情的系统吗？

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

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

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