Question

我已经使用Google提供的workbox-build软件包将服务工作者集成到使用ReactJS构建的单页应用程序中。

我在index.html的预缓存方面遇到了一些麻烦，特别是每次我们发布新版本时，服务工作者都会提供过时的index.html。由于它提供了一个过时的index.html，因为它是基于构建版本化而找不到主JavaScript文件。

</div><script type="text/javascript" src="/static/js/main.fa34a3ce.js"></script>

我还尝试从预缓存中删除index.html，并使用网络优先设置将其置于运行时缓存中。但它似乎并没有被服务工作者缓存。

runtimeCaching: [
  {
    urlPattern: /\/$/,
    handler: 'networkFirst',
    options: {
      cacheName: 'my-cache-index'
    }
  }
]

Answer 1

您很可能会遇到常见的双重缓存情况，请参考Cache Control和Chrome Fresher Service Workers中即将进行的更改。

Answer 2

我tried very hard设置了网络优先策略进行预缓存，但是失败了。我已经放弃尝试并实施了以下策略：首先缓存，但将更新应用到简单的页面重新加载中。

要实现它，只需将以下选项添加到您的Workbox服务工作程序构建器（例如Webpack插件）：

skipWaiting: true

或者，如果您自己编写服务工作者，则将该行添加到服务工作者代码中：

workbox.core.skipWaiting();

此外，您可以在应用程序更新后向用户显示警报，和/或自动重新加载页面：

// Your service worker registration code
// ...

const registration = await navigator.serviceWorker.register(serviceWorkerUrl);

registration.onupdatefound = () => {
  const installingWorker = registration.installing;
  if (installingWorker == null) {
    return;
  }
  installingWorker.onstatechange = () => {
    if (installingWorker.state === 'installed') {
      if (navigator.serviceWorker.controller) {
        if (confirm('App\'s been updated. Restart to apply the update?')) {
          location.reload();
        }
      } else {
        // The service worker has been installed for the first time
      }
    }
  };
};

默认情况下，运行上述代码时检查更新。您可以通过以下方式手动触发更新检查：

// An appendix to the previous code block
registration.update();

很遗憾，no straightforward way to find out没有更新。

使用workbox.js对index.html进行网络首次缓存

2 个答案: