Added service worker that caches pages and allows users to view them even when offline

Author: M4ttoF

app/app/Http/Controllers/PWAController.php

@@ -34,4 +34,4 @@ public function manifest()
             ]
         ]);
     }
-}
+}

app/package.json

@@ -15,5 +15,8 @@
     "lodash": "^4.16.2",
     "vue": "^2.0.1",
     "vue-resource": "^1.0.3"
+  },
+  "dependencies": {
+    "firebase": "^5.3.0"
   }
 }

app/public/js/firebase-messaging-sw.js

@@ -0,0 +1,6 @@
+importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
+importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');
+firebase.initializeApp({
+    messagingSenderId: "your messagingSenderId again"
+});
+const messaging = firebase.messaging();

app/public/js/service_worker_script.js

@@ -0,0 +1,10 @@
+if ('serviceWorker' in navigator) {
+	navigator.serviceWorker
+	.register('./service-worker.js', { scope: './'})
+	.then((registration)=> {
+      firebase.messaging().useServiceWorker(registration);
+    })
+	.catch(function(err) {
+		console.log("Service Worker Failed to Register", err);
+	})
+}

app/public/service-worker.js

@@ -0,0 +1,76 @@
+var cacheName = 'v1';
+
+var cacheFiles = [];
+
+self.addEventListener('install', function(e) {   
+    try {
+        e.waitUntil(
+            caches.open(cacheName).then(function(cache) {
+                return cache.addAll(cacheFiles);
+            })
+        )
+    } catch(e) {
+        console.log(e);
+    }
+    
+})  
+
+self.addEventListener('activate', function(e) {
+    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) {
+    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/resources/views/pages/home.blade.php

@@ -4,6 +4,7 @@
 	<script src="/js/utils.js" type="text/javascript"></script>
 	<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 type="text/javascript">
 		var default_location = {
 			'latitude': {{ $default_location['latitude'] }},
@@ -13,6 +14,23 @@
 	<script type="text/javascript" async defer
 		src="//maps.googleapis.com/maps/api/js?key={{ $google_map_api_key }}&amp;callback=initMap">
 	</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 = {
+	    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);
+	</script>
 @stop
 @section('content')
 <div class="home-page">