Question

我对service workers和reactjs有疑问。

建议是告知用户有关缓存的内容或新内容何时可用，以便用户了解缓存的内容。

我现在的问题是，如何通知用户？

当我使用create-react-app时，在registerServiceWorker.js中有这段代码，其中包含：{/ p>

此时，旧内容将被清除并且新内容将添加到缓存中。这是完美的时间显示＆＃34;新内容可用;请刷新。＆＃34; 您的网络应用中的消息。

function registerValidSW(swUrl) {
  navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              // At this point, the old content will have been purged and
              // the fresh content will have been added to the cache.
              // It's the perfect time to display a "New content is
              // available; please refresh." message in your web app.
              console.log('New content is available; please refresh.');
            } 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.');
            }
          }
        };
      };
    })
    .catch(error => {
      console.error('Error during service worker registration:', error);
    });
}

但实际上，在这个脚本上，我无权访问document，因为服务工作者远离脚本。我如何在反应组件中处理这个问题？

其他人如何处理此问题并通知用户？

Answer 1

问题中包含的代码在window客户端的上下文中运行。您可以完全控制显示您喜欢的任何UI元素。您可以随意修改这些console.log()语句并显示一些内容。

（在服务工作者的上下文中运行的单独代码，您确定该代码无法访问DOM。但这不是您要问的代码。）

反应＆amp;服务工作者 - 缓存内容 - 通知用户

1 个答案: