从窗口中访问缓存

对于我们在 window 之外所做的所有工作，您可能会认为 Cache 实例只能在 Service Worker 范围内访问。事实上，您可以在 Service Worker 作用域和（在 window 的 Web 应用的传统代码中）中访问 Cache 实例。这可让用户更轻松地与 Service Worker 缓存直接交互，或根据缓存状态更新界面。

一种可能的使用情形是，为用户可能想稍后阅读但知道当时可能处于离线状态的网页提供“保存以供离线使用”功能。下面的 Glitch 嵌入视频展示了如何使用 Workbox 执行此操作。

在上面的嵌入内容中，您可以看到，点击“保存以供离线使用”按钮时，app.js 脚本会从 window 上下文写入离线缓存。在 Service Worker 中，页面的静态资源会被预缓存，以供离线访问。NetworkOnly 策略与管理缓存网页的离线访问的特殊处理程序搭配使用，并传递到 NavigationRoute。

如需测试 Glitch 嵌入的功能，请执行以下操作：

  1. 打开新的浏览器窗口并转到 https://save-for-offline-test.glitch.me/
  2. 点击添加到离线阅读清单按钮。
  3. 在 Firefox 或 Chrome 中打开浏览器的开发者工具。如果您使用的是 Chrome，请前往应用面板。在 Firefox 中，转至存储面板。
  4. 在任一浏览器的开发者工具中，您都会在左侧窗格中看到缓存存储空间项。点击即可将其展开。在 offline-cache 条目中，您应该会在右侧窗格中看到刚刚添加的网页网址。
  5. 点击页面底部的其他任何网页链接。
  6. 在任一浏览器中切换离线模式即可模拟离线连接。
  7. 点击您已添加到离线缓存的网页的链接。即使您处于离线状态，该文件也应该会显示。
  8. 点击您未添加到离线缓存的网页链接。请求将失败。

这不是在 window 中使用 Cache 实例的唯一用例。例如，您可以预测性地预提取并缓存您知道用户需要执行特定操作的资源。这样可以减少或避免按需下载这些资源的延迟时间。

还有其他一些潜在的有益用例，而且，由于您可以在没有 Service Worker 的情况下与 Cache 实例进行交互，因此并非所有 Service Worker 都需要安装一个。