问题标签 [cachestorage]

我一直在分析复杂应用程序的缓存存储使用情况，当我意识到存储的具有一定内容长度的图像或脚本N实际上占用5N-10N了缓存存储空间。

考虑这个示例：我通过服务工作者从 OpenStreetMap 请求图像并将其存储在缓存中。缓存中仅存储一张图像。Chrome 版本是最新版本（版本 65.0.3325.146（官方构建）（64 位））。

这是刷新后缓存存储的视图：

这是清除缓存选项卡的视图：

因此，问题在于具有6.4KB实际大小的图像占用13.8MB了缓存存储空间。我错过了什么吗？

可以在https://googlechrome.github.io/samples/service-worker/basic/上看到实时示例- 少于几乎占用缓存存储 10KB的脚本。50KB

所以，问题是：当文件通过服务工作者缓存时，它们占用的空间怎么会显着增加？我同意实际请求比实际响应更重要，但不是10 倍。

可能有用的链接：

1. 显示高缓存存储利用率的 Chrome 开发工具
2. 服务工作者问题
3. https://bugs.chromium.org/p/chromium/issues/detail?id=795134

我试图使用此代码删除缓存

该代码在 chrome 中运行良好，但在边缘运行良好。它甚至没有抛出错误有没有人解决过类似的问题

我正在尝试将文件添加到 Angular 6 cli 项目中的缓存存储，但由于 zonejs 不断出现错误，我无法找出原因。如果我在没有其他代码的打字稿项目中运行，下面的代码可以正常工作。这些文件被添加到缓存中，因此该函数被执行，但随后它会引发错误。

如果我在我的角度项目中运行相同的代码，我会收到错误

错误：未捕获（在承诺中）：TypeError：给定值不是 Promise TypeError：给定值不是 Promise

请参阅此 Stackblitz以重现该错误。当您单击同步按钮时，给定文件将添加到缓存存储中，然后引发错误。

我使用 Ionic 开发了几个 PWA 应用程序。

每次我重新加载应用程序的页面时，在浏览器中，缓存存储的大小都会增加。而且没有清洗。它可以达到数 GB 的空间，最终导致配额超出错误。

如何避免在我的应用程序中过度使用缓存？

我试图让服务人员根据请求的类型响应获取事件。对于静态资源，我使用缓存：

对于 api 响应，我已经将 IndexedDB 与 Jake Archibald 的 IndexedDB 连接起来，承诺返回如下内容：

当我调用服务工作者中的所有内容时，缓存部分可以工作，但是 indexedDB 惨遭失败，抛出一个无法在 api url 获取的错误：

我的问题如下：
1.) 像这样分离存储获取请求有什么意义吗？
2.) 如何使 indexedDB 部分工作？

我的 Vue 应用程序中有以下服务工作者代码：

main.js

服务工作者.js

当我注释掉'c7d016677eb7e912bc40.worker.js'and'f328c7e2b379df12fa4c.worker.js'时，它工作正常。但是当我取消注释它们时，会发生以下情况：

• 我开始使用开发工具并取消注册任何服务工作者并删除缓存存储中的任何内容，以便我从一个干净的状态开始。
• 我加载localhost:8080。
• 服务人员留在该installing州。
• 在缓存存储中，我看到c7d016677eb7e912bc40.worker.js并f328c7e2b379df12fa4c.worker.js已成功缓存。
• 但是，“已成功缓存所有内容”。没有被记录到控制台。但是“问题缓存：”也没有被记录。

我了解您传递给 event.waitUntil() 的承诺让浏览器知道您的安装何时完成，以及是否成功。很明显，这个承诺存在一些问题。但我不知道问题是什么。它没有击中.then块或.catch块，当我查看开发工具中的缓存存储时，似乎'c7d016677eb7e912bc40.worker.js'并且'f328c7e2b379df12fa4c.worker.js' 正在成功缓存。

编辑：我正在使用worker-loader。我觉得这个问题与工作文件的加载方式有关，但我不明白为什么会有问题，因为当我转到localhost:8080/c7d016677eb7e912bc40.worker.jsor时localhost:8080/f328c7e2b379df12fa4c.worker.js，我会取回 JS 文件。

另外，我确保c7d016677eb7e912bc40.worker.js和中的前缀f328c7e2b379df12fa4c.worker.js是准确的。例如。那是c7d016677eb7e912bc40准确f328c7e2b379df12fa4c的。

更新：

给定一个请求，我如何确定它属于哪个缓存？ match，尽管在所有缓存中搜索，只会给我缓存的响应。我想检索缓存对象/缓存的名称和缓存的响应。

我目前正在为 iOS 开发一个离线网络应用程序。它使用 ServiceWorker 和 CacheStorage API 来离线存储应用程序代码。

在 iOS 11 中，一切正常。从 iOS 12 开始，每次重新启动浏览器时，CacheStorage 都会被清除。

我设置了一个关于如何重现此内容的小演示：它向您显示页面/主机上有哪些缓存，然后创建一个包含图片的新缓存。所以下次你访问它时，应该有一个现有的缓存。

1. 转到https://itoobi.github.io/servicebreaker/
2. 该页面显示“键：大小：0”（当前为 0 个缓存）
3. 它创建一个名为“test”的新缓存并显示“缓存已打开”。
4. 重新加载页面
5. 该页面现在显示“键：测试大小：1”（现有 1 个缓存）（再次“打开缓存”，但这在这里并不重要）
6. 关闭浏览器（通过在 iOS 任务管理器中关闭它）
7. 重启浏览器并重新加载页面
8. 它现在应该再次说“keys: test size: 1”，因为应该有一个现有的缓存。--> 在 iOS 12 上，页面在这里再次显示“keys: size: 0”。

我在桌面浏览器上进行了测试，包括最新的 Chromium 和 Firefox，它们都可以工作。

使用 iOS 11.4.x Safari，它可以工作。对于 iOS 12.x（12.0、12.1、12.1 beta 5）Safari，它不起作用。使用不同的 iPad 和 iPhone 设备进行测试。

所以问题是：有谁知道我做错了什么，Apple 是否更改了 API，或者这只是 Apple 方面的一个错误？如果有人有类似的问题，我也会感兴趣，因为我没有找到与此相关的任何内容。

测试页面代码：

对于移动设备上 Caches API 的可用性，我有点困惑。

https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage

文档说明此 API 在服务工作者范围和窗口范围内都可用。

我可以毫无问题地在桌面的 Chrome 上清楚地访问它。

现在，每当我在 Android 的 Chrome 上进行功能检测时，我都会得到未定义，就好像功能不可用一样。

我试图以这种方式检测：

通过连接的设备等从控制台日志调用

我想念什么？

PS：我知道 Safari 有非常基本的实现，所以我预计 Safari 会出错，但这里我在 Android 上使用 Chrome 进行测试；/

我们已经开始使用 CacheStorage API。通常它工作正常，但有时浏览器会遇到 CacheStorage 承诺从不响应的情况（即它们既不解决也不拒绝）。

一旦我进入这种情况，我可以在第一次调用时 100% 重现它，例如：

在示例代码中，它将打印：

但从来没有其他两个日志。

任何想法为什么会发生这种情况？以及如何解决这个问题？

如果我打开一个私人标签，那么它工作正常。从 UI 中清除缓存也可以解决问题。

这已在 Chrome 和 Safari 上重现。

我们已经看到open调用成功但随后match随机失败（即无法解决）的其他情况，即它似乎取决于对缓存的请求数，因为添加console.log似乎使问题不那么频繁。