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

Author: M4ttoF

app/app/Http/Controllers/PWAController.php

@@ -1,7 +1,5 @@
 <?php namespace App\Http\Controllers;
-
 use Illuminate\Routing\Controller;
-
 class PWAController extends Controller
 {
     public function manifest()
@@ -34,4 +32,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/push_notification.js

@@ -0,0 +1,6 @@
+import firebase from 'firebase';
+export const initializeFirebase = () => {
+  firebase.initializeApp({
+    messagingSenderId: "your messagingSenderId"
+  });
+}

app/public/js/service_worker_script.js

@@ -0,0 +1,12 @@
+from firebase import firebase;
+
+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,64 @@
+  // 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");
+    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");
+})
+
+self.addEventListener('fetch',function(e) {
+    //console.log("[ServiceWorker] Fetching", e.request.url);
+})

app/resources/views/pages/home.blade.php

@@ -4,6 +4,8 @@
 	<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 src="/js/push_notification.js" type="text/javascript"></script>
 	<script type="text/javascript">
 		var default_location = {
 			'latitude': {{ $default_location['latitude'] }},
@@ -13,6 +15,21 @@
 	<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>
+	<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">