IndexedDBにapiレスポンスを保存

Question

私はオフラインでデータを格納する必要のあるWebアプリケーションを構築しています。そのために私はindexedDbを使用しています。 APIから受け取ったレスポンスをindexedDBに格納し、そのデータをWebアプリケーションに渡したいとします。

どうすれば同じことができますか？私は公式のドキュメントを通過しましたが、indexedDBにAPIレスポンスデータを渡す方法については言及していません。

Answer 1

私は応答をblobに変換してから、blobをindexeddbに格納しています。あなたは、私は、例えば、画像を保存して、特定の問題を抱えている後続の要求でのIndexedDBから

db.get(event.request.url).then((blobFound) => { 
     if (!blobFound) { 
      console.error(`error in retrieving from db: ${blobFound}`); 

      return fetch(event.request.clone()) 
      .then((response) => { 
       // only cache valid responses 
       if (!response) { 
       console.error(`received invalid response from fetch: ${responseTwo}`); 

       return resolve(response); 
       } 

       // insert response body in db 
       response.clone().blob().then(
       (blob) => { 
        console.info(`updating cache with: ${JSON.stringify(event.request.clone().url)}, then returning`); 
        db.set(
        event.request.url, 
        blob 
       ).then(
        (suc2) => console.log(`success in setting: ${suc2}`), 
        (err2) => console.error(`error in setting: ${err2}`) 
       ); 
       } 
      ); 

       return resolve(response); 
      }); 
     } 

     const contentType = consts.getBlobType(blobFound, event.request.url); 
     console.log('responding from cache', event.request.url, contentType); 
     // on this page https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch 
     const myHeaders = new Headers({ 
      "Content-Length": String(blobFound.size), 
      "Content-Type": contentType, 
      "X-Custom-Header": "ProcessThisImmediately", 
     }); 

     const init = { 
      'content-type': 'text/html; charset=utf-8', 
      'headers': myHeaders, 
      'status' : 200, 
      'statusText' : 'OKS', 
     }; 
     const response = new Response(blobFound, init); 

     return resolve(response); 
    }); 
    }));