Caching 如何将数据添加到service worker中的IndexedDb中，这些数据将作为来自api的http响应

我在codeigniter和angular框架中有一个应用程序。它的所有数据都来自我们在codeigniter中创建的api。现在我正在尝试使这个应用程序成为pwa。到目前为止，静态文件和manifes.json的缓存工作正常，但当涉及到将这些数据存储在IndexedDb中并检索它们时，我不知道如何进行。到目前为止，我只找到了将静态json插入IndexedDb的示例，但我想知道如何将这些http响应存储在IndexedDb中，因此，当它在脱机模式下运行时，它会自动提供数据。而且，在每个页面中，都会出现多个http响应，因此它还应该为变量提供正确的数据

如果你对问题的任何部分不只是让我知道，我会尽量解释

---

提前感谢大家。

如果api的响应是JSON或类似类型的数据文件，那么您可以将JSON作为字符串存储在indexDB中，或者根据需要进行操作。下面是一个将JSON存储为字符串的示例

//JSONfile is the response from your api.
var JSONstring = JSON.stringify(JSONfile)

// Storing JSON as string in indexDB
var dbPromise = idb.open('JSON-db', 1, function (upgradeDB) {
  var keyValStore = upgradeDB.createObjectStore('JSONs')
  keyValStore.put(JSONstring, 'samples')
})
//provide better key name so that you can retrieve it easily from indexDB

另一种情况是，如果响应是某种多媒体，则可以将其转换为blob，然后将blob存储在indexDB中

return fetch(new Request(prefetchThisUrl, { mode: 'no-cors' }))
  .then((resp) => {
    resp.blob()
      .then((blob) => {
                  return db.set(prefetchThisUrl, blob);
      });
  });

然后，您可以在需要时从indexDB获取信息。为了更好地理解从indexDB存储和检索blob，您可以访问以下网站：

为了在您的页面上提供正确的数据，这不是问题，您只需要制定逻辑来响应indexDB的请求

dbPromise.then(function (db) {
 var tx = db.transaction('JSONs')
  var keyValStore = tx.objectStore('JSONs')
  return keyValStore.get('samples')
}).then(function (val) {
  var JSONobject = JSON.parse(val)}

---

很抱歉，您的回答与我的问题无关……我想知道如何将它们存储在IndexedDb中，然后取回它们。@MakSr我已根据您的需要编辑了我的答案，即使您仍然对答案不满意，您能否解释更多关于您的问题？它是否回答了您的问题……我正在服务人员中尝试这样做。您的答案将在脱机模式下工作。但是，对于每个响应数据，我都需要这样做，并且我在一个页面中有10-15个http请求。所以我在想，如果有任何数据将通过服务人员的帮助存储在IndexedDb中，就像我们进行静态缓存一样……但现在我认为这可能是不可能的。。所以你的解决方案可能对我有用。谢谢你，当使用HTTP而不是HTTPS时，浏览器不会将其视为完整的PWA。考虑使用HTTPS，除非有什么东西阻塞了你。我的意思是API响应，它在索引静态文件时被索引器DB中的服务人员保存。我正在使用https