reactjs - 如何使用Create React App实现skipWaiting？

Question

我希望用户能够在新的 Service Worker 可用并等待时立即更新？当有新更新可用时，我已经能够显示弹出窗口，但我想添加一个按钮来强制当场更新。我知道这可以通过调用skipWaiting来实现，但不确定如何使用Create React App来实现它。有人能够实现这一目标吗？将不胜感激的帮助。谢谢!

Answer 1

CRA build\service-worker.js 文件现在(v3 plus)包含处理 skipWaiting 的代码:

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

在 index.js 中调用的注册函数 serviceWorker.js 文件现在接受配置参数:

serviceWorker.register({
  onUpdate: registration => {
    const waitingServiceWorker = registration.waiting

    if (waitingServiceWorker) {
      waitingServiceWorker.addEventListener("statechange", event => {
        if (event.target.state === "activated") {
          window.location.reload()
        }
      });
      waitingServiceWorker.postMessage({ type: "SKIP_WAITING" });
    }
  }
});

这将跳过等待，然后在应用更新后刷新页面。