node.js - Caching handlebars.js using service worker

Question

I want to ask about service workers. I made a web application and try to implement services worker. I'm using .hbs for my views layout and when I cache static files I can't cache the .hbs , .css and .js files.

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

When I deploy my app it fails to cache the home.hbs , style.css and my app.js file; I cant access my web offline.

What should I do to fix it?

This is my 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();

  });  };

This is my service worker:

var cacheName = 'v1'; var cacheFiles = [    './login',   './css/styles.css',    './js/app.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 });

What should I do so I can cache the .hbs file?

Answer 1

I think you should call the .hbs the same way you would call them on your app router.

If you have in your router :

router.get('/home', (req, res) => {
    res.render('home');
});

then in your service worker you can cache it like:

var filesToCache = [
'/home',
'css/style.css',
'js/app.js'
];

No dot before js, and you mispelled 'style'. Hope that helps someone

Answer 2

Your service worker code is really bad. I hope there is a typo, but the cache.addAll() funciton is commented out!

Anyway, I will give this a try...

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