Как добавить данные в IndexedDb в сервисный работник, которые приходят как HTTP-ответ от API - PullRequest
Новая
       43

Как добавить данные в IndexedDb в сервисный работник, которые приходят как HTTP-ответ от API

0 голосов
/ 22 января 2019

У меня есть приложение в codeigniter и угловых рамках. Все его данные поступают из API, которые мы создали в codeigniter. Теперь я пытаюсь сделать это приложение PWA. до сих пор работает кэширование статического файла и manif.json, но когда дело доходит до хранения этих данных в IndexedDb и их извлечения, я не совсем понимаю, как это сделать. До сих пор я нашел только примеры со статическим json, вставляемым в IndexedDb, но я хочу знать, как хранить эти http-ответы в indexedDb, чтобы при переходе в автономный режим они автоматически предоставляли данные. Также на каждой странице есть более одного http-ответа, поэтому он также должен предоставлять правильные данные для переменных ..

Если у вас возникнет какая-либо часть вопроса, чем просто дайте мне знать, я постараюсь объяснить лучше.

И заранее всем спасибо.

1 Ответ

0 голосов
/ 22 января 2019

Если ответ от 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

OtherВ случае, если ответ является своего рода мультимедиа, вы можете преобразовать его в BLOB-объект и затем сохранить BLOB-объект в indexDB. 

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

Затем вы можете получить информацию из indexDB, когда это необходимо. Для хорошего понимания хранения иИзвлекая BLOB-объект из indexDB, вы можете посетить этот сайт: 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)}
...