6

语境

我有一个使用 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（例如）。因此，当客户端使用 service worker 时，它会预先缓存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({})
    ],
  })
)
4

1 回答 1

0

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

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

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

于 2018-05-24T19:54:11.190 回答