4

I have a application in codeigniter and angular framework. All its data are coming from api's that are we have created in codeigniter . Now i am trying make this application a pwa . so far,caching of static file and manifes.json are working ,but when it comes to storing those data in IndexedDb and retriving them i am confused how to that.Till now i have find only examples with static json being inserted into IndexedDb ,but i want to know how to store those http response in indexedDb, so that when it goes in offline mode it automatically provide data.Also in every page have more than one http response is coming so it should also provide right data to variables..

If you any part of question than just let me know ,I will try better to explain.

And thank you all in advance.

Mak Sr
  • 303
  • 4
  • 14
  • 1
    Browsers wont treat it as a full PWA when HTTP is used and not HTTPS. Consider using HTTPS, unless something is blocking you to., – Anand Feb 13 '19 at 19:35
  • i meant api response to be saved by service worker in IndexedDb as it caches static file. i am using https – Mak Sr Feb 14 '19 at 10:29

1 Answers1

2

If the response from api is JSON or some similar sort of data file then you can store in indexDB as string or manipulate as you need.Here's an example of storing JSON as string.

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

Other case if response is some sort of multimedia then you can convert it into blob and then store the blob in indexDB.

return fetch(new Request(prefetchThisUrl, { mode: 'no-cors' }))
  .then((resp) => {
    resp.blob()
      .then((blob) => {
                  return db.set(prefetchThisUrl, blob);
      });
  });

You can then get the information from indexDB when required.For a good understanding of storing and retrieving blob from indexDB you can visit this site:https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/

And for providing right data on your page it's not an issue,you just need to make your logic to respond to request from indexDB.Here's how you can do it.

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)}
Punit Jain
  • 218
  • 1
  • 2
  • 9
  • sorry but your answer doesnot concern my problem...i want to know how to store them in IndexedDb and then fetch them.. – Mak Sr Jan 23 '19 at 07:22
  • @MakSr i have edited my answer as per your need,even still you are not satisfied with answer,can you explain more about your question – Punit Jain Jan 23 '19 at 08:56
  • Did it answer your question – Punit Jain Jan 23 '19 at 10:48
  • ...i am trying to do these in service worker. Well your answer will work in offline mode ..but to that i will need to that for every response data and i have like 10-15 http request in a page. So i was thinking if there is any data will be stored in IndexedDb by help of Service worker like we do static caching...But now i think that might not be possible .. So your solution may be work for me..and thanks again – Mak Sr Jan 23 '19 at 10:52