Service-workers bloque backbonejs?

Question

J'ai construit une application web en utilisant Backbone.js et il a beaucoup d'appels à un service RESTful et cela fonctionne comme un charme.

J'ai essayé d'ajouter un ServiceWorker pour mettre en cache tous les appels précédents afin qu'ils soient disponibles hors ligne.

Ce que je reçois est en fait que les appels que je fais pour la première fois, meurt avec cette erreur:

Failed to load resource: net::ERR_FAILED

Cependant la page reload, je reçois ses données mises en cache

Mon service worker chercher:

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

---

modifier: Je ne pense pas qu'il y ait besoin d'un ny Backbone.js code d'application web. J'utilise la méthode fetch des modèles et des collections de Backbone.js. appels comme https://jsonplaceholder.typicode.com/posts/1 et https://jsonplaceholder.typicode.com/posts/2

nouvelle lecture affiche cette erreur lors de la première fois. après avoir rafraîchi la page, j'ai cette information sans demander. tout de la cache. et toute autre demande que je ne l'ai pas encore, reste erreur

Answer 1

Le seul problème que je vois est que lorsque la demande est pas dans le cache, alors vous faites une fetch, mais vous ne retour la résultat de ce fetch au gestionnaire then. Vous devez ajouter un return afin que vous ayez:

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

Aucune des données fournies par les déclarations return dans votre gestionnaire then pour le fetch va se transférer la chaîne autrement.

---

Je vois aussi que vous ne retournez pas la promesse fournie par caches.open(cacheName).then.... Ce peut être bien si vous voulez découpler enregistrer une réponse dans le cache de retourner un résultat dans la chaîne, mais au moins, je mettrais un commentaire en disant que c'est ce que je fais ici plutôt que de le laisser à le lecteur de déterminer si une déclaration return est manquant par accident, ou il a été fait exprès.

Answer 2

Je l'ai résolu après avoir cherché plus. Backbone.js mon point de vue dans l'application Web utilisée pour faire:

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

alors que mon travailleur de service du retour d'Promises.

je devais changer mes quelques codes mon application Web vues à quelque chose comme ceci:

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

plus ou moins ...