Set up service worker and caching so app interface is viewable even when offline

Author: M4ttoF

app/public/js/push_notification.js

@@ -1,5 +1,3 @@
-from firebase import firebase;
-
 if ('serviceWorker' in navigator) {
 	navigator.serviceWorker
 	.register('./service-worker.js', { scope: './'})
@@ -9,4 +7,4 @@ if ('serviceWorker' in navigator) {
 	.catch(function(err) {
 		console.log("Service Worker Failed to Register", err);
 	})
-}
+}

app/public/js/service_worker_script.js

@@ -1,64 +1,76 @@
-  // Initialize Firebase
-  var config = {
-    apiKey: "AIzaSyBX6l4geba-CjXE_WlQwOX6pxCIrVl-tjk",
-    authDomain: "wise-bongo-209220.firebaseapp.com",
-    databaseURL: "https://wise-bongo-209220.firebaseio.com",
-    projectId: "wise-bongo-209220",
-    storageBucket: "wise-bongo-209220.appspot.com",
-    messagingSenderId: "926874022337"
-  };
-  firebase.initializeApp(config);
-export const inicializarFirebase = () => {
-  firebase.initializeApp({
-    messagingSenderId: '926874022337'
-  });
-navigator.serviceWorker
-    .register('/my-sw.js')
-    .then((registration) => {
-      firebase.messaging().useServiceWorker(registration);
-    });
-}
-
 var cacheName = 'v1';
-// A list of local resources we always want to be cached.
-var cacheFiles = [
-    '/',
-    //php
-   // 'app/public/index.php',
-    //blade   
-    //'app/resources/views/pages/home.blade.php',
-    //css
-    //'app/public/css/index.min.css',
-    //jquery
-    //'app/public/css/jquery/jquery-ui.min.js',
-    //'app/public/css/jquery/jquery-ui.js',
-    //javascript files
-    //'app/public/js/jquery-3.1.1.js',
-    //'app/public/js/utils.js',
-    //'home.js',
-    //'app/public/js/hover_text.js',
-    //'app/public/js/service_worker_script.js',
-    //assets
-    //'app/public/images/logo.svg',
-]
-self.addEventListener('install', function(e) {
-    console.log("[ServiceWorker] Installed");
+
+var cacheFiles = [];
+
+self.addEventListener('install', function(e) {   
     try {
         e.waitUntil(
             caches.open(cacheName).then(function(cache) {
-                console.log("[ServiceWorker] Caching cacheFiles");
                 return cache.addAll(cacheFiles);
             })
         )
     } catch(e) {
         console.log(e);
     }
+    
 })  
 
 self.addEventListener('activate', function(e) {
-    console.log("[ServiceWorker] Activated");
+    e.waitUntil(
+        caches.keys().then(function(cacheNames) {
+            return Promise.all(cacheNames.map(function(thisCacheName) {
+
+                if (thisCacheName !== cacheName) {
+                    return caches.delete(thisCacheName);
+                }
+            }));
+        })
+    );
+    e.waitUntil(
+
+        caches.keys().then(function(cacheNames) {
+            return Promise.all(cacheNames.map(function(thisCacheName) {
+
+                if (thisCacheName !== cacheName) {
+                    return caches.delete(thisCacheName);
+                }
+            }));
+        })
+    );
 })
 
 self.addEventListener('fetch',function(e) {
-    //console.log("[ServiceWorker] Fetching", e.request.url);
+    e.respondWith(
+
+        caches.match(e.request)
+
+
+            .then(function(response) {
+
+                if (response) {
+                    return response;
+                }
+
+                var requestClone = e.request.clone();
+                return fetch(requestClone)
+                    .then(function(response) {
+
+                        if (!response) {
+                            return response;
+                        }
+
+                        var responseClone = response.clone();
+                        caches.open(cacheName).then(function(cache) {
+                            cache.put(e.request, responseClone);
+                            return response;
+                        });
+
+                    })
+                    .catch(function(err) {
+                        console.log('[ServiceWorker] Error Fetching & Caching New Data', err);
+                    });
+
+
+            })
+    );
 })

app/public/service-worker.js

@@ -5,7 +5,6 @@
 	<script src="/js/home.js" type="text/javascript"></script>
 	<script src="/js/hover_text.js" type="text/javascript"></script>
 	<script src="/js/service_worker_script.js" type="text/javascript"></script>
-	<script src="/js/push_notification.js" type="text/javascript"></script>
 	<script type="text/javascript">
 		var default_location = {
 			'latitude': {{ $default_location['latitude'] }},
@@ -15,9 +14,11 @@
 	<script type="text/javascript" async defer
 		src="//maps.googleapis.com/maps/api/js?key={{ $google_map_api_key }}&amp;callback=initMap">
 	</script>
-
-	<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>
+	
+	<!-- Firebase App is always required and must be first -->
+	<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-app.js"></script>
 	<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-messaging.js"></script>
+
 	<script>
 	  // Initialize Firebase
 	  var config = {