通过服务工作者通过用户单击按钮更新 PWA 反应应用程序（使用 CRA）

Question

当有新内容可用时，我想更新 PWA 应用程序。 由于我们无法从 service worker 访问 DOM，我该怎么做呢？ 服务人员正确识别新内容，但我无法绑定挂钩或上下文以在反应中显示我的模式或更新按钮。 有什么帮助吗？

服务工作者注册和onUpdate功能：

function RegisterValidSW(swUrl, config) {
 navigator.serviceWorker
.register(swUrl)
.then((registration) => {
  registration.onupdatefound = () => {
    const installingWorker = registration.installing;
    if (installingWorker == null) {
      return;
    }
    installingWorker.onstatechange = () => {
      if (installingWorker.state === 'installed') {
        if (navigator.serviceWorker.controller) {
          // At this point, the updated precached content has been fetched,
          // but the previous service worker will still serve the older
          // content until all client tabs are closed.
          // setUpdate(true);
          // registration.waiting.postMessage({ type: 'SKIP_WAITING' });
          console.log(
            'New content is available and will be used when all ' +
            'tabs for this page are closed. See https://cra.link/PWA.'
          );

          // Execute callback
          if (config && config.onUpdate) {
            config.onUpdate(registration);
          }
        } else {
          // At this point, everything has been precached.
          // It's the perfect time to display a
          // "Content is cached for offline use." message.
          console.log('Content is cached for offline use.');

          // Execute callback
          if (config && config.onSuccess) {
            config.onSuccess(registration);
          }
        }
      }
    };
  };
})
.catch((error) => {
  console.error('Error during service worker registration:', error);
});
}

这个函数在serviceWorkerRegistration.js文件中。 我们可以添加registration.waiting.postMessage({ type: 'SKIP_WAITING' }); 调用 skipWaiting 的函数，但它不等待用户交互并且无法重新加载页面。 我该如何解决？

Answer 1

您可以在注册 service worker 时尝试传入 onUpdate 函数。 在该函数中，在页面重新加载后向服务人员发送 SKIP_WAITING 消息。

 onUpdate: (registration) => {
    console.log("SW: sending SKIP_WAITING message to get updated serviceworker to take effect now (without manual restart)")
    // Old serviceworker will be stopped/new serviceworker started without reload
    registration.waiting.postMessage({type: 'SKIP_WAITING'})
    window.location.reload()
}

您的服务器工作者应该有 SKIP_WAITING 消息处理程序。 像这样的东西：

self.addEventListener('message', (event) => {
console.log("SW: received message event = "+JSON.stringify(event))
if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
}});

这对我有用。

我仍在苦苦挣扎的是，如果用户让应用程序保持打开状态，如何更新应用程序。 如中，

1. 用户浏览到 PWA url
2. 用户添加到主屏幕
3. 用户关闭浏览器选项卡
4. 用户从主屏幕打开 PWA

就让它永远敞开着……

这可能应该出现在一个新问题中，但我认为它可能与您的用例有关。