Adds service worker

app.js

@@ -27,28 +27,41 @@ const listContainer = document.querySelector('#content-container');
 const notificationsContainer = document.querySelector('#notifications-container');
 const heading = document.querySelector('h1');
 
-// whenever the hash of the URL changes, we load the view for the new hash
-window.addEventListener('hashchange', evt => {
-  let category = window.location.hash.slice(1); // removes the leading '#'
+// we want our web app to work offline and load faster, so we try to install a service worker.
+if ('serviceWorker' in navigator) {
+  // this browser supports service workers!
+  navigator.serviceWorker.register('sw.js').then(initApp);
+} else {
+  // this browser doesn't support service workers, so we don't install one.
+  initApp();
+}
+
+// Functions
+/**
+* Initializes our single page app - sets up routing, etc.
+*/
+function initApp() {
+  // whenever the hash of the URL changes, we load the view for the new hash
+  window.addEventListener('hashchange', evt => {
+    let category = window.location.hash.slice(1); // removes the leading '#'
+    // if the category is empty, show the_keyword as the homepage.
+    if (category == '') category = 'the_keyword';
+    showStoriesForCategory(category);
+  });
+
+  // Load the content for the current hash
+  let category = window.location.hash.slice(1); // we remove the leading '#'
   // if the category is empty, show the_keyword as the homepage.
   if (category == '') category = 'the_keyword';
   showStoriesForCategory(category);
-});
-
-// Load the content for the current hash
-let category = window.location.hash.slice(1); // we remove the leading '#'
-// if the category is empty, show the_keyword as the homepage.
-if (category == '') category = 'the_keyword';
-showStoriesForCategory(category);
-
-// Load the Material Component code for the navigation drawer menu
-const menu = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
-// Make the menu button toggle the navigation menu
-document.getElementById('menuToggle').addEventListener('click', () => {
-  menu.open = !menu.open;
-});
 
-// Functions
+  // Load the Material Component code for the navigation drawer menu
+  const menu = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
+  // Make the menu button toggle the navigation menu
+  document.getElementById('menuToggle').addEventListener('click', () => {
+    menu.open = !menu.open;
+  });  
+}
 
 /**
  * Loads the articles for the given category,

sw.js

@@ -0,0 +1,40 @@
+/*
+    Copyright 2019 Google LLC
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+
+/**
+* @fileoverview The service worker to make our web app faster and work offline.
+* This file is irrelevant for the codelab. To learn more about what this file does, 
+* check out the codelab at https://codelabs.developers.google.com/codelabs/workbox-lab/#0
+*/
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
+
+if (workbox) {
+  // make sure to add the application files to the cache for offline usage & improved loading speed
+  workbox.precaching.precacheAndRoute([
+    '/styles.css',
+    '/app.js',
+    '/index.html'
+  ]);
+
+  // try loading JS from the network, fall back to cache
+  workbox.routing.registerRoute(/\.(js|css)$/, new workbox.strategies.NetworkFirst());
+  // use cached images & fonts, refresh in the background
+  workbox.routing.registerRoute(/\.(?:png|gif|jpg|jpeg|webp|svg|woff2)$/, new workbox.strategies.CacheFirst());
+  // use cached json, refresh in the background
+  workbox.routing.registerRoute(/\.json$/, new workbox.strategies.StaleWhileRevalidate());
+} else {
+  console.log(`Boo! Workbox didn't load 😬`);
+}