对于我们在 window
之外所做的所有工作,您可能会认为 Cache
实例只能在 Service Worker 范围内访问。事实上,您可以在 Service Worker 作用域和(在 window
的 Web 应用的传统代码中)中访问 Cache
实例。这可让用户更轻松地与 Service Worker 缓存直接交互,或根据缓存状态更新界面。
一种可能的使用情形是,为用户可能想稍后阅读但知道当时可能处于离线状态的网页提供“保存以供离线使用”功能。下面的 Glitch 嵌入视频展示了如何使用 Workbox 执行此操作。
在上面的嵌入内容中,您可以看到,点击“保存以供离线使用”按钮时,app.js
脚本会从 window
上下文写入离线缓存。在 Service Worker 中,页面的静态资源会被预缓存,以供离线访问。NetworkOnly
策略与管理缓存网页的离线访问的特殊处理程序搭配使用,并传递到 NavigationRoute
。
如需测试 Glitch 嵌入的功能,请执行以下操作:
- 打开新的浏览器窗口并转到 https://save-for-offline-test.glitch.me/
- 点击添加到离线阅读清单按钮。
- 在 Firefox 或 Chrome 中打开浏览器的开发者工具。如果您使用的是 Chrome,请前往应用面板。在 Firefox 中,转至存储面板。
- 在任一浏览器的开发者工具中,您都会在左侧窗格中看到缓存存储空间项。点击即可将其展开。在 offline-cache 条目中,您应该会在右侧窗格中看到刚刚添加的网页网址。
- 点击页面底部的其他任何网页链接。
- 在任一浏览器中切换离线模式即可模拟离线连接。
- 点击您已添加到离线缓存的网页的链接。即使您处于离线状态,该文件也应该会显示。
- 点击您未添加到离线缓存的网页链接。请求将失败。
这不是在 window
中使用 Cache
实例的唯一用例。例如,您可以预测性地预提取并缓存您知道用户需要执行特定操作的资源。这样可以减少或避免按需下载这些资源的延迟时间。
还有其他一些潜在的有益用例,而且,由于您可以在没有 Service Worker 的情况下与 Cache
实例进行交互,因此并非所有 Service Worker 都需要安装一个。