Travailleur de service Récupération

Question

J'utilise un technicien de maintenance pour travailler hors connexion. Donc, pour chaque requête d'extraction, je le stocke dans le cache.

Maintenant, Je voudrais que le technicien de service fasse une demande, et le stocker aussi pour la prochaine fois. le problème est lorsque j'utilise fetch(myUrl).then..., le Fetch Listener self.addEventListener('fetch', function(e)... dans le travailleur de service ne l'attrape pas.

Je ne voudrais pas dupliquer le code .. des idées?

La récupération de l'auditeur est:

self.addEventListener ('récupérer', 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(); 
      return 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 
        // returns the fresh response (not cached..) 
        return response; 

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


     }) // end caches.match(e.request) 
     .catch(function(e){ 
      // this is - if we still dont have this in the cache !!! 
      console.log("[ServiceWorker] ERROR WITH THIS MATCH !!!",e, arguments) 
     })// enf of caches.match 
); // end e.respondWith 

});

Answer 1

Depuis que je ne peux rien dire pour obtenir des détails spécifiques et votre code me semble juste, mes suppositions sont:

• travailleur service Vous n'est pas inscrit, ou en cours d'exécution. Vous pouvez vous assurer qu'il fonctionne en vérifiant l'onglet d'application de votre inspecteur. Il devrait ressembler à ce qui suit:

• Vous assumez Il ne fonctionne pas à cause des messages ne sont pas enregistrés à la console. Les techniciens de maintenance s'exécutent dans un environnement différent de votre page. Les messages sont donc consignés sur une console différente que vous pouvez vérifier en cliquant sur le bouton inspecter dans l'image ci-dessus.

Answer 2

Le cache alors la stratégie réseau est probablement ce que vous cherchez:

https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-then-network

var networkDataReceived = false; 

startSpinner(); 

// fetch fresh data 
var networkUpdate = fetch('/data.json').then(function(response) { 
    return response.json(); 
}).then(function(data) { 
    networkDataReceived = true; 
    updatePage(); 
}); 

// fetch cached data 
caches.match('/data.json').then(function(response) { 
    if (!response) throw Error("No data"); 
    return response.json(); 
}).then(function(data) { 
    // don't overwrite newer network data 
    if (!networkDataReceived) { 
    updatePage(data); 
    } 
}).catch(function() { 
    // we didn't get cached data, the network is our last hope: 
    return networkUpdate; 
}).catch(showErrorMessage).then(stopSpinner);