registerNavigationRoute：未更新precached index.html NetworkFirst

Question

语境

我有一个使用webpack，vueJS和Workbox的SPA。在服务人员中，我有以下几行（）：

workbox.precaching.precache([
  '/index.html'
])

workbox.routing.registerNavigationRoute('/index.html', {
  blacklist: [
    /.*\.css/,
    /.*\.(?:png|jpg|jpeg|svg|gif)/,
    /.*\.(?:js|woff|woff2|otf|ttf)(?:$|\?)/
  ]
})

问题

首次构建该应用程序时，该app.js文件现在已命名app.xxxxxxxx.js（例如）。因此，当客户端使用服务工作者时，它将index.html使用以下行预缓存文件：

<script type=text/javascript src=/js/app.xxxxxxxx.js></script>

当我更新应用程序并对其进行重建时，该app.js文件将被命名app.yyyyyyyy.js，但客户端仍会index.html使用旧app.xxxxxxxx.js文件缓存该文件，因此该应用程序将无法工作（显然...）

预期行为

服务工作者似乎index.html使用CacheFirst策略获取了预缓存的文件。我猜如果它使用NetworkFirst策略，它将起作用。

有可能做到吗？

-编辑-

我忘了精确：每个.js文件都使用NetworkFirst策略进行缓存：

workbox.routing.registerRoute(
  /.*\.(?:js|woff|woff2|otf|ttf)(?:$|\?)/,
  workbox.strategies.networkFirst({
    cacheName: 'assets-cache',
    plugins: [
      new workbox.expiration.Plugin({})
    ],
  })
)

Answer 1

您应该使用workbox-webpack-plugin自动拍摄本地webpack资源的“快照”，并让它生成最终传递到 的所有文件的“预缓存清单” workbox.precaching.precache([])。

这可确保每当index.html重新部署您时，Workbox 都会更新之前缓存的条目。我建议阅读这份有关预缓存行为的材料。

（当您通过http://localhostURL 访问您的网站时，当您的预缓存清单中的条目似乎是“手动”输入时，浏览器的 JS 控制台中应该会记录一条错误消息，警告此情况。这很容易被忽略， 尽管。）