使用 workbox.js 对 index.html 进行网络第一次缓存答案

【问题标题】：Network first caching of index.html using workbox.js使用 workbox.js 对 index.html 进行网络第一次缓存
【发布时间】：2018-04-25 07:46:23
【问题描述】：

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

我在 index.html 的预缓存方面遇到了一些问题，特别是每次我们发布新版本时，Service Worker 都会为过时的 index.html 提供服务。由于它提供过时的 index.html，因此找不到主 JavaScript 文件，因为它是基于构建版本控制的。

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

我还尝试从预缓存中删除 index.html，并将其放在运行时缓存中，并设置为网络优先。但它似乎没有被 service worker 缓存。

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

【问题讨论】：

你可以试试这个：github.com/jantimon/html-webpack-plugin。它在每次构建时从模板创建 index.html。
嗨@AliAnkarali，感谢您的回复。我忘了说我们正在使用 create-react-app 并且如果可能的话不想倾向于弹出。
您很可能会遇到常见的双重缓存情况，请参阅：Cache Control 以及 Chrome 中即将发生的更改Fresher Service Workers
@DeanTaylor，正如你所说。我能够探索到为我们的 service-worker.js 文件提供服务的 NGINX 配置，并且在将 Cache-Control 标头添加到我们的 NGINX 配置中的特定位置块后，我能够修复它。谢谢！
@user3477119 我已经通过评论发布了答案，请随时将其标记为答案。

标签： reactjs service-worker workbox

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

skipWaiting: true

或者，如果您自己编写 Service Worker，请将该行添加到您的 Service Worker 代码中：

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没有更新。

【讨论】：