Service-Arbeiter blockiert Backbonejs?

Question

Ich habe eine Web-App mit Backbone.js gebaut und es hat viele Anrufe zu einem RESTful Service und es funktioniert wie ein Charme.

Ich habe versucht, einen ServiceWorker hinzuzufügen, um alle vorherigen Anrufe zwischenzuspeichern, damit sie offline verfügbar sind.

Was ich eigentlich, dass die Anrufe ich zum ersten Mal tun, mit diesem Fehler sterben:

Failed to load resource: net::ERR_FAILED

jedoch auf Seite neu laden, erhalte ich es Daten im Cache gespeichert

Mein Service Arbeiter holen:

self.addEventListener('fetch', function(e) { 
// e.respondWidth Responds to the fetch event 
e.respondWith(

    // Check in cache for the request being made 
    caches.match(e.request) 
     .then(function(response) { 

      // If the request is in the cache 
      if (response) { 
       console.log("[ServiceWorker] Found in Cache", e.request.url, response); 
       // Return the cached version 
       return response; 
      } 

      // If the request is NOT in the cache, fetch and cache 

      var requestClone = e.request.clone(); 
      fetch(requestClone) 
       .then(function(response) { 

        if (!response) { 
         console.log("[ServiceWorker] No response from fetch ") 
         return response; 
        } 

        var responseClone = response.clone(); 

        // Open the cache 
        caches.open(cacheName).then(function(cache) { 

         // Put the fetched response in the cache 
         cache.put(e.request, responseClone); 
         console.log('[ServiceWorker] New Data Cached', e.request.url); 

         // Return the response 
         return response; 

        }); // end caches.open 
        console.log("Response is.. ?", response) 
        return response; 

       }) 
       .catch(function(err) { 
        console.log('[ServiceWorker] Error Fetching & Caching New Data', err); 
       }); 


     }) // end caches.match(e.request) 
); // end e.respondWith 
}); 

---

edit: ich glaube nicht, dass es einen Bedarf für eine ist ny Backbone.js Web-App-Code. Ich verwende die fetch Methode von Backbone.js Modellen und Sammlungen. Anrufe wie https://jsonplaceholder.typicode.com/posts/1 und https://jsonplaceholder.typicode.com/posts/2

werden wiederholen diese Fehler zeigen auf erstes Mal. nachdem ich die Seite aktualisiert habe, habe ich diese Information ohne zu fragen. alles aus dem Cache. und alle anderen Wunsch, dass ich immer noch nicht tun, bleiben Fehler

Answer 1

Das einzige Problem, das ich sehe, ist, dass, wenn die Anforderung nicht im Cache ist, dann tun Sie eine fetch, aber Sie nicht Rückkehr die Ergebnis davon fetch zum einschließenden then Handler. Sie benötigen ein return so hinzuzufügen, dass Sie haben:

return fetch(requestClone) 
      .then(function(response) { 

Keiner der von den return Aussagen in Ihrem then Handler zur Verfügung gestellten Daten für die fetch sonst die Kette übertragen bekommen werden.

---

Ich sehe auch, dass Sie nicht das Versprechen von caches.open(cacheName).then... zur Verfügung gestellt kehren. Diese kann in Ordnung sein, wenn Sie das Speichern einer Antwort im Cache von der Rückgabe eines Ergebnisses die Kette entkoppeln wollen, aber zumindest würde ich einen Kommentar sagen, dass das ist, was ich hier mache, anstatt es zu lassen der Leser, um herauszufinden, ob eine return Aussage versehentlich fehlt, oder es wurde absichtlich getan.

Answer 2

Ich löste es nach der Suche mehr. Backbone.js meiner Ansichten in dem Web-App zu tun verwendet:

this.listenTo(this.collection,"reset",this.render); 
this.listenTo(this.collection,"add",this.addCollectionItem); 
this.listenTo(this.collection,"error", this.errorRender); 

während meines Dienstarbeiter zurückkehrt Promises.

Ich musste meine einige Code meiner Web App Ansichten zu so etwas wie dies ändern:

this.collection.fetch({},{reset:true}) 
    .then(_.bind(this.render, this)) 
    .fail(_.bind(this.errorRender,this)) 

mehr oder weniger ...