node.js - comment Caching handlebars.js utilisant le travailleur de service

Question

Je veux poser des questions sur les travailleurs de service. 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.

Voici comment j'enregistrer mon fichier:

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

Quand je déploie mon application, il ne parvient pas à mettre en cache la home.hbs, style.css et mon fichier 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(); 

    }); }; 

c'est mon service-worker.js

var cacheName = 'v1'; 
var cacheFiles = [ 
    './', 
    './home', 
    './login', 
'./welcome', 
'./register', 
'./css/styles.css', 
'./js/app.js', 
'./images/fb-logo.png', 
'./images/g-logo.png', 
'./images/t-logo.png', 
'./images/logofix.png', 
'./images/icon192.png', 
'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js', 
'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', 
'https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700', 
'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.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? merci

Answer 1

Essayez de cette façon, sans les points, et ajoutez une fonction skipWaiting à l'installateur. (BTW vous caching « styles.css », tandis que dans l'arbre je lis « style.css »)

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