【前-workbox-模块3】workbox.precaching

1、什么是workbox Precaching？

service woker的一个功能是能够在安装service woker时将一组文件保存到缓存中。 这通常被称为“预先缓存”，也就是在service worker之前缓存内容。

这样做的主要原因是rpecaching让开发人员可以控制缓存，这意味着他们可以确定缓存文件的时间和长度，以及在不进入网络的情况下将其提供给浏览器，这意味着使用预缓存可以用于创建Web 离线工作的应用。

通过简化API并确保有效下载资源，Workbox从预先缓存中解脱了很多繁重的工作。

2、workbox-prechaching 是如何工作的？

首次加载Web应用程序时，workbox-precaching将查看要下载的所有资源，删除所有重复项并连接相关的service worker事件以下载和存储资源，并保存有关资源及修订的信息在indexedDB中。

workbox-precaching在service worker的安装事件期间完成所有这些操作。

当用户稍后重新访问Web应用程序并且有一个具有不同于预先缓存资源的新service worker时，workbox-precaching 将查看新列表并确定哪些资源是全新的以及哪些现有资源需要更新，基于他们的revisioning。

这些资源将在缓存中更新，并且在新的service worker安装事件期间，它们的修订详细信息将更新或添加到indexedDB。

这个新的service worker在被激活并且触发了激活事件之前不会被使用。 在激活事件中，workbox-precaching将检查任何旧的缓存资产，并将其从缓存和indexedDB中删除。

每次安装和激活service worker时，Precache都会执行这些步骤，通过只下载已更改的文件，确保用户拥有最新资源。

3、缓存列表说明

workbox-precaching需要一个字符串数组或一个对象数组，如下所示：

此列表引用一组URL，每个URL都有自己的“修订”信息。 对于上面示例中的第一项“/styles/example.ac29.css”，修订信息位于URL本身。 这是Web的最佳实践，因为它允许浏览器长时间安全地缓存这些URL。 对于具有此类修订的资产，开发者可以将它们按原样添加到预先缓存列表中。

对于URL中没有修订信息的资源，需要添加一个版本属性，该属性应该是文件内容的哈希值。 这允许工作箱预先缓存以了解文件何时更改并更新它。

Workbox附带了帮助生成此列表的工具：

• workbox-build：这是一个npm模块，可以在gulp任务中使用，也可以作为npm运行脚本使用。

• workbox-webpack-plugin：Webpack开发者可以使用Workbox webpack插件。

• workbox-cli：CLI还可用于生成资产列表并将其添加到service worker。

这些工具可以轻松生成和使用站点的资源列表，但开发者可以自己生成列表，只需确保包含在文件更新时更改的唯一修订信息。

4、对预先存档文件的传入请求

workbox.precaching开箱即用的一个功能是检测传入的网络请求以尝试匹配预先存储的文件。

例如，请求路径/就可能被响应到/index.html

下面是workbox.precaching的操作列表以及如何更改该行为。

4.1 忽略Url参数

可以更改具有搜索参数的请求以删除特定值或删除所有值。

默认情况下，删除utm_值，将/？utm_ = 123之类的请求更改为/。

开发者可以使用ignoreUrlParametersMatching删除所有搜索参数或一组特定参数。

4.2 目录索引

对于以/结尾的请求将index.html附加到末尾，这意味着像/的请求将检查/index.html的预先缓存。

开发者可以将其更改为其他内容，或通过更改directoryIndex选项将其禁用。

+

4.3 清理Urls

如果cleanUrls是开启状态，当一个请求匹配失败时，workbox会在这个请求后面添加一个.html的后缀，也就是说/about这样的请求将匹配/about.html。

开发者可以禁用这个选项通过下面的代码：

4.4 自定义操作

如果要对传入请求的预先缓存资源进行自定义匹配，可以使用urlManipulation选项执行此操作，将返回一个能匹配数组的回调。

5、高级用法

默认情况下，workbox-precaching将为您设置安装并激活事件监听器。 对于熟悉service worker的开发人员来说，这可能并不可取，因为可能需要更精细的控制。

开发者可以使用PrecacheController将该项添加到预缓存，确定何时缓存这些资源以及何时应进行清理，而不是使用默认策略。

笔者个人订阅号~欢迎小伙伴们关注

微信公众号-感谢关注

若有疑问可以QQ联系笔者，虽然不一定100%解决你的问题，但是可以交流探讨一波：2276604211

顺便打个广告：如果有想入职中国银联上海技术开发的童鞋，也可以加上面的QQ资讯，笔者可以帮你回答一些相关问题~~