src

cachersw.js

@@ -0,0 +1,82 @@
+/*
+ *
+ 
+ A service worker is simply a file (it has no access to DOM):
+
+ 1. Here we add an install event listener to the service worker (using self), and then chain a ExtendableEvent.waitUntil() method onto the event — 
+ this ensures that the service worker will not install until the code inside waitUntil() has successfully occurred.
+ 2. Inside waitUntil() we use the caches.open() method to create a new cache called v1, which will be version 1 of our site resources cache. 
+ This returns a promise for a created cache; once resolved, we then call a function that calls addAll() on the created cache, 
+ which for its parameter takes an array of origin-relative URLs to all the resources you want to cache.
+ 3. If the promise is rejected, the install fails, and the worker won’t do anything. 
+ This is ok, as you can fix your code and then try again the next time registration occurs. 
+ 4.After a successful installation, the service worker activates. 
+ This doesn’t have much of a distinct use the first time your service worker is installed/activated, 
+ but it means more when the service worker is updated...
+
+ *
+ *
+ * */
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open('v1').then((cache) => {
+      /*
+			 The addAll() method of the Cache interface takes an array of URLs, retrieves them, and adds the resulting response objects to the given cache. 
+			 The request objects created during retrieval become keys to the stored response operations. 
+       */
+      return cache.addAll([
+        '/',
+        '/css/materialize.css',
+        '/index.html',
+        '/imgs/180295.jpg',
+        '/imgs/180343.jpg',
+        '/imgs/180401.jpg',
+        '/imgs/1920x1200-Linux Widescreen705729403.jpg',
+        '/imgs/2551508.jpg'
+      ]);
+    
+    }));
+});
+
+
+/**
+ *
+ *
+ A fetch event fires every time any resource controlled by a service worker is fetched, which includes the documents inside the specified scope, 
+ and any resources referenced in those documents (for example if index.html makes a cross origin request to embed an image, that still goes through its service worker.)
+ You can attach a fetch event listener to the service worker, then call the respondWith() method on the event to hijack our HTTP responses and update them with your own magic.
+ 
+ *
+ *
+ */
+
+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 
+
+   */
+
+  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 ___');
+        });
+      });
+    }));
+})

css/font.css

@@ -0,0 +1,23 @@
+ /* fallback */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/font/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}

index.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Example - Service worker for caching images</title>
+    <link rel="stylesheet" type="text/css" href="/css/materialize.css"/>
+</head>
+<body>
+
+<!-- Div which will hold the Output -->
+<div id="main" class="container">
+  <h3>Service worker for caching image - Modified - Modified</h3>
+  <div class="row">
+    <div class="col s12 m4">
+      <img src="/imgs/180295.jpg" style="display:block;width:100%; height: auto; margin-bottom: 10px" /> 
+    </div>
+    <div class="col s12 m4">
+      <img src="/imgs/180343.jpg" style="display:block;width:100%; height: auto; margin-bottom: 10px" /> 
+    </div>
+    <div class="col s12 m4">
+      <img src="/imgs/180401.jpg" style="display:block;width:100%; height: auto; margin-bottom: 10px" /> 
+    </div>
+    <div class="col s12 m4">
+      <img src="/imgs/1920x1200-Linux Widescreen705729403.jpg" style="display:block;width:100%; height: auto; margin-bottom: 10px" /> 
+    </div>
+    <div class="col s12 m4">
+      <img src="/imgs/2551508.jpg" style="display:block;width:100%; height: auto; margin-bottom: 10px" /> 
+    </div>
+  </div>
+</div>
+
+<script type="text/javascript">
+  /***
+   ***
+   ***
+  First of all: we need to register service worker
+
+  - The first line performs a feature detection test to make sure service workers are supported before trying to register one
+    NOTE:
+      A single service worker can control many pages. Each time a page within your scope is loaded, 
+      the service worker is installed against that page and operates on it. 
+      Bear in mind therefore that you need to be careful with global variables in the service worker script: each page doesn’t get its own unique worker.
+
+  - "scope" param specifies the subset of content controlled by worker.
+  ***
+  ***
+  */
+
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('./cachersw.js', {scope: '/'})
+    .then((reg) => {
+      // registration worked
+      console.log('Registration succeeded. Scope is ' + reg.scope);
+    }).catch((error) => {
+      // registration failed
+      console.log('Registration failed with ' + error);
+    });
+  }
+</script>
+</body>
+</html>

js/cachersw.js

@@ -0,0 +1,80 @@
+/*
+ *
+ 
+ A service worker is simply a file (it has no access to DOM):
+
+ 1. Here we add an install event listener to the service worker (using self), and then chain a ExtendableEvent.waitUntil() method onto the event — 
+ this ensures that the service worker will not install until the code inside waitUntil() has successfully occurred.
+ 2. Inside waitUntil() we use the caches.open() method to create a new cache called v1, which will be version 1 of our site resources cache. 
+ This returns a promise for a created cache; once resolved, we then call a function that calls addAll() on the created cache, 
+ which for its parameter takes an array of origin-relative URLs to all the resources you want to cache.
+ 3. If the promise is rejected, the install fails, and the worker won’t do anything. 
+ This is ok, as you can fix your code and then try again the next time registration occurs. 
+ 4.After a successful installation, the service worker activates. 
+ This doesn’t have much of a distinct use the first time your service worker is installed/activated, 
+ but it means more when the service worker is updated...
+
+ *
+ *
+ * */
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open('v1').then((cache) => {
+      /*
+			 The addAll() method of the Cache interface takes an array of URLs, retrieves them, and adds the resulting response objects to the given cache. 
+			 The request objects created during retrieval become keys to the stored response operations. 
+       */
+      return cache.addAll([
+        '/imgs/180295.jpg',
+        '/imgs/180343.jpg',
+        '/imgs/180401.jpg',
+        '/imgs/1920x1200-Linux Widescreen705729403.jpg',
+        '/imgs/2551508.jpg'
+      ]);
+    
+    }));
+});
+
+
+/**
+ *
+ *
+ A fetch event fires every time any resource controlled by a service worker is fetched, which includes the documents inside the specified scope, 
+ and any resources referenced in those documents (for example if index.html makes a cross origin request to embed an image, that still goes through its service worker.)
+ You can attach a fetch event listener to the service worker, then call the respondWith() method on the event to hijack our HTTP responses and update them with your own magic.
+ 
+ *
+ *
+ */
+
+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 
+
+   */
+
+
+  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 ___');
+        });
+      });
+    }));
+})