Question

我在codeigniter和angular框架中有一个应用程序。它的所有数据都来自我们在codeigniter中创建的api。现在，我正在尝试将此应用程序设为pwa。到目前为止，静态文件和manifes.json的缓存都可以正常工作，但是在将这些数据存储在IndexedDb中并进行检索时，我很困惑。到目前为止，我仅找到将static json插入IndexedDb中的示例，但是我想知道如何将这些http响应存储在indexedDb中，以便当它处于脱机模式时会自动提供数据。每个页面中都会有多个http响应，因此它还应该为变量提供正确的数据。 / p>

如果您有任何疑问而不只是让我知道，我会尽力进行解释。

在此先谢谢大家。

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，然后将其存储在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)}

如何将数据添加到Service Worker中的IndexedDb中，这些数据来自api的http响应

1 个答案: