Używam usługi pracownika do pamięci podręcznej kilku plików statycznych, ale próbuję również przycisnąć moje dane JSON w IndideedDB. Więc za każdym razem, gdy moja aplikacja uzyskuje dostęp do adresu URL "www.someurl.com/api/my-items" zostanie przechwycony przez pracownika usług, a zamiast tego niestandardowa odpowiedź jest zwracana z moimi danymi indekseddb.

Używam obietnicy IDB Stąd https://github.com/jakearchid/idb

Do tej pory wymyśliłem następujący kod. Jak rozumiem, muszę przechwycić zdarzenie pobierania i zwrócić niestandardową odpowiedź.

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!" })
              })

          )

        } 

        //...
    }
 })

Próbuję zrozumieć, czy istnieje czysty sposób na pisanie tego kodu, bez konkretnie tworzenia odpowiedzi za pomocą "Nowa odpowiedź ()". Jestem pewien, że jest koncepcja oparta na obietnicy, której nie rozumiem.

3
Roman Gherta 3 czerwiec 2018, 19:45

3 odpowiedzi

Najlepsza odpowiedź

Natknąłem się na tę samą sytuację, w której nie jest niestandardowa odpowiedź, muszę przechwycić połączenie HTTP i wyglądać tego samego adresu URL w indeksowanej db, gdzie już pchnąłem adres URL i odpowiedź i czytałem stamtąd i dawać jako odpowiedź

W przypadku zdarzenia Pracownika Service Fetch, wdrożyłem pierwsze podejście Sieć>, co oznacza, że najpierw będzie poszukiwać usługi, jeśli wystąpił błąd, a następnie odczytaj z indeksowanego DB i zwróć odpowiedź.

fetch (event.request). połów (funkcja (wynik) {});

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

Metoda odczytywania z indeksowanego dB i zwróć odpowiedź

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

}

Mam nadzieję, że to ci pomoże.

1
Aji 11 wrzesień 2018, 14:14

Polecam API pamięci podręcznej API za pomocą biblioteki pomocniczej jak workbox, aby ułatwić rzeczy. Ta odpowiedź omówiono przy użyciu klas pomocniczych indeksDB -idb VS Cache API - Pole robocze.

Skrzynka jest tworzeniem zespołu Chrome, który prowadzi implementację PWA. Również workbox jest ich nowym ponownym napisanym libem (z WWE-Preseche) z latami uczenia się. Warte rozważenia.

1
Anand 4 czerwiec 2018, 14:15

OP poprosił o "czysty sposób napisania tego kodu, bez konkretnie tworzenia odpowiedzi za pomocą new Response()". W wcześniejszym komentarzu powiedziałem: "IMO, nie ma" Response musi być wyraźnie stworzony ". Myśleliśmy o tym problemie i po wdrożeniu następującego podejścia w aplikacji, wierzę, że jest "czystszy sposób pisania tego kodu".

Google's href="https://developers.google.com/Web/ilt/pwa/live-data-in-the-he-service-worker#storing_data_with_indexeddb" rel="noFollow NefErrer"> "Dane na żywo w pracowniku serwisowym " stany" Po utworzeniu bazy danych IndeksedDB dane można następnie odczytać lokalnie z IndeksedDB , zamiast wykonywania żądań sieci do bazy danych Backend "(mój nacisk) - lub, przez przedłużenie, raczej niż podejmowanie prośby do pracownika usługowego, gdzie, jak stwierdzono w Google " Wysokowydajny pracownik serwisowy Ładowanie "", trafisz do wprowadzenia małego opóźnienia trafionego, gdy zostanie wykonane żądanie sieciowe. Nadcześnia jest zaangażowana w uruchamianie pracownika usług, jeśli jeszcze nie działa, i jest Również nad głową w przekazaniu odpowiedzi od pracownika usług do klienta, który złożył wniosek. ".

Tak więc, gdy dane JSON są przechowywane w indeksowaniu przeglądarki, aplikacja może uzyskać dostęp do niego bezpośrednio , bez konieczności dostępu do aplikacji do URL "www.someurl.com/api/my- Przedmioty ", hamując tym samym narzut mediacji pracownika serwisowego. (Zakładamy, że znajduje się sieć początkowa fetch z tego adresu, aby załadować dane JSON do indekseddb.)

Jeśli więc wyodrębnimy kod przetwarzania indeksedDB z respondWith() w obsłudze zdarzeń fetch, możemy użyć go, aby zastąpić fetch połączenia w samej aplikacji:

idb.open(idbName, 1).then((db) => {
    var tx = db.transaction([idbTableName], 'readonly');
    var store = tx.objectStore(idbTableName);
    return store.getAll();
})

Lub, aby użyć najnowszej implementacji JAKE Archibald} idb razem z async/await:

const db = await idb.openDB(idbName);
return await db.getAll(idbTableName);
0
Velojet 8 marzec 2020, 06:08