Магазин api response в IndexedDB

Question

Я создаю веб-приложение, где мне нужно хранить данные в автономном режиме. Для этого я использую indexedDb. Я хочу сохранить ответ, полученный от API, в indexedDB, а затем передать эти данные в веб-приложение.

Как достичь того же? Я прошел официальные Документы, но не упоминается, как передать данные ответа api в indexedDB.

Answer 1

Я преобразовываю ответ в blob, а затем сохраняю blob в indexeddb. Смотрите полную страница here:

return fetch(new Request(prefetchThisUrl, { mode: 'no-cors' })) 
     .then((resp) => { 
     resp.blob() 
      .then((blob) => { 
      console.log(`blob is: ${blob.size}, ${blob.type}`); 

      return db.set(prefetchThisUrl, blob); 
      }); 
     }); 

Вы можете извлечь его из индексированных на последующих запросах

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