已安装的 PWA 如何更新

Question

所以我创建了一个 MERN Stack 应用程序并将其转换为 PWA，并将其安装在我的三星和 iPhone 上以查看它的外观。它运行完美，甚至在 Chrome 上使用 Lighthouse 对其进行了测试。问题是我对某些链接进行了一些更改，当我删除缓存时，我可以在我的计算机中看到更改，但是如果客户端安装它会发生什么，如果他们不知道这些更改，他们将如何获得这些更改.

如果有自动推送更改的方法，请告诉我。该站点是 plitz7.com

Answer 1

这就是我在 PWA 中的做法。在页面中添加下一个代码，在其中注册服务工作者：

<script type="module">


import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/4.1.0/workbox-window.prod.mjs';

  function createUIPrompt(opts) {
    if (confirm('A new update is available. Do you want to update now?')) {
       opts.onAccept()
    }
  }

  if ('serviceWorker' in navigator) {
    const wb = new Workbox('/sw.js');
    wb.addEventListener('waiting', (event) => {
      const prompt = createUIPrompt({
        onAccept: async () => {
          wb.addEventListener('controlling', (event) => {
            window.location.reload();
          });
          wb.messageSW({type: 'SKIP_WAITING'});
        }
      })
    });
    wb.register();
  }
  </script>

然后在你的服务工作者中添加下一个代码：

self.addEventListener("message", function(event) {
    if (event.data && event.data.type === "SKIP_WAITING") {
        skipWaiting();
    }
});

您可以在此处找到有关此方法的更多信息https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offer_a_page_reload_for_users

Answer 2

我找到了我的解决方案。我把 var cacheName = "anyname-v1.0.0" 放在 worker.js 的第一行，然后在缓存中，我添加了

.open(cacheName)

每次我对网站的任何部分进行更改时，我都会更改缓存名称的版本，瞧！

Answer 3

我的 pwa 应用程序遇到了同样的问题。我找到了一个最佳解决方案。

每次更改后更改版本 ID，它将顺利运行。

添加 Service-worker.js 的开头

var APP_NAME = <AppName>;
var APP_VER = "1.0";
var CACHE_NAME = APP_NAME + "-" + APP_VER;

添加 Service-worker.js 的结尾

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

    event.waitUntil(self.clients.claim());
    event.waitUntil(
        //Check cache number, clear all assets and re-add if cache number changed
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames
                    .filter(cacheName => (cacheName.startsWith(APP_NAME + "-")))
                    .filter(cacheName => (cacheName !== CACHE_NAME))
                    .map(cacheName => caches.delete(cacheName))
            );
        })
    );
    if(APP_DIAG){console.log('Service Worker: Activated')}
});

已安装的 PWA 如何更新

How to update a PWA when has been already installed

ios

reactjs

progressive-web-apps

mern