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

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -