问题标签 [cachestorage]

我有一个网页，通过 Tomcat 的 https 提供服务，根据示例使用 serviceworker 获取资源并将其存储在缓存中。如果 Tomcat 未运行，则从缓存存储提供页面 - 到目前为止一切顺利。
我的 Tomcat 配置包含将 http 重定向到 https 的 redirectPort 属性。我遇到的问题：当Tomcat没有运行并且通过http访问我的网页时，浏览器显示：连接被拒绝，因为http 302重定向未存储在缓存中。我怎么能做到这一点？

在 PWA 中，我有一个定期更新的大数据文件。我认为将最新版本缓存在我的服务工作者中以提供离线支持会很好，但只有最新版本。我不希望旧版本的数据文件占用磁盘空间。

我正在使用 Workbox（版本 6.1.2），所以我尝试在我的服务人员中写这个：

为了完整起见，我的全方位服务人员是：

我的数据文件已命名/gen/real-player-data-HASH.json，所以我认为这会做我想做的事 - 请注意，当我的应用程序请求我的数据文件的新版本时，将其添加到缓存中，然后删除旧版本。

在实践中，这似乎只是部分起作用。它确实会创建缓存并将数据存储在那里，但文件的旧版本似乎永远不会被删除。

自己试试。转到https://play.basketball-gm.com/new_league/real将安装 service worker 并请求数据文件，如果你让它完全加载的话。您可能需要重新加载一次才能在 Chrome 开发工具中看到它。在撰写此问题时，最新版本的数据文件是https://play.basketball-gm.com/gen/real-player-data-2a6c8e9b0b.json ：

（旁注 - 我不确定为什么它说 Content-Length 为 0，您可以清楚地看到底部窗格中的数据。）

现在，安装了 service worker，如果你只是去我的数据文件的旧版本，比如https://play.basketball-gm.com/gen/real-player-data-540506bc45.json应该被上面定义的路由，我相信它应该导致以前的文件从缓存中删除。

它确实被拾取了，但现在缓存中有两个条目，另一个没有被删除：

它们不仅仅是空的占位符，您可以在底部窗格中查看两个文件中的数据。

尝试更多，您会在列表中获得更多，似乎没有限制：

https://play.basketball-gm.com/gen/real-player-data-18992d5073.json

https://play.basketball-gm.com/gen/real-player-data-fe8f297ea7.json

https://play.basketball-gm.com/gen/real-player-data-fd28409152.json

我在 Ubuntu 上使用 Chrome 89。

知道我做错了什么吗？还是有更好的方法来实现我的目标？

次日更新

我在我的服务人员中做了一些 console.log 调试。似乎 Workbox 基本上工作正常，除了这段代码实际上是从缓存中删除旧条目：

这是我编辑它的内容，用于调试：

这是我在执行上面写的操作时看到的输出（加载服务工作者，加载第一个数据文件，加载第二个数据文件，观察这个输出，因为它试图从缓存中删除第一个数据文件但失败）：

所以它确实识别了它需要从缓存中删除的旧 URL。它确实会在缓存中看到旧 URL 和新 URL。但该cache.delete调用解析为false. MDN 说：

解析为true缓存条目是否被删除，false否则

这篇文章说：

如果它没有找到该项目，它会解析为 false。

所以我想这意味着它没有找到该项目？但看截图，URL 匹配缓存中的条目。MDN说cache.delete 的第一个参数可以是 Request 对象或 URL。

这是 Chrome 中的错误吗？工作箱中的错误？还有什么？我在这里没有想法。

在 Chrome 90 上（我在 MacOS 上试过），当我CacheStorage使用

这可以按预期工作，我从开发工具中进行了交叉检查。

但是当我尝试取回响应时

它失败并返回undefined。

很明显，匹配失败是由于vary标题（按设计我想设置ignoreVary: false，顺便说一句，这也是默认选项）。

以下两个匹配尝试都按预期通过

第一个请求也应该匹配，因为x-a标头设置为abc.

我在这里做错了什么？

我正在尝试将服务工作者添加到在应用程序下运行的我们网站的一部分，除了主页没有尾部斜杠之外，它都可以正常工作 - 它将缓存页面但不会下载任何资产，除非我添加斜杠到url（我不能这样做，因为实时环境将其删除）

我已将服务工作者允许的标头添加到应用程序的站点：

并更改范围以允许无斜杠 url：

这很有效，因为我可以浏览到http://localhost/app-name离线，但它没有任何 css、js 或图像。

如果我浏览到http://localhost/app-name/我可以看到缓存已更新所有文件。有没有办法让服务人员在没有斜杠的情况下下载主页的文件？

服务工作者代码：

我试图编写一个函数来接受一个字符串并从缓存中删除正确的项目。我的功能是：

在控制台中，我看到got here with name: files/4325 并且我清楚地有一个同名的项目。

我使用这个功能的方式是：

但即使在我刷新缓存甚至重新加载页面后，该文件仍保留在缓存中。我错过了什么/做错了什么吗？

我使用这个https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage/delete作为参考。

因此，基本上在我的 Angular 项目中，我试图通过以下代码行使用Cache API缓存 HttpClient 的请求和响应：

request 参数是请求的 URL， response 参数是请求的响应。

我将从成功的 HttpClient GET 请求中获得的 HttpResponse 对象作为响应传递给 cache.put 调用。但是，我在文本编辑器中不断收到此错误。

我从以下代码行获取 HttpResponse 对象：

我真的不知道如何解决这个问题。这是否意味着我不能在 Angular 中将缓存 API 与 HttpClient 一起使用？还是有一些解决方法来处理这样的问题？

提前致谢。

我正在研究前端开发，我正在尝试制作一个社交网络网页，以使用 html、css、javascript、highlight.js（为标签应用不同的颜色）和 localStorage 来共享源代码以保存项目属性从代码编辑器主页，并将这些数据以卡片的形式加载到社区页面中。

好吧，为了保存项目，我在 index.js 中编写了这段代码

当我尝试在代码编辑器页面中运行脚本时，浏览器控制台告诉我它不支持本地存储，那么替换本地存储的最佳选择是什么：缓存存储、indexedDB 或使用数据库？

为什么浏览器不支持本地存储？

感谢小伙伴们的关注！

我正在使用“缓存”在 service worker 中缓存我的 PWA 资产并使其离线可用。

当我更改一个资产，特别是一个 js 文件时，我修改了我的 service worker 中的至少一个字节来触发它的本地更新：service worker 更新并检索它之前缓存的所有资产来刷新它的缓存。

然而，服务器以文件的缓存版本响应，虽然我拥有所服务的文件，但我无法控制 Cache-Control http 标头。

如何防止浏览器缓存服务工作者缓存的资源？对文件进行版本控制

后缀不起作用，因为此版本无法传递给引用 html 文件中的缓存文件的 or 或标记，这些文件是静态的，缓存将无法识别和提供脱机未版本化的文件名。

由于“caches.addAll”不允许 AFAIK 以任何方式将 http 请求标头（例如 Cache-Control）指定为 fetch 或 XMLHttpRequest，如何防止对我的资产进行额外的激进缓存阶段？

我使用的是纯 Javascript，如果可能的话，我需要在没有任何额外库的情况下完成它。另请注意，元 http-equiv 标签不会解决完整 html 以外的资产问题。

我正在我的投资组合网站上工作。它是一个 PWA，并且有一个 service worker。我正在使用服务工作者缓存索引页面和索引页面的所有必需资产。但是当我实际测试它时，缓存大小会随着每次负载而增加。经过一些实验后，我发现问题出在 Google 分析脚本上，但我不确定。但我找不到修复它的方法。我直接从谷歌分析中复制了代码。然后由于它不起作用，我尝试设置crossorigin="anonymous". 然后它也不起作用。

源代码

提前致谢！

我遇到了 Angular 服务工作者和数据组的奇怪错误。当我使用 DataGroups 获取 API 时，url 被加载到缓存存储中，没关系。但有时当我返回相同的 url 时，它们会消失，而不是从服务器更新，之后如果我离线，它们就无法访问。

我的服务人员配置（角度 v12.0.12）

和奇怪的行为

我在控制台中没有错误，除非我离线并尝试加载一个 504（网关超时）的 url。

感谢。