问题标签 [cacheapi]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
5515 浏览

javascript - ServiceWorker / Cache API 中的通配符

我正在使用 ServiceWorker 并且在开发模式下工作得很好,我的问题是在生产模式下我的包名称是使用哈希生成的,例如1234das3123ad5.bundle.js,所以服务工作者没有缓存它。我的 sw 代码如下所示:

Cache API的文档中,我没有看到任何关于如何实现这一点的示例。

显然我可以缓存dist文件夹下的所有内容,例如:

但我不觉得它是一个优雅的、长期的、好的解决方案。这是一种在缓存中拥有通配符的方法吗?像'/dist/*.bundle.js'什么?

0 投票
1 回答
164 浏览

service-worker - PWA - 为不同的 seo 友好 url 缓存和加载相同的 appshell

我们是消费者互联网,拥有 SEO 友好的网址:www.xyz.com/user-1、www.xyz.com/user-2、www.xyz.com/user-n。从技术上讲,这些都是具有不同 url 的用户页面。对于所有这些情况,我们只需要加载一个 html 文件(app-shell)。

我想要实现的是:

  1. 转到 www.xyz.com/user-1 页面,缓存 html (app-shell) 文件。
  2. 导航到 www.xyz.com/user-2 页面,从 www.xyz.com/user-1 的缓存中获取 html 响应(因为它是同一个 app-shell )。

我无法做到这一点,因为缓存 api 的“匹配”方法适用于 url 请求对象,我无法操作它。有没有办法可以操纵 url 请求对象?或者有解决方法吗?

0 投票
1 回答
1375 浏览

service-worker - PreloadJS 和 Service Worker

我正在尝试将 Service Worker 与 PreloadJS 一起使用。我已经缓存了所需的图像,然后使用该caches.match()函数加载它们。

当我尝试使用 jquery 加载图像时,它工作正常,但是在使用 preloadJS 加载时,它会出现以下错误

“someurl”的 FetchEvent 导致网络错误响应:“不透明”响应用于类型不是 no-cors 的请求

虽然如果我加载任何其他未缓存的图像,PreloadJS 会正确加载该图像。仅当我使用caches.match.

这可能是什么原因?

使用 preloadjs 加载图像

使用 jquery 加载图像

Service Worker 获取事件

我使用 PreloadJS 或 jQuery 加载时的响应对象:

响应 {type: "opaque", url: "", redirected: false, status: 0, ok: false, ...}

0 投票
1 回答
1160 浏览

java - 播放框架 2.6:NoClassDefFoundError:播放/缓存/DefaultCacheApi

我正在尝试将我的应用程序从 play 2.2.6 升级到 play 2.6.3,但我遇到了这个问题。

我已经阅读了@KdgDev@NikolajPL问题的答案,听起来很相似,但到目前为止没有任何帮助。

我不确定这个问题的根源,但我认为它可能与 Redis DB 连接有关,因为它使用不同的缓存方法,并且从 play 2.5 开始默认 ehcahce 应该被禁用。

我的配置文件:

构建.sbt

插件.sbt

我正在使用 sbt 运行我的项目并获得以下堆栈跟踪:

0 投票
1 回答
5087 浏览

javascript - Service Worker 自动更新流程

我对服务人员更新过程有疑问。在我的项目中有 2 个与 sw 相关的文件:

放置在网站根目录中的“ sw.js ”将不会被缓存(通过缓存 API 和 Web 浏览器)。

我的服务人员管理所有静态文件和所有动态 url 页面的缓存。

有时我需要更新它,客户端必须检测到有更新并立即执行。

sw_main.js ” 是安装我的软件的脚本。此文件由 Cache API 缓存,因为我的应用程序必须离线工作。

在里面我们可以找到:

问题是:因为 sw_main.js 被缓存,如果我更改 SW_VERSION 然后在线部署 webapp,所有客户端都不会更新,因为看不到该文件中的更改。

管理软件更新过程的最佳方式是什么?

就像我现在一样,有 3 种方法可以触发 sw 更新:

  1. 推送和同步事件(但我没有实现这些)
  2. 仅在服务工作者 URL 已更改时才调用 .register() (但在我的情况下,这是不可能的,因为 sw_main.js 已缓存,因此我无法更改 SW url)
  3. 导航到范围内的页面(我认为我们遇到了与第 2 点相同的缓存问题)

我还读到:“如果您的服务工作者与浏览器已有的字节不同,则认为它已更新”。

那就是说如果我改变了sw.js的内容(也就是没有缓存),service worker会自动检测更新吗?

谢谢

0 投票
1 回答
5043 浏览

javascript - 来自缓存的 HTML 音频元素源

我正在构建一个用于离线播放一些音频文件的 Web 应用程序。我已经阅读并测试了Service Worker API 的缓存部分,我可以轻松地将所有音频文件添加到命名缓存中。<audio src='/audio/file.mp3'>但是,当我将 a 添加到 DOM 和它时,浏览器似乎没有使用它play(),即使该确切的 URL 已添加到缓存中。

在某种程度上,缓存不会自动使用是有道理的,因为这样命名缓存就没有任何意义了。

我正在使用 create-react-app,由于我没有弹出,我没有控制 Service Worker。不过,据我了解,不建议预先缓存较大的文件,因此我在 UI 中创建了一个函数,让用户决定何时缓存所有文件。

我的问题是:如何将缓存的音频文件放入音频元素中?

编辑:我认为这个问题应该可以从我的问题中理解,但被要求添加代码,所以这就是我尝试过的。

标记有一个音频元素和两个按钮。第一个按钮将 mp3 url 加载到缓存中,第二个按钮尝试两种不同的方式将其设置为音频元素的源:

  1. 从缓存的响应中插入 blob
  2. 将缓存的请求 url 设置为音频 src

当然,它们都不起作用,这就是我写这篇文章的原因。:)

我正在寻找

一种将 blob 添加为音频内容的方法

或者

另一种以编程方式强制浏览器保证缓存音频文件列表以供离线使用的方法

0 投票
0 回答
81 浏览

google-chrome-devtools - Service Worker 提供缓存文件的预期响应时间是多少?

我注意到根据 Chrome devTools Network 选项卡显示的小图像文件(60x60),服务工作者提供的缓存文件需要很Size=(from ServiceWorker)长时间Time=139ms

我的服务工作者中的 fetch 处理程序已记录此图像文件的缓存命中,因此我确定该文件是从缓存而不是从网络提供的。

chrome devTools中显示的Time值是错误的还是139ms在预期值的范围内?

0 投票
2 回答
3616 浏览

ios - 克服 iOS PWA 缓存的 50 MiB 限制

我们正在为 iOS 设备构建一个渐进式网络应用程序,并且我们知道 Safari 网络浏览器施加的 50 MiB 缓存限制。当我们知道如果我们包含所有静态资源、视频和图片等,我们的应用程序的服务工作人员可能需要缓存超过 50 MiB 的数据时,我们如何处理这个限制。我们的第一选择是即使在缓存之后也保持应用程序离线运行已满,如果这不可能,至少在用户离线工作时防止应用程序崩溃。

如果您给出一个我们也可以在其他 PWA 中实现的通用答案,那就太好了。

0 投票
1 回答
909 浏览

web - Service Worker 缓存的资产的生命周期是多久?

我读过的一些文章建议服务工作者(Web Cache API)缓存的项目永远存储在系统中。我遇到过这样一种情况,当长时间(〜> 2个月)后重新访问我的网站的用户自动驱逐一些缓存的资源时,我知道通过HTTP缓存缓存的资产会在一段时间后被浏览器删除。同样适用于服务人员吗?

如果是这种情况,那么浏览器如何决定它必须删除什么资产,有没有办法告诉浏览器如果它从缓存中删除某些东西,然后删除所有以相同缓存名称缓存的东西?

0 投票
0 回答
78 浏览

javascript - 如何撤消 navigator.storage.persist(() => {})

有没有办法让缓存存储盒恢复到best-effort一次制作persistent