service worked: scope only on imgs/

cachersw.js

@@ -25,9 +25,9 @@ self.addEventListener('install', (event) => {
 			 The request objects created during retrieval become keys to the stored response operations. 
        */
       return cache.addAll([
-        '/',
-        '/css/materialize.css',
-        '/index.html',
+        //'/',
+        //'/css/materialize.css',
+        //'/index.html',
         '/imgs/180295.jpg',
         '/imgs/180343.jpg',
         '/imgs/180401.jpg',
@@ -38,6 +38,34 @@ self.addEventListener('install', (event) => {
     }));
 });
 
+/*
+ *
+ *
+
+   NOTE: 
+     The clone is put in the cache, and the original response is returned to the browser to be given to the page that called it.
+     Cloning the response is necessary because request and response streams can only be read once.  
+     In order to return the response to the browser and put it in the cache we have to clone it. 
+     So the original gets returned to the browser and the clone gets sent to the cache.  They are each read once.
+
+
+     The only trouble we have now is that if the request doesn’t match anything in the cache, and the network is not available, our request will still fail. 
+     If you want provide a default fallback so that whatever happens, use the callback 
+
+     *
+     *
+     */
+
+self.fetch_and_cache = function (evreq) {
+  fetch(evreq).then((response) => {
+    return caches.open('v1').then((cache) => {
+      cache.put(evreq, request.clone());
+      return response
+    }).catch(() => {
+      console.log('___ here a callback ___');
+    });
+  });
+} 
 
 /**
  *
@@ -55,28 +83,13 @@ self.addEventListener('fetch', (event) => {
    *
    caches.match(event.request) allows us to match each resource requested from the network with the equivalent resource available in the cache, if there is a matching one available. The matching is done via URL and various headers, just like with normal HTTP requests.
    if there is no match we fetch the resource, and we put in cache object.
-   NOTE: 
-     The clone is put in the cache, and the original response is returned to the browser to be given to the page that called it.
-     Cloning the response is necessary because request and response streams can only be read once.  
-     In order to return the response to the browser and put it in the cache we have to clone it. 
-     So the original gets returned to the browser and the clone gets sent to the cache.  They are each read once.
-
-
-     The only trouble we have now is that if the request doesn’t match anything in the cache, and the network is not available, our request will still fail. 
-     If you want provide a default fallback so that whatever happens, use the callback 
 
    */
+  console.log('Handling fetch event for', event.request.url);
 
   event.respondWith(
     caches.match(event.request).then((response) => {
-      if (response) return response
-      fetch(event.request).then((response) => {
-        return caches.open('v1').then((cache) => {
-          cache.put(event.request, request.clone());
-          return response
-        }).catch(() => {
-          console.log('___ here a callback ___');
-        });
-      });
+      if (response !== 'undefined') return response
+      return self.fetch_and_cache(event.request);
     }));
 })

index.html

@@ -49,7 +49,7 @@
   */
 
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('./cachersw.js', {scope: '/'})
+    navigator.serviceWorker.register('./cachersw.js', {scope: '/imgs'})
     .then((reg) => {
       // registration worked
       console.log('Registration succeeded. Scope is ' + reg.scope);