How to caching Handlebars.js file with service worker?

[Ridho Fiesta]

Hi guys i wanna ask about caching handlebars.js with service worker. 

this is how my tree look like

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

and this is my service-worker.

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

this is how my app.js file

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

  });  };

when i open my web app. the app.js, styles.css and my home.hbs isnt cache. the status is 304 Get Modified. what should i do to make it cached? thank you.