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

Question

我在 codeigniter 和角度框架中有一个应用程序。它的所有数据都来 self 们在 codeigniter 中创建的 api。现在我正在尝试使这个应用程序成为 pwa。到目前为止，静态文件和 manifes.json 的缓存正在工作，但是当谈到将这些数据存储在 IndexedDb 中并检索它们时，我很困惑该怎么做。直到现在我只找到将静态 json 插入 IndexedDb 的示例，但是我想知道如何将那些 http 响应存储在 indexedDb 中，以便当它进入离线模式时它会自动提供数据。此外，在每个页面中都有多个 http 响应即将到来，因此它还应该为变量提供正确的数据..

如果您有任何问题，而不仅仅是让我知道，我会尽力解释。

提前谢谢大家。

Answer 1

如果来自 api 的响应是 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，您可以访问此站点:https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/

为了在您的页面上提供正确的数据，这不是问题，您只需要让您的逻辑响应来自 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)}