使用服务工作者动态缓存 HTTP URL 的包装器？答案

【问题标题】：Wrapper for dynamically cache HTTP URLs using service worker?使用服务工作者动态缓存 HTTP URL 的包装器？
【发布时间】：2016-05-16 17:40:43
【问题描述】：

我有一个运行服务工作者的应用程序。我正在使用 sw-toolbox 库来动态缓存 URL，但我想在 sw-toolbox 上创建包装器，为我的应用程序提供 getter 和 setter 以进行 URL 缓存。

由于 Service Worker 在不同的线程中运行，而我的应用程序在主线程中运行，所以想知道如何在 Javascript 中创建一个包装器，我的应用程序可以通过它与 Service Worker 通信并按需缓存资源？

【问题讨论】：

【解决方案1】：

到目前为止，Cache api 可以从内容中获得，这意味着您可以直接从 Javascript 代码中使用它，无需在 Service Worker 中运行。

检查此线程以找到解决方案：https://github.com/slightlyoff/ServiceWorker/issues/698 您将能够使用窗口对象中的缓存。

意味着您可以使用各种缓存方法来播放内容：https://developer.mozilla.org/en-US/docs/Web/API/Cache

另外提醒一下，从 Chrome 46 开始，您将能够将内容存储在安全的来源中。

【讨论】：

【解决方案2】：

From the Documentation、Cache API/interface 暴露于窗口作用域以及工作人员。

您不必将它与服务人员一起使用，即使认为它是在服务工作者规范中定义的。

【讨论】：

在 Angular 5 中（至少）缓存 API 不可用，因为 Angular 用它的 ZoneAwarePromise 替换了浏览器的原生 Promise，这会导致错误。请参阅this question 在这种情况下，您需要另一个上下文来访问 API，例如 iframe（如我的解决方法中所述），或者可能与服务工作者通信以使其进行缓存。

【解决方案3】：

这取决于您的工作人员如何缓存数据，它只是使用标准的“Cache”API，而不是您只能查询附加到全局范围的cache 对象。

在这种特殊情况下，Cache.match() 是你的朋友。

【讨论】：