node.js - 如何使用服務人員緩存handlebars.js

Question

我想詢問服務人員。我製作了一個Web應用程序並嘗試實現服務工作者。我爲我的視圖佈局使用.hbs，當我緩存靜態文件時，我無法緩存.hbs，.css和.js文件。

這是我如何保存我的文件：

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

當我部署我的應用程序失敗緩存home.hbs，style.css文件和我的app.js文件;我無法離線訪問我的網頁。

我應該怎麼做才能解決它？

這是我的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(); 

    }); }; 

這是我的服務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 
}); 

我應該怎麼做，所以我可以緩存.hbs文件？ 謝謝

Answer 1

試試這種方式，沒有點，並添加一個skipWaiting函數的安裝程序。 （順便說一句，而在樹中我讀「style.css文件」正在緩存「styles.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(); 
    }) 
); 
}); 
... 
...