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文件文件，所以应用程序将无法工作（显然......）

预期行为

服务工作者似乎使用CacheFirst策略获取预先缓存的文件index.html。我想如果它使用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自动拍摄＆＃34;快照＆＃34;您的本地webpack资产，并让它生成＆＃34;预先缓存清单＆＃34;最终传入workbox.precaching.precache([])的所有文件。

这可确保无论何时重新部署index.html，Workbox都会更新以前缓存的条目。我建议您阅读this material有关预先缓存行为的信息。

（当您通过http://localhost网址访问您的网站时，如果您的预先缓存清单中的条目似乎已输入，则浏览器中的JS控制台中应记录一条错误消息警告34;用手＆＃34;。这很容易错过。）

registerNavigationRoute：precached index.html未更新NetworkFirst

1 个答案: