问题标签 [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 投票
0 回答
150 浏览

angular - 如何在 Angular 中实现离线表单?

我正在尝试在我的网站上实现一个 Angular 表单,用户将在离线时输入数据,当用户在线时它会自动保存在后端。

0 投票
1 回答
396 浏览

javascript - 使用 MVC 视图缓存 API

我有一个基本的 MVC 表单,我一直在尝试使用 Javascript 缓存 API 来缓存我所有的 css、js、html 文件,这样当用户(该领域的人)没有可靠的访问权限时,他们仍然可以使用我的 web形式。显然,我也在使用 IndexedDB 和服务工作者来检查连接并在连接不可用时在本地保存,在连接可用时同步。

我已经阅读了一些教程,在处理缓存实际的物理文件(css、html、js)时,一切似乎都很简单。MVC 很奇怪,因为您正在路由。我创建了 basix Index、Create、Edit、Details 视图。当我创建要缓存的 URL 数组时,例如

var urlsToCache = [

] .. 除了细节和编辑之外的所有内容都会缓存。索引和创建缓存很好。我实际上对后两个缓存感到惊讶,因为它们不是物理文件。我假设 Details 和 Edit 不会缓存,因为没有查询字符串参数它们就无法工作。

是否可以缓存这两个视图?或者有人知道 NuGet 上有什么可以解决这种情况的吗?

0 投票
0 回答
322 浏览

javascript - html5本地缓存存储的浏览器图像缓存问题

我正在使用 htlm5“缓存存储/缓存 API”来存储一些大型 svg 图像游戏资产,用于在线 html5 游戏。缓存 API 功能很好用。

当我需要对这些图像进行更新时,在我的 javascript 中,我可以通过更改缓存存储键名称/版本号来删除我的旧缓存存储项并用新的项替换它。我已经验证我的 javascript 删除了旧的存储项目(及其包含的 svgs)并用新的替换它,而无需用户干预。

问题是一些 svg 文件似乎也存储在常规浏览器缓存中,并且不会被存储在我的 html5 缓存存储中的新版本自动替换。我能够让浏览器显示其中一些图像的最新版本的唯一方法是使用开发工具手动清除浏览器缓存。

我需要能够让用户获得最新的图像,而无需他们做任何事情。

有没有办法告诉浏览器不缓存已经存储/缓存在 html5“缓存存储”中的图像/svgs?

或者

除了将版本号附加到我存储在缓存存储和我的网站中的每个单独文件之外,是否有 javascript 方法可以从常规浏览器缓存中清除 svg 图像?

0 投票
2 回答
76 浏览

javascript - 浏览器缓存 API 不适用于 cookie 身份验证服务

我正在尝试浏览器缓存 API 机制,但是要缓存的 api 正在使用 cookie 身份验证。并且收到“未授权 401”错误消息。当我从 cache.add(apiurl) 调用时,我怀疑应该为所有 api 请求发送的 http cookie 没有发送

0 投票
0 回答
1320 浏览

javascript - 无法解释的 LightHouse start_url 审核错误

我正在使用下面的 ServiceWorker 代码运行 PWA LightHouse 审计。审计报告失败:-

  • . 当前页面在离线时没有响应 200
  • . 离线时 start_url 不响应 200

PWA 被认为是可安装的。

我正在使用远程调试。

Chrome 网络选项卡显示有一次通过 ServiceWorker 进行访问,另一次通过 DiskCache 进行访问。

为什么它在缓存中时会进入网络/磁盘?

清单 start_url 应该匹配缓存中的内容并通过审核。

0 投票
1 回答
1759 浏览

javascript - 如何在 fetch catch 中返回离线文件的内容?

我有一个 SPA 应用程序并尝试使用服务人员实现对 PWA 的支持。我缓存了一个offline.html我想在任何网络错误时显示的文件。当我的 REST API 调用由于没有互联网而失败时,我无法让它按我的意愿工作。

每当 API 调用失败时,我想返回一个自定义Response对象,例如状态代码 599、简短的状态文本和缓存的 offline.html 文件的完整内容。

我一定错过了一些基本的承诺,但无法弄清楚。我想customResponsecaches.match()promisecustomResponse中返回 ,而是在 之后才返回console.log("poa: how to avoid getting here???");,这使得发起的 ajax 调用收到状态为 0 和 statusText“错误”的响应。我想得到我的自定义响应...

下面是调用代码的代码:

我应该如何重写我的fetchcatch以便我可以将我的 customResponse 返回给调用者?

0 投票
1 回答
1205 浏览

javascript - 在 IOS 的 Safari/Chrome 中无法使用 Cache-API,对吗?

问题

从 IOS 13.1 开始,我可以或不可以在 Safari 或 Chrome 的 IOS 上使用缓存 API 和服务工作者吗?

背景

我有一个网络应用程序,可以离线使用。

我用:

Chrome 开发工具截图

适用于 Windows/Android 上的 Chrome

按预期工作。

在IOS离线时不工作

但是,在 IOS(13.1+)上,如果您在离线时尝试刷新(在浏览器中单击刷新)一个 html 文件,缓存似乎不起作用(您会收到未找到标准页面的错误)。这适用于 Chrome 和 Safari。

有关在 IOS Safari 上缓存 API 的令人困惑的信息

根据CanIUse,最新的 Safari 不支持缓存 API,这可以解释这种行为。我无法找到有关 Chrome for IOS 对缓存的支持的信息,但我猜它不受支持,如果不是在 Safari 中。

我发现有几个 消息来源说 IOS Safari 支持缓存 API,所以我很困惑。

再次提问

从 IOS 13.1 开始,我可以或不可以在 Safari 或 Chrome 的 IOS 上使用缓存 API 和服务工作者吗?

我故意不包含任何代码示例,因为问题很笼统,并且取决于 IOS Safari/Chrome 是否支持该功能。如果可以使用缓存 api,但我以某种方式在代码中错误地实现了它,那就是另一个特定的帖子。

0 投票
0 回答
176 浏览

download - PWA:让用户下载内容以供离线使用

我正在为博物馆参观者开发一个应用程序,该应用程序显示有关某些展览对象的多媒体信息。一个例子可能是达芬奇博览会的蒙娜丽莎的信息页面。

该应用程序实现为 PWA 以启用离线使用。目前我正在使用工作箱来预缓存应用程序外壳。对 REST 资源的 GET 请求也会被缓存。这允许用户在离线后重新加载蒙娜丽莎页面,但应用程序在之前未加载的页面上失败。

一个解决方案是将所有内容与应用程序外壳一起预先缓存。但是,用户不感兴趣的展览也会被下载。相反,用户应该能够下载他选择的“展示包”。

现在,我想知道如何实现我的“下载展览”按钮:

  • 利用工作箱的路由请求 [1] 在后台缓存和获取所有资源
  • 使用 Cache API 手动缓存 GET 请求
  • 引入一个镜像在线数据库的本地数据库。单击“下载”时,用相应的 GET 响应填充它

你会推荐工作箱、缓存 API 还是数据库方法?或者有没有我忽略的标准解决方案?

[1] https://developers.google.com/web/tools/workbox/guides/route-requests

0 投票
1 回答
201 浏览

javascript - Map.get() 在异步函数中返回未定义

我想获取缓存 API 中存在的所有不同缓存的列表以及每个缓存有多少资产。即使我已经设法返回带有信息的 Map 对象,但在调用 Map.get(cacheName) 时我得到了未定义。

我已经看到,一旦页面加载完毕,如果我手动运行“cacheInfo = getCacheInfo()”,那么 cacheInfo.get() 就会起作用。

0 投票
1 回答
41 浏览

angular - 构建 PWA 项目

我将 PWA 添加到 Angular 中的应用程序中

我建立了一个生产项目

当我运行应用程序(在服务器上)时,PWA 不起作用

缓存存储为空

有什么问题?

在此处输入图像描述

dist/(生产)

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述