我想知道，当使用 CLI 构建 Vue PWA 应用程序并让所有配置为默认值时，我构建的应用程序是：
- 使用 HTML 预取链接在初始加载时预取所有块
- 使用 Workbox 的 PWA 机制预缓存所有块
这两种机制如何相互作用，我应该禁用两者之一吗？
谢谢！
index.html 中的预取机制<HEAD>：
预缓存清单在service-worker.js：
问问题
1116 次
1 回答
1
他们发生冲突。浏览器会多次下载它们。
最有可能发生的是这种情况（我说最有可能是因为预取链接是对浏览器的提示，不同的浏览器可能以不同的方式和优先级实现它的使用）：
- 浏览器获取 HTML
- 浏览器看到预取链接
- 在某个时候，浏览器开始下载链接供以后使用
- 注册 Service Worker 时，它会预缓存所有相同的资产
- 在以后访问/重新加载页面时，所有资产都来自 SW 的缓存，并且不会再次下载任何内容
发生双重下载是因为 SW 的预缓存事物使用缓存破坏并尝试像/realname.hash.js?bla=hash_in_the_manifest_file这样下载资产，即使您的文件名称中已经包含哈希值，预缓存机制也不满意。
实际上，如果您查看 Workbox 预缓存插件的文档，您会发现他们建议您删除修订（哈希）检查您是否已经在文件名中使用哈希值。
于 2019-10-27T07:28:38.213 回答