缓存API在Safari iOS模拟器和Mac上无法工作。

Question

我正在尝试在我的index.html中使用以下代码片段。

<script>
        fetch('index1.js').then(response => {
            caches.open('test-cache').then(cache => {
                cache.put('index1.js', response);
            })
        })
    </script>

我在本地主机上有一个名为 test-website.com 的自定义域。当我通过 Chrome 访问此页面时，一切正常，index1.js 被存储在缓存中。现在，我打开了 iOS 模拟器 并在其中运行 Safari，然后再次运行相同的网站。我还在 Mac Safari 上检查了这个网站，但是在控制台中，我得到了以下内容：

Unhandled Promise Rejection: ReferenceError: Can't find variable: caches

问题 1) 我为什么会得到这个错误？

问题 2) 我已经检查了兼容性：Cache Storage API 和 Cache。第一个与 iOS Safari 兼容，第二个不兼容。这两者之间有什么区别？这可能是无法找到缓存的原因吗？

问题 3) 苹果支持 Service Worker，并且应该支持 Cache API。否则就没有价值了。有什么想法吗？

- Nika Kurashvili

---

我在生产环境中遇到了同样的问题，当安装软件时触发了事件，我触发了caches.open但是在全局范围内caches未定义。可能是某种竞争条件？ - Robert Daly

Answer 1

Cache Storage API 的文档中指出：

注意：仅当通过 HTTPS 访问时，Chrome 和 Safari 才会将 CacheStorage 暴露到窗口环境中。除非配置了 SSL 证书，否则 window.caches 将为 undefined。

请确保使用 HTTPS 提供和访问网页。

据我所知，当从 localhost 服务页面时，浏览器仍然允许访问 caches 变量以进行测试，但如果您正在自定义域名 test-website.com 上访问，则不适用此规则。

- Shinlos

---

这太荒谬了。把它交给苹果去处理吧。 - Caleb Prenger

Answer 2

缓存 API 在 Safari 上运行正常！

我想我可以回答问题2和问题3。 我很沮丧，因为我无法检查我的缓存 API 逻辑在 Safari 中是否正常工作。这是因为缓存数据在 Safari 开发者工具中不可见。

如何检查缓存 API 在 Safari 中是否正常工作。 打开 Safari 浏览器的开发者工具 - 网络选项卡，尝试发送两次需要被缓存的 API 请求。 如果 Safari 进行了缓存，网络响应将只会出现一次。

- doyeondo