#168 Service worker

app/app/Http/Controllers/HomeController.php

@@ -37,7 +37,13 @@ public function index(Request $request)
             'default_location' => BaseUser::getDefaultLocation(),
             'google_map_api_key' => config('app.google_map_api_key'),
             'turn_off_maps'      => config('app.turn_off_maps'),
-            'location_search_options' => $location_search_options
+            'location_search_options' => $location_search_options,
+            'firebase_api_key' => config('app.firebase_api_key'),
+            'firebase_auth_domain' => config('app.firebase_auth_domain'),
+            'firebase_database_url' => config('app.firebase_database_url'),
+            'firebase_project_id' => config('app.firebase_project_id'),
+            'firebase_storage_bucket' => config('app.firebase_storage_bucket'),
+            'firebase_messaging_sender_id' => config('app.firebase_messaging_sender_id')
             ]);
     }
 

app/app/Http/Controllers/PWAController.php

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

app/config/app.php

@@ -118,6 +118,16 @@
 
     'cipher' => 'AES-256-CBC',
 
+    /* Firebase keys
+    | Will be used for push notifications
+    */
+    'firebase_api_key' => env('FIREBASE_API_KEY', ''),
+    'firebase_auth_domain'=> env('FIREBASE_AUTH_DOMAIN', ''),
+    'firebase_database_url' => env('FIREBASE_DATABASE_URL, '),
+    'firebase_project_id' => env('FIREBASE_PROJECT_ID', ''),
+    'firebase_storage_bucket' => env('FIREBASE_STOREAGE_BUCKET', ''),
+    'firebase_messaging_sender_id' => env('FIREBASE_MESSAGING_SENDER_ID', ''),
+
     /*
     |--------------------------------------------------------------------------
     | Logging Configuration

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,13 @@
+var url= window.location.href;
+var pos = url.search('using_pwa');
+
+if (pos+1 && url[pos+8] && '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,78 @@
+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) {
+
+    if (e.request.url.indexOf('https://maps.googleapi.com') !== 0 ||
+     e.request.url.indexOf('http://maps.googleapis.com') !== 0) {
+        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)
+                                .catch(function(err) {
+                                    console.log('Post Request Made', err);
+                                });     
+                                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: "{{$firebase_api_key}}",
+	    authDomain: "{{$firebase_auth_domain}}",
+	    databaseURL: "{{$firebase_database_url}}",
+	    projectId: "{{$firebase_project_id}}",
+	    storageBucket: "{{$firebase_storage_bucket}}",
+	    messagingSenderId: "{{$firebase_messaging_sender_id}}"
+	  };
+	  firebase.initializeApp(config);
+	</script>
 @stop
 @section('content')
 <div class="home-page">