node.js - Caching handlebars.js utilisant l'agent de service

Question

Je souhaite poser des questions sur les techniciens de maintenance. J'ai fait une application web et j'essaie de mettre en place un service worker. J'utilise .hbs pour la disposition de mes vues et lorsque je cache des fichiers statiques, je ne peux pas mettre en cache les fichiers .hbs, .css et .js.

• public/
  • css/
    • style.css
  • js/
    • app.js
  • manifest.json
  • service-worker.js
• views/
  • home.hbs
  • partial/
    • header.hbs * footer.hbs

Quand je mon application, il déploie ne parvient pas à mettre en cache la home.hbs, style.css et mon dossier app.js; Je ne peux pas accéder à mon site Web hors ligne.

Que dois-je faire pour le réparer?

Ceci est mon app.js:

if ('serviceWorker' in navigator) { 

    navigator.serviceWorker 
    .register('./service-worker.js', { scope: './service-worker.js' }) 
    .then(function(registration) { 
     console.log("Service Worker Registered"); 
    }) 
    .catch(function(err) { 
     console.log("Service Worker Failed to Register", err); 
    }) 

} 

var get = function(url) { return new Promise(function(resolve, reject) { 

    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState === XMLHttpRequest.DONE) { 
      if (xhr.status === 200) { 
       var result = xhr.responseText 
       result = JSON.parse(result); 
       resolve(result); 
      } else { 
       reject(xhr); 
      } 
     } 
    }; 

    xhr.open("GET", url, true); 
    xhr.send(); 

    }); }; 

Ceci est mon agent de service:

var cacheName = 'v1'; var cacheFiles = [ './login', './css/styles.css', './js/app.js', ]; self.addEventListener('install', function(e) { 
    console.log('[ServiceWorker] Installed'); 

    // e.waitUntil Delays the event until the Promise is resolved 
    e.waitUntil(

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

      // Add all the default files to the cache   console.log('[ServiceWorker] Caching cacheFiles');   return cache.addAll(cacheFiles); 
     }) ); // end e.waitUntil }); 


self.addEventListener('activate', function(e) { 
    console.log('[ServiceWorker] Activated'); 

    e.waitUntil(

     // Get all the cache keys (cacheName)  caches.keys().then(function(cacheNames) {   return Promise.all(cacheNames.map(function(thisCacheName) { 

       // If a cached item is saved under a previous cacheName 
       if (thisCacheName !== cacheName) { 

        // Delete that cached file 
        console.log('[ServiceWorker] Removing Cached Files from Cache - ', thisCacheName); 
        return caches.delete(thisCacheName); 
       }   }));  }) ); // end e.waitUntil 

}); 


self.addEventListener('fetch', function(e) { console.log('[ServiceWorker] Fetch', e.request.url); 

    // 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 

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


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

Que dois-je faire si je peux mettre en cache le fichier .hbs?

Answer 1

Votre code de service est vraiment mauvais. J'espère qu'il y a une faute de frappe, mais la fonction cache.addAll() est commentée!

Quoi qu'il en soit, je vais essayer ce ...

var cacheName ='v2'; 
var filesToCache = [ 
'/', 
'public/css/style.css', 
'js/app.js', 
'views/home.hbs', 
]; 


self.addEventListener('install', function(e) { 
    console.log('[ServiceWorker] Install'); 
    e.waitUntil(
    caches.open(cacheName).then(function(cache) { 
     console.log('[ServiceWorker] Caching app shell'); 
     return cache.addAll(filesToCache); 
    }).then(function() { 
     return self.skipWaiting(); 
    }) 
); 
}); 
... 
...