Merge pull request #108 from nitrotap/harabushi-feature/pwa

Harabushi feature/pwa

client/public/index.html

@@ -30,5 +30,19 @@
     integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 </body>
-
+<script>
+  if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function() {
+      navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
+        console.log('serviceWorker registration successful', registration.scope);
+      }, function(err) {
+        console.log('serviceWorker registration failed', err);
+      }).catch(function(err) {
+        console.log(err);
+      });
+    });
+  } else {
+    console.log('Service Worker is not supported by browser.');
+  }
+</script>
 </html>

client/public/service-worker.js

@@ -0,0 +1,59 @@
+/* eslint-disable no-restricted-globals */
+const APP_PREFIX = 'mhc-';     
+const VERSION = 'version_01';
+const CACHE_NAME = APP_PREFIX + VERSION;
+const urlsToCache = [
+  '/',
+  '/index.html',
+  '/dashboard',
+  '/quizselect',
+  '/legal',
+];
+
+// Install a service worker
+self.addEventListener('install', event => {
+  // Perform install steps
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(function(cache) {
+        console.log('Opened cache');
+        return cache.addAll(urlsToCache);
+      })
+  );
+});
+
+// Cache and return requests
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    caches.match(event.request)
+      .then(function(response) {
+        // Cache hit - return response
+        if (response) {
+          return response;
+        }
+        return fetch(event.request);
+      }
+    )
+  );
+});
+
+// Update a service worker
+self.addEventListener('activate', event => {
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      let cacheKeeplist = keyList.filter(function(key) {
+        return key.indexOf(APP_PREFIX);
+      });
+      cacheKeeplist.push(CACHE_NAME);
+
+      return Promise.all(
+        keyList.map(function(key, i) {
+          if (cacheKeeplist.indexOf(key) === -1) {
+            console.log('deleting cache : ' + keyList[i]);
+            return caches.delete(keyList[i]);
+          }
+        })
+      );
+    })
+  );
+});

client/src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
+
 import './components/CSS/index.css';
 
 import App from './App';
@@ -20,3 +21,8 @@ root.render(
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://cra.link/PWA
+// serviceWorker.register();