node.js – 如何caching使用服务工作者的handlebars.js
我想问一下服务人员。 我做了一个Web应用程序，并试图实现服务人员。 我为我的视图布局使用.hbs，当我caching静态文件时，我无法caching.hbs，.css和.js文件。
这是我如何保存我的文件：
public/ css/ style.css js/ app.js manifest.json service-worker.js views/ home.hbs partial/ header.hbs 当我部署我的应用程序时，它无法cachinghome.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(); }); };
这是我的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 });
我应该怎么做才能caching.hbs文件？ 谢谢
尝试这种方式，不要点，并添加一个skipWaiting函数的安装程序。 （顺便说一下，你正在caching“styles.css”，而在树中我读“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(); }) ); }); ... ...