使用缓存存储 API 保存自定义响应答案

【问题标题】：Saving a custom Response using the Cache Storage API使用缓存存储 API 保存自定义响应
【发布时间】：2016-11-15 20:39:03
【问题描述】：

我正在使用 Cache Storage 构建一个渐进式网络应用 (PWA)。我需要将一个自定义对象 put 放入我的缓存中，但缓存接受 Response 对象作为参数。所以我的问题是如何正确创建包含 JSON 的 Response 对象。我知道我可以使用其他缓存策略（ localStorage 或 IndexedDB ），但我对这种情况特别好奇 - 将自定义 JSON 作为请求保存在缓存中。

var myJSON = JSON.stringify({custom:"object"}); 
caches.open('cache-name').then(function (cache) {
  var response = new Response(); //My JSON should go into this Response obj. 
  return cache.put('cache-name', response);
});

【问题讨论】：

缓存存储用于服务工作者。你的 service worker 会拦截一个 fetch 请求，在它的缓存中找到一个匹配，如果找到就返回匹配。这就是缓存采用Response 对象的原因。您的问题似乎试图将缓存用作通用商店。真的吗？如果是这样，请不要使用缓存存储。否则，如果缓存确实是为服务工作者准备的，那么您的 JSON 响应应该在一个文件中（客户端会请求的文件），并且应该在安装服务工作者时将该文件添加到缓存中。
您好，感谢您的回复。我有点尝试将它用作通用存储 - 我的想法是修改 JSON 并将其放入存储中。如果用户没有互联网连接，Service Worker 将从存储中返回修改后的 JSON，并且应用程序将使用这个修改后的 JSON 进行渲染。现在我使用 localStorage 来保存修改和在线优先策略以使用服务人员进行缓存，它工作正常。但我开始怀疑，如何将缓存用作修改后的 URL 可寻址资源的通用存储。

标签： caching response fetch progressive-web-apps

【解决方案1】：

当然；如果它对您的网络应用程序有意义，则可以这样做。您可以在任何支持缓存存储 API 的地方执行此操作，即在服务工作者中或在受控页面的上下文中。这是一个基本示例：

const data = {
  1: 2,
  3: 4
};

const jsonResponse = new Response(JSON.stringify(data), {
  headers: {
    'content-type': 'application/json'
  }
});

caches.open('json-cache').then(cache => cache.put('/data.json', jsonResponse));

您可以手动确认您期望的数据正在通过记录类似的东西被存储

caches.match('/data.json').then(r => r.json()).then(console.log)

【讨论】：

这里的例子几乎相同developers.google.com/web/fundamentals/instant-and-offline/…