node.js - how Caching handlebars.js using service worker -
i want ask service workers. made web application , try implement services worker. i'm using .hbs views layout , when cache static files can't cache .hbs, .css , .js files.
this how save file:
public/ css/ style.css js/ app.js manifest.json service-worker.js views/ home.hbs partial/ header.hbs
when deploy app fails cache home.hbs, style.css , app.js file; cant access web offline.
what should fix it?
this 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 register", err); }) } var = 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(); }); };
this 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 event until promise resolved e.waituntil( // open cache caches.open(cachename).then(function(cache) { // add default files cache console.log('[serviceworker] caching cachefiles'); return cache.addall(cachefiles); }) ); // end e.waituntil }); self.addeventlistener('activate', function(e) { console.log('[serviceworker] activated'); e.waituntil( // cache keys (cachename) caches.keys().then(function(cachenames) { return promise.all(cachenames.map(function(thiscachename) { // if cached item saved under previous cachename if (thiscachename !== cachename) { // delete cached file console.log('[serviceworker] removing cached files cache - ', thiscachename); return caches.delete(thiscachename); } })); }) ); // end e.waituntil }); self.addeventlistener('fetch', function(e) { console.log('[serviceworker] fetch', e.request.url); // e.respondwidth responds fetch event e.respondwith( // check in cache request being made caches.match(e.request) .then(function(response) { // if request in cache if ( response ) { console.log("[serviceworker] found in cache", e.request.url, response); // return cached version return response; } // if request not in cache, fetch , cache var requestclone = e.request.clone(); fetch(requestclone) .then(function(response) { if ( !response ) { console.log("[serviceworker] no response fetch ") return response; } var responseclone = response.clone(); // open cache caches.open(cachename).then(function(cache) { // put fetched response in cache cache.put(e.request, responseclone); console.log('[serviceworker] new data cached', e.request.url); // return 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 });
what should can cache .hbs file? thank you
try way, without dots, , add skipwaiting function installer. (btw caching "styles.css" while in tree read "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(); }) ); }); ... ...
Comments
Post a Comment