代码之家  ›  专栏  ›  技术社区  ›  Mak Sr

如何在ServiceWorker中向IndexedDb添加数据,这些数据将作为来自api的http响应

  •  1
  • Mak Sr  · 技术社区  · 7 年前

    我有一个在编码器点火器和角度框架的应用。它的所有数据都来自我们在codeigniter中创建的api。现在我试着让这个应用程序成为一个pwa。到目前为止,静态文件和manifes.json的缓存是有效的,但是当涉及到将这些数据存储在IndexedDb中并检索它们时,我很困惑如何去做。到目前为止,我只找到了将静态json插入IndexedDb的示例,但我想知道如何将这些http响应存储在IndexedDb中,这样当它处于脱机模式时,它会自动提供数据。而且在每个页面中都会有多个http响应,所以它也应该为变量提供正确的数据。。

    如果你有什么问题不告诉我,我会尽量解释清楚。

    提前谢谢大家。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Punit Jain    7 年前

    如果api的响应是JSON或类似的数据文件,那么可以将JSON作为字符串存储在indexDB中,或者根据需要进行操作。

    //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
    

    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/

    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)}