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

Question

我已经使用Google的workbox-build软件包将服务工作者集成到了使用ReactJS构建的Single Page App中。

我在预缓存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

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