node.js - wie Caching lenkel.js mit Service-Arbeiter

Question

Ich möchte über Service-Mitarbeiter fragen. Ich habe eine Webanwendung erstellt und versucht, Service Worker zu implementieren. Ich benutze .hbs für meine Ansichten Layout und wenn ich statische Dateien zwischenspeichern kann ich nicht die .hbs, .css und .js Dateien zwischenspeichern.

das ist, wie ich meine Datei zu speichern:

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

Wenn ich meine Anwendung bereitstellen es nicht die home.hbs, style.css und meine app.js Datei zwischenzuspeichern; Ich kann nicht offline auf mein Web zugreifen.

Was soll ich tun, um es zu beheben?

Das ist mein 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(); 

    }); }; 

das ist mein 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 
}); 

Was kann ich tun, damit ich die .hbs Cache-Datei? danke

Answer 1

Versuchen Sie diesen Weg, ohne die Punkte, und fügen Sie dem Installer eine skipWaiting-Funktion hinzu. (BTW Sie das Caching "styles.css", während im Baum I "style.css" lesen)

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