Improve sw updating

Once sw update has installed and activated, clicking to another page will cause a hard refresh
labzero · May 18, 2018 · 10b247a · 10b247a
1 parent 78ee02b
commit 10b247a
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -92,6 +92,10 @@ node build/server.js
 
 You can modify `tools/deploy.js` as needed to work with your deployment strategy.
 
+## Service Worker
+
+To run the service worker locally, follow the above steps to run the production server. After testing the service worker, be sure to unregister the service worker in the browser (or close all local Lunch tabs) to avoid issues when testing on the development server.
+
 ## Testing
 
 ### Unit tests

diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -1,7 +1,7 @@
 {
   "short_name": "Lunch",
   "name": "Lunch",
-  "description": "An app for groups to decide on nearby lunch options.",
+  "description": "A simple lunch voting app for you and your team. Search nearby restaurants, add them to your list, vote for as many as you like, and decide on today’s pick!",
   "icons": [
     {
       "src": "icon.png",

diff --git a/src/components/Html.js b/src/components/Html.js
@@ -93,7 +93,7 @@ class Html extends Component {
         <body>
           <div id="app" dangerouslySetInnerHTML={{ __html: children }} />
           <script dangerouslySetInnerHTML={{ __html: `window.App=${serialize(app)}` }} />
-          <script dangerouslySetInnerHTML={{ __html: `if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/service-worker.js'); }); }` }} />
+          {!module.hot && <script dangerouslySetInnerHTML={{ __html: `if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/service-worker.js').then(function(registration) {registration.addEventListener('updatefound', () => {window.swUpdate = true; }); }); }); }` }} />}
           {apikey && <script src={`https://maps.googleapis.com/maps/api/js?key=${apikey}&libraries=places&v=3`} />}
           {scripts.map(script => <script key={script} src={script} />)}
         </body>

diff --git a/src/components/Link/Link.js b/src/components/Link/Link.js
@@ -44,7 +44,12 @@ class Link extends React.Component {
     }
 
     event.preventDefault();
-    history.push(this.props.to);
+
+    if (window.swUpdate) {
+      window.location = this.props.to;
+    } else {
+      history.push(this.props.to);
+    }
   };
 
   render() {

diff --git a/src/service-worker.js b/src/service-worker.js
@@ -1,4 +1,8 @@
-/* eslint-disable no-undef, no-restricted-globals */
+/* global workbox */
+/* eslint-disable no-restricted-globals */
+
+// eslint-disable-next-line no-underscore-dangle
+workbox.precaching.precacheAndRoute(self.__precacheManifest || []);
 
 // Cache the index page
 workbox.routing.registerRoute(
@@ -13,9 +17,6 @@ workbox.routing.registerRoute(
     }),
 );
 
-// eslint-disable-next-line no-underscore-dangle
-workbox.precaching.precacheAndRoute(self.__precacheManifest || []);
-
 // eslint-disable-next-line no-unused-vars
 self.addEventListener('install', event => {
     // Activate new service worker as soon as it's installed