Fichiers statiques pré-antémémoire utilisant Service Worker

Question

Je tente de pré-mettre en cache certains de mes fichiers shell statiques d'application à l'aide de service worker. Je ne peux pas utiliser 'sw-appcache' car je n'utilise aucun système de build. Cependant, j'ai essayé d'utiliser 'sw-toolbox' mais je ne suis pas capable de l'utiliser pour la pré-mise en cache.

Voici ce que je fais dans mon service worker JS:

self.addEventListener('install', function(event) { 
    event.waitUntil(
    caches.open('gdvs-static').then(function(cache) { 
     var precache_urls = [ 
      '/', 
      '/?webapp=true', 
      '/css/gv.min.css', 
      '/js/gv.min.js' 
     ]; 

     return cache.addAll(precache_urls); 
    }); 
); 
}); 

J'ai aussi essayé ceci:

importScripts('/path/to/sw-toolbox.js'); 

self.addEventListener('install', function(event) { 
    var precache_urls = [ 
     '/', 
     '/?webapp=true', 
     '/css/gv.min.css', 
     '/js/gv.min.js' 
    ]; 

    toolbox.precache(precache_urls); 
}); 

Voici l'URL de mon application: https://guidedverses-webapp-staging.herokuapp.com/ est ici le URL de mon fichier de service worker: https://guidedverses-webapp-staging.herokuapp.com/gdvs-sw.js

Qu'est-ce qui me manque?

Answer 1

Silly moi. J'ai oublié d'ajouter le gestionnaire d'extraction dans mon agent de service. Je pensais que cela fonctionne comme appchache et renvoie automatiquement les données en cache lorsque correspond à l'URL du cache. J'ai sous-estimé le pouvoir de Service Worker. Le code suivant a fait l'affaire pour moi.

this.addEventListener('fetch', function(event) { 
    console.log(event.request.url); 

    event.respondWith(
    caches.match(event.request).then(function(response) { 
     return response || fetch(event.request); 
    }) 
); 
});