Перехватить событие выборки и вернуть данные indexedDB - PullRequest
Новая
       51

Перехватить событие выборки и вернуть данные indexedDB

0 голосов
/ 03 июня 2018

Я использую сервис-работник для кэширования нескольких статических файлов, но я также пытаюсь кэшировать мои данные json в indexedDB.Чтобы каждый раз, когда мое приложение получало доступ к URL-адресу «www.someurl.com/api/my-items», оно перехватывалось сервисным работником, и вместо этого возвращался пользовательский ответ с моими данными indexedDB.

Я используюотсюда idb, основанный на обещаниях https://github.com/jakearchibald/idb

До сих пор я придумал следующий код.Как я понимаю, мне нужно перехватить событие fetch и вернуть пользовательский ответ. 

importScripts('idb.js');
var pageCache = 'v1';
var idbName = 'data';
var idbTableName = 'idbtable';

var cacheFiles = [
'../js/',
'../css/file1.css',
'../css/fle2.css'
];

//Install and Activate events
 //...

//Fetch Event
self.addEventListener('fetch', (event) => {
var requestUrl = new URL(event.request.url);

    if (requestUrl.origin !== location.origin) {
        //...

        if(event.request.url.endsWith('/api/my-items')){
          event.respondWith(

              idb.open(idbName, 1).then((db) => {
                  var tx = db.transaction([idbTableName], 'readonly');
                  var store = tx.objectStore(idbTableName);
                  return store.getAll();
              }).then(function(items) {
                  return new Response(JSON.stringify(items),  { "status" : 200 , "statusText" : "MyCustomResponse!" })
              })

          )

        } 

        //...
    }
 })

Я пытаюсь понять, есть ли более чистый способ написания этого кода, без специального создания ответа с "новымОтклик()".Я уверен, что есть концепция, основанная на обещаниях, которую я не совсем понимаю.

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Я столкнулся с той же ситуацией, когда это не пользовательский ответ, мне нужно перехватить вызов Http и посмотреть тот же URL в Indexed db, где я уже нажал URL и ответ и прочитал оттуда и дал в качестве ответа

В событии выборки работника службы я реализовал сетевой первый подход , который означает, что он сначала будет искать службу, если возникнет какая-либо ошибка, затем прочитает ее из индексированной базы данных и вернет ответ.

fetch (event.request). catch (function (result) {}); 

  self.addEventListener('fetch', function (event) {
     if (event.request.url.includes('[yourservicecallName]')) {
                event.respondWith(
                    fetch(event.request).catch(function (result) {
                       return readtheDatafromIndexedDb('firstDB', 'firstStore', event.request.url).then(function(response)
                        {
                            return response;
                        });
                    })
                );
            }
  });

метод для чтения из проиндексированногодБ и вернуть ответ 

function readtheDatafromIndexedDb(dbName, storeName, key) {
   return new Promise((resolve, reject) => {
    var openRequest = indexedDB.open(dbName, 2);
    openRequest.onupgradeneeded = function (e) {
        let db = request.result;
        if (!db.objectStore.contains(storeName)) {
            db.createObjectStore(storeName, { autoIncrement: true });
        }
    }
    openRequest.onsuccess = function (e) {
        console.log("Success!");
        db = e.target.result;
        var transaction = db.transaction([storeName], "readwrite");
        var store = transaction.objectStore(storeName);
        var request = store.get(key);
        request.onerror = function () {
            console.log("Error");
            reject("unexpected error happened");
        }
        request.onsuccess = function (e) {
            console.log("return the respose from db");
            //JSON.parse(request.result)
            resolve(new Response( request.result, { headers: { 'content-type':'text/plain' } } ));
        }
    }
    openRequest.onerror = function (e) {
        console.log("Error");
        console.dir(e);
    }
   });

}

надеюсь, это поможет вам.

0 голосов
/ 04 июня 2018

Я бы порекомендовал Cache Storage API с использованием вспомогательной библиотеки, такой как Workbox, чтобы упростить задачу. В этом ответе SO обсуждается использование вспомогательных классов IndexDB -idb против API кеша - рабочий блок.

Workbox - это команда Chrome, которая руководит реализацией PWA.Также WorkBox - это их новая переписанная библиотека (из sw-precache) с многолетним обучением.Стоит учесть.

...