Add manifest.json and cache static assets for offline use (#331) (#486)

* Add manifest.json

* cache static assets for offline use

* update cache

* add meta theme-color and change static files to be cache

* cache the files on network request

* caching on first run

Signed-off-by: tech4GT <varun.gupta1798@gmail.com>

* add a button to clear cache

* add styling to clear cache link

examples/demo.js

@@ -132,4 +132,40 @@ window.onload = function() {
       step.options.step.imgElement.src = reader.result;
     }
   });
+
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('sw.js', { scope: '/examples/' })
+      .then(function(registration) {
+        const installingWorker = registration.installing;
+        installingWorker.onstatechange = () => {
+          console.log(installingWorker)
+          if (installingWorker.state === 'installed') {
+            location.reload();
+          }
+        }
+        console.log('Registration successful, scope is:', registration.scope);
+      })
+      .catch(function(error) {
+        console.log('Service worker registration failed, error:', error);
+      });
+  }
+
+  if ('serviceWorker' in navigator) {
+        caches.keys().then(function(cacheNames) {
+          cacheNames.forEach(function(cacheName) {
+            $("#clear-cache").append(" " + cacheName);
+          });
+        });
+      }
+
+  $("#clear-cache").click(function() {
+      if ('serviceWorker' in navigator) {
+        caches.keys().then(function(cacheNames) {
+          cacheNames.forEach(function(cacheName) {
+            caches.delete(cacheName);
+          });
+        });
+      }
+  location.reload();
+  });
 };

examples/index.html

@@ -7,8 +7,9 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="content-type" content="text/html; charset=UTF8">
+  <meta name="theme-color" content="#428bca">
   <link rel="icon" sizes="192x192" href="../icons/ic_192.png">
-
+  <link rel="manifest" href="manifest.json">
 
   <title>Image Sequencer</title>
 
@@ -124,9 +125,15 @@
   </div>
     <button class="btn btn-primary btn-lg" name="save-sequence" id="save-seq">Save Sequence</button>
   </div>
+
   <form class="move-up" action="#up">
     <button><i class="fa fa-arrow-circle-o-up"></i></button>
   </form>
+  
+  <footer>
+    <hr style="margin:20px;"><center><a class="color:grey;" id="clear-cache">Clear offline cache</a></center>
+  </footer>
+
   <script type="text/javascript">
     $(function() {
       var sequencer;

examples/manifest.json

@@ -0,0 +1,21 @@
+{
+  "short_name": "IS",
+  "name": "Image Sequencer",
+  "icons": [
+    {
+      "src": "../icons/ic_192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "../icons/ic_512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/examples/#steps=",
+  "background_color": "#428bca",
+  "display": "standalone",
+  "scope": "/examples/",
+  "theme_color": "#428bca"
+}

examples/sw.js

@@ -0,0 +1,35 @@
+const staticCacheName = 'image-sequencer-static-v3';
+
+self.addEventListener('install', event => {
+  console.log('Attempting to install service worker');
+});
+
+self.addEventListener('activate', function(e) {
+  console.log('[ServiceWorker] Activate');
+  e.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.filter(function(cacheName){
+          return cacheName.startsWith('image-sequencer-') &&
+                 cacheName != staticCacheName;
+        }).map(function(cacheName){
+          return caches.delete(cacheName);
+        })
+      );
+    })
+  );      
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.open(staticCacheName).then(function(cache) {
+      return cache.match(event.request).then(function (response) {
+        return response || fetch(event.request).then(function(response) {
+          if(event.request.method == "GET")
+            cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});