如何阻止 PWA 缓存我的网站

Question

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

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

即使是正常的网站刷新（使用全部these）

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

我该如何解决这个问题？

Answer 1

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

在 Chrome 开发工具中，您可以选中“应用程序”选项卡上的 "Update on Reload" 复选框。这对开发很有用。

我建议阅读有关它的 Google docs。

此外，如果您想了解有关 PWA 的更多详细信息 have a look at my articles。

更新

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

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

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

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

The onupdatefound property of the ServiceWorkerRegistration interface is an EventListener property called whenever an event of type statechange is fired; it is fired any time the ServiceWorkerRegistration.installing property acquires a new 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
         }
       });
      });
    });

Answer 2

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

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

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

如何阻止 PWA 缓存我的网站

How to stop a PWA from caching my website

html

javascript

browser-cache

progressive-web-apps