feat: Load images as web files

bug: Remove double serviceworker registration

index.html

@@ -6,7 +6,7 @@
   <meta name="theme-color" content="#333"/>
   <link rel="manifest" href="manifest.json">
   <link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
-  <link rel="stylesheet" href="css/styles.css">
+  <link rel="stylesheet" href="css/styles.css" type="text/css">
   <title>Restaurant Reviews</title>
 </head>
 
@@ -43,9 +43,9 @@ <h2>Filter Results</h2>
   <script type="application/javascript" charset="utf-8" src="js/dbhelper.js"></script>
   <script type="application/javascript" charset="utf-8" src="js/main.js"></script>
   <script type="application/javascript" charset="utf-8" src="node_modules/idb/lib/idb.js"></script>
+  <script type="application/javascript" charset="utf-8" src="js/sw_registration.js"></script>
   <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2kpSAbcvy_BTKHGBJ7gmGj9NIcQTdVhE&libraries=places&callback=initMap"></script>
 
-
   <footer id="footer">
     Copyright (c) 2017 <a href="/"><strong>Restaurant Reviews</strong></a> All Rights Reserved.
   </footer>

js/dbhelper.js

@@ -80,7 +80,6 @@ class DBHelper {
       if (error) {
         callback(error, null);
       } else {
-        console.log(restaurants);
         const restaurant = restaurants.find(r => r.id == id);
         if (restaurant) { // Got the restaurant
           callback(null, restaurant);
@@ -184,14 +183,19 @@ class DBHelper {
    * Restaurant page URL.
    */
   static urlForRestaurant(restaurant) {
+
     return (`./restaurant.html?id=${restaurant.id}`);
   }
 
   /**
    * Restaurant image URL.
    */
   static imageUrlForRestaurant(restaurant) {
-    return (`/img/${restaurant.photograph}.jpg`);
+    if (restaurant.photograph) {
+      return (`/img/${restaurant.photograph}.webp`);
+    } else {
+      return (`/img/default.webp`);
+    }
   }
 
   /**

js/main.js

@@ -4,45 +4,6 @@ let restaurants,
 var map
 var markers = []
 
-// if (!navigator.serviceWorker) return;
-navigator.serviceWorker.register('./sw.js').then(function(reg) {
-  console.log('Service worker registered.');
-
-  if (!navigator.serviceWorker.controller) {
-    return;
-  }
-
-  if (reg.waiting) {
-    navigator.serviceWorker.controller.postMessage({action: 'skipWaiting'});
-  }
-
-  if (reg.installing) {
-    navigator.serviceWorker.addEventListener('statechange', function() {
-      if (navigator.serviceWorker.controller.state == 'installed') {
-        navigator.serviceWorker.controller.postMessage({action: 'skipWaiting'});
-      }
-    });
-  }
-
-  reg.addEventListener('updatefound', function() {
-    navigator.serviceWorker.addEventListener('statechange', function() {
-      if (navigator.serviceWorker.controller.state == 'installed') {
-        navigator.serviceWorker.controller.postMessage({action: 'skipWaiting'});
-      }
-    });
-  });
-
-}).catch(function() {
-  console.log('Service worker registration failed');
-});  
-
-var refreshing;
-navigator.serviceWorker.addEventListener('controllerchange', function() {
-  if (refreshing) return;
-  window.location.reload();
-  refreshing = true;
-})
-
 /**
  * Fetch neighborhoods and cuisines as soon as the page is loaded.
  */

js/restaurant_info.js

@@ -1,45 +1,6 @@
 let restaurant;
 var map;
 
-// if (!navigator.serviceWorker) return;
-navigator.serviceWorker.register('./sw.js').then(function(reg) {
-  console.log('Service worker registered.');
-
-  if (!navigator.serviceWorker.controller) {
-    return;
-  }
-
-  if (reg.waiting) {
-    navigator.serviceWorker.controller.postMessage({action: 'skipWaiting'});
-  }
-
-  if (reg.installing) {
-    navigator.serviceWorker.addEventListener('statechange', function() {
-      if (navigator.serviceWorker.controller.state == 'installed') {
-        navigator.serviceWorker.controller.postMessage({action: 'skipWaiting'});
-      }
-    });
-  }
-
-  reg.addEventListener('updatefound', function() {
-    navigator.serviceWorker.addEventListener('statechange', function() {
-      if (navigator.serviceWorker.controller.state == 'installed') {
-        navigator.serviceWorker.controller.postMessage({action: 'skipWaiting'});
-      }
-    });
-  });
-
-}).catch(function() {
-  console.log('Service worker registration failed');
-});  
-
-var refreshing;
-navigator.serviceWorker.addEventListener('controllerchange', function() {
-  if (refreshing) return;
-  window.location.reload();
-  refreshing = true;
-})
-
 /**
  * Initialize Google map, called from HTML.
  */

js/sw_registration.js

@@ -0,0 +1,38 @@
+// if (!navigator.serviceWorker) return;
+navigator.serviceWorker.register('./sw.js').then(function (reg) {
+    console.log('Service worker registered.');
+
+    if (!navigator.serviceWorker.controller) {
+        return;
+    }
+
+    if (reg.waiting) {
+        navigator.serviceWorker.controller.postMessage({ action: 'skipWaiting' });
+    }
+
+    if (reg.installing) {
+        navigator.serviceWorker.addEventListener('statechange', function () {
+            if (navigator.serviceWorker.controller.state == 'installed') {
+                navigator.serviceWorker.controller.postMessage({ action: 'skipWaiting' });
+            }
+        });
+    }
+
+    reg.addEventListener('updatefound', function () {
+        navigator.serviceWorker.addEventListener('statechange', function () {
+            if (navigator.serviceWorker.controller.state == 'installed') {
+                navigator.serviceWorker.controller.postMessage({ action: 'skipWaiting' });
+            }
+        });
+    });
+
+}).catch(function () {
+    console.log('Service worker registration failed');
+});
+
+var refreshing;
+navigator.serviceWorker.addEventListener('controllerchange', function () {
+    if (refreshing) return;
+    window.location.reload();
+    refreshing = true;
+})

restaurant.html

@@ -66,6 +66,8 @@ <h2 id="restaurant-name"></h2>
   <script type="text/javascript" src="js/restaurant_info.js"></script>
   <!-- IndexedDB Promised -->
   <script type="application/javascript" charset="utf-8" src="node_modules/idb/lib/idb.js"></script>
+  <!-- ServiceWorker Registration -->
+  <script type="application/javascript" charset="utf-8" src="js/sw_registration.js"></script>
   <!-- Google Maps -->
   <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2kpSAbcvy_BTKHGBJ7gmGj9NIcQTdVhE&libraries=places&callback=initMap"></script>
   <!-- End scripts -->