问题标签 [cachestorage]

我正在使用@angular/service-worker构建 PWA 应用程序。Angular service-worker 添加ngsw-config.json文件，您可以在其中添加“dataGroups”部分来配置缓存 url 和策略等。

在我的应用程序中，我需要将缓存的 url（如一些外部地图切片 url）动态添加到服务工作者 CacheStorage，而不是在 ngsw-config.json 文件的 dataGroups 中预先配置它们。

我没有看到 @angular/service-worker 公开任何公共类或方法来执行此操作。有谁知道如何实现这一目标？

我们目前正在与一家机构合作，该机构在 mobify 平台上使用 PWA 构建了我们的新电子商务网站。

我们的网站性能目前很差，我被带入该项目以作为产品负责人提供帮助。

我注意到缓存存储很快就会膨胀。浏览网站几分钟后，我的缓存存储空间可以达到 3GB，并且网站变得非常无响应。

我觉得不正常的是我们的缓存在页面加载后达到 500mb...

我如何能够检查或浏览缓存存储以查明导致缓存如此臃肿的原因？

我之前没有研究过 react/pwa，这对我来说是全新的。

对此的任何指示将不胜感激！

干杯! 约翰

缓存存储

我对 Safari 的 ITP 2.3 政策感到有些困惑，该政策将浏览器中脚本可写存储的生命周期限制为 7 天。

官方文章指出：

在 Safari 使用 7 天后，用户未与 website.example 上的网页进行交互，所有 website.example 的非 cookie 网站数据都将被删除。

这肯定包括localStorage. 有人确定是否

• 索引数据库
• 缓存存储
• 服务工作者

也被清除了吗？

有时多个 URL 指向同一个 HTML 文件。

比如base标签的经典使用

例如主页可以在： https ://dom.com/schops/

但以下 URL 也指向该文件：

我的问题是，是否有 HTTP 缓存标头或标记 URL 实际上具有另一个源 URL 的方法？

你通常如何解决这个问题？

无论如何，我正在 Cache Storge API 中创建我的实现，但我希望它的行为类似于在适当时使用必要的标头的标准。

我有一个服务人员在这里遵循 Nicolas Bevacqua 概述的这种方法。经过一些小的调整后，该代码对我有用。但是当浏览一段时间时，缓存会变得非常臃肿。我添加了一些排除项，即

但奇怪的是缓存总大小并不能反映实际缓存中的内容。那里似乎有我的两个缓存中没有列出的数据。有没有办法阻止这种情况发生？Service Worker 是否在缓存隐藏文件？

如果我caches在我的 service worker 代码中使用 Google Closure Compiler（以高级优化模式启动）会告诉我：

/var/www/html/perso/otraSite/web/js/sw_viaTypescript.js:79: 错误 - [JSC_UNDEFINED_VARIABLE] > 变量缓存未声明 })(缓存); ^^^^^^

1 个错误，0 个警告

直到现在我使用的一种解决方法是......我把window.caches谷歌闭包编译器成功编译但是如果我让那个代码，浏览器会告诉我：

sw.js:18 未捕获的 ReferenceError：未定义窗口

因此，我在之后由 Google Closure Compiler 编译的代码中替换window.caches为caches，但是......每次都必须这样做非常烦人。

有没有更清洁的方法来处理它？

所以我尝试从mozzila开发者网络学习缓存存储和火缓存，但是我不太明白缓存存储和对象缓存的基本区别是什么，两者功能相同

例如caches.match和cache.match具有匹配缓存的相同功能，但是我不太明白何时使用其中之一，也许有人可以更深入地解释一下CacheStorage和Cache的根本区别

参考： https ://developer.mozilla.org/id/docs/Web/API/CacheStorage https://developer.mozilla.org/en-US/docs/Web/API/Cache

我有一个网站，它使用 CacheStorage API 来使用 Service Worker 保存各种文件。由于我无法控制的原因，这些文件中有很多已经从它们加载的服务器中丢失了。但是，我刚刚意识到，数百个文件已在本地缓存在浏览器中，该浏览器多年来一直访问该站点（幸运的是，该站点本身并没有正确清除缓存）。我可以使用 chrome 的开发工具预览文件，但是当我单击“下载”时，它会尝试从服务器（不再存在）下载副本，而不是给我本地缓存的版本。

一次性导出这些文件的最简单方法是什么（记住有几百个）？我可以完全访问运行浏览器的计算机，以及运行站点/服务工作者的域。它不需要是一个漂亮的解决方案，因为一旦文件恢复，我计划学习大量课程以防止将来发生类似的事情。

我正在尝试为我的网络应用程序实现离线功能，但我在离线时遇到了一些奇怪的行为，这可能是我缺少的东西，因为它在 Chrome 和 Firefox 中都可以重现。

我将在下面描述我创建的示例应用程序的作用：

重现步骤

1. 打开一个新的 Chrome 选项卡并打开控制台视图。
2. 导航到示例应用程序（托管在 Netlify 上）。
3. 观察日志消息，确认 Service Worker 的安装和激活，以及应用缓存存储的创建和填充。
4. 转到开发人员工具中的应用程序选项卡并确认已创建并填充缓存
5. 在“Service Worker”下启用“离线”以使网络不可用。
   • 或者，只需关闭您的 wifi/网络。
6. 刷新页面。

观察到的行为

• MyCache服务工作者之前创建的缓存存储消失了。

预期行为

• 该页面无法按预期加载，但缓存存储在刷新后应保持可用，以便应用可以在离线时使用它来提供内容。

HTML 代码

服务人员

操作系统+浏览器版本

Google Chrome 版本：87.0.4280.141（官方构建）（x86_64） Firefox 版本：85.0b5（64 位，开发者版） 操作系统：macOS v11.1（Big Sur）

问题

这是预期的行为吗？如果是这样，为什么？

笔记

• 我无法在 Safari 上进行测试，因为我没有可视化缓存存储内容的可见方法（啊！）。
• 在 Firefox 上刷新后，您可能需要关闭并重新打开 devtools 以使“存储”选项卡自行刷新。

离线前：缓存是 A-OK 离线刷新后：缓存消失了！

我正在尝试使用 cacheStorage 在 iPadOS 14（不是 iOS）中的 Safari 和 PWA/独立模式“添加到主屏幕”应用程序之间共享数据。

我尝试了 Pooya Estakhri 的解决方案，它适用于 iOS 14，但相同的代码不适用于 iPadOS 14，尽管对 Firt 的引用暗示cacheStorage 应该在 iOS 和 iPadOS 上运行相同。它出现在 iPadOS 上，使用caches.open("auth")Safari 和 PWA 有单独的缓存存储。

有人在 iPadOS 上使用过这个吗？