added swprecache

Author: Terrycoco

Diff for: README.md

@@ -51,7 +51,6 @@ my-app/
   .babelrc
   .gitignore
   manifest.json
-  my-service-worker.js
   next.config.js
   postcss.config.js
   routes.js
@@ -174,5 +173,5 @@ Any time that you want to "age" the redux store to make sure that these values w
 I don't like using relative paths if I don't have to (I hate trying to remember ../../..)!  So I set up in the .babelrc file at the root all the aliases for different folders.  If you add a folder to your project, add it in there too.
 
 ## Service Worker
-I set up a service worker at root for PWA support.  Add any url you want to cache locally in that file.  Be sure to customize the manifest.json file at the root with your project specifics.
+Using webpack's SWPrecache Plugin, I set up a service worker at root for PWA support.  It is automatically registered on every page load through the Layout component.  Be sure to customize the manifest.json file at the root with your project specifics.
 

Diff for: actions/storageActions.js

@@ -31,7 +31,7 @@ export function syncStorage() {
           STORAGE.setStore(store)
           .then(() => {
             dispatch(setUpdated(ts)); //so times will match
-            console.log('storage set');
+            console.log('storage updated from store');
             return resolve();
           })
           .catch(err => {
@@ -44,7 +44,7 @@ export function syncStorage() {
            store.storage.updated = store.app.updated;
            STORAGE.setStore(store)
            .then(() => {
-            console.log('storage set');
+             console.log('storage updated from store');
             resolve();
           })
            .catch(err => {
@@ -56,13 +56,19 @@ export function syncStorage() {
               storage.app.updated = storage.storage.updated;
               console.log('storage later than store');
               dispatch(setWholeStore(storage));
+               console.log('store updated from storage');
               resolve();
         }
-        else {
-          reject('There was a storage error');
+        else if (store.app.updated === storage.storage.updated) {
+          console.log('storage is in sync');
+          resolve();
         }
 
       })
+      .catch(err => {
+        console.error('storage err: ', err);
+        reject(err.message);
+      });
     });
   }
 }

Diff for: components/Layout/index.js

@@ -20,13 +20,13 @@ class Page extends Component {
   }
 
   componentWillMount() {
+  }
+
+  componentDidMount() {
     if (process.env.NODE_ENV ==='production') {
       registerSW();
     }
     this.props.initStorage();
-  }
-
-  componentDidMount() {
     this.props.syncStorage();
     this.bound_onResize();
     window.addEventListener('resize', this.bound_onResize);

Diff for: my-service-worker.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const glob = require('glob');
-
+const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 
 module.exports = {
   webpack: (config, { dev }) => {
@@ -33,53 +33,22 @@ module.exports = {
       }
     );
 
-    // config.plugins.push(
-    //   new SWPrecacheWebpackPlugin({
-    //     cacheId: 'my-project-name',
-    //     filename: 'my-project-service-worker.js',
-    //     verbose: true,
-    //     mergeStaticsConfig: true,
-    //     staticFileGlobsIgnorePatterns: [/\.next\//],
-    //     runtimeCaching: [
-    //       {
-    //         handler: 'networkFirst',
-    //         urlPattern: /^https?.*/
-    //       }
-    //     ]
-    //   })
-    // );
-
-    /**
-     * Install and Update our Service worker
-     * on our main entry file :)
-     * Reason: https://github.com/ooade/NextSimpleStarter/issues/32
-     */
-    // const oldEntry = config.entry
-
-    // config.entry = () =>
-    //   oldEntry().then(entry => {
-    //     entry['main.js'].push(path.resolve('service-worker'))
-    //     return entry
-    //   })
+    config.plugins.push(
+      new SWPrecacheWebpackPlugin({
+        verbose: true,
+        staticFileGlobsIgnorePatterns: [/\.next\//],
+        runtimeCaching: [
+          {
+            handler: 'networkFirst',
+            urlPattern: /^https?.*/
+          }
+        ]
+      })
+    )
 
-    // /* Enable only in Production */
-    // if (!dev) {
-    //   // Service Worker
-    //   config.plugins.push(
-    //     new SWPrecacheWebpackPlugin({
-    //       verbose: true,
-    //       staticFileGlobsIgnorePatterns: [/\.next\//],
-    //       runtimeCaching: [
-    //         {
-    //           handler: 'nextworkFirst',
-    //           urlPattern: /^https?.*/
-    //         }
 
-    //       ]
-    //     })
-    //   )
-    // }
 
+ 
     return config
   }
 }

Diff for: next.config.js

@@ -1,17 +1,23 @@
+
 export default async function registerSW() {
-  if ('serviceWorker' in navigator) {
-    try {
-      const registration = await navigator.serviceWorker.getRegistration('/');
-      if (!registration) {
-        await navigator.serviceWorker.register('/my-service-worker.js', {
-          scope: '/'
-        });
-
-        console.log(`Registration successful`);
-      }
 
-    } catch (e) {
-      console.warn(`Registration failed: ${e.message}`);
+    if (navigator && 'serviceWorker' in navigator) {
+      try {
+        const registration = await navigator.serviceWorker.getRegistration('/');
+        if (!registration) {
+          await navigator.serviceWorker.register('/service-worker.js', {
+            scope: '/'
+          });
+
+          console.log(`Registration successful`);
+        }
+
+      } catch (e) {
+        console.warn(`Registration failed: ${e.message}`);
+      }
     }
-  }
-}
+
+}
+
+
+