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

Question

我正在使用 Cache Storage构建渐进式 Web 应用程序 (PWA)。我需要一个自定义对象 put进入我的缓存，但缓存接受 Response对象作为参数。所以我的问题是如何正确创建 Response 对象，其中包含 JSON。我知道我可以使用其他缓存策略( 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);
});

Answer 1

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

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)