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

我在用着缓存存储 https://developer.mozilla.org/en-US/docs/Web/API/Cache构建渐进式 Web 应用程序 (PWA)。我需要一个自定义对象put https://developer.mozilla.org/en-US/docs/Web/API/Cache/put进入我的缓存，但缓存接受Response https://developer.mozilla.org/en-US/docs/Web/API/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);
});

当然;如果这对您的网络应用程序有意义，则可以这样做。您可以在支持缓存存储 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)