add sw-precache plugin, register service worker

Author: matthiaskern

package.json

@@ -78,6 +78,7 @@
     "mockdate": "^2.0.2",
     "nodemon": "^1.12.0",
     "react-test-renderer": "^15.6.1",
+    "sw-precache-webpack-plugin": "^0.11.4",
     "webpack": "^3.5.5",
     "webpack-dev-server": "^2.7.1"
   }

src/helpers/registerServiceWorker.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export default (ComposedComponent) => {
+  return class RegisterServiceWorker extends React.Component {
+    static displayName = `RegisterServiceWorker(${ComposedComponent.displayName})`
+
+
+    async componentDidMount() {
+      if (process.env.NODE_ENV === 'production') {
+        if ('serviceWorker' in navigator) {
+          navigator.serviceWorker
+            .register('/service-worker.js')
+            .then(registration => {
+              console.log('service worker registration successful');
+            })
+            .catch(err => {
+              console.warn('service worker registration failed');
+            });
+        }
+      }
+    }
+
+    render() {
+      return (
+        <ComposedComponent {...this.props} />
+      );
+    }
+  }
+}

src/next.config.js

@@ -1,3 +1,4 @@
+const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin");
 
 module.exports = {
   exportPathMap: function exportPathMap() {
@@ -33,23 +34,25 @@ module.exports = {
       //     '/p/481': { page: '/post', query: { id: '481' } },
     };
   },
-  // webpack: (config, { dev }) => {
-  //   // Perform customizations to webpack config
-  //   if (!dev) {
-  //     config.module.rules.push({
-  //       test: /\.(css|ico|gif)$/,
-  //       use: [
-  //         {
-  //           loader: 'file-loader',
-  //           options: {
-  //             outputPath: 'static/',
-  //           },
-  //         },
-  //       ],
-  //     });
-  //   }
+  webpack: (config, { dev }) => {
+    if (dev) {
+      return config;
+    }
 
-  //   // Important: return the modified config
-  //   return config;
-  // },
+    config.plugins.push(
+      new SWPrecacheWebpackPlugin({
+        minify: true,
+        verbose: true,
+        staticFileGlobsIgnorePatterns: [/\.next\//],
+        runtimeCaching: [
+          {
+            handler: 'networkFirst',
+            urlPattern: /^https?.*/
+          }
+        ]
+      })
+    );
+
+    return config;
+  }
 };

src/pages/index.js

@@ -6,6 +6,7 @@ import Main from '../layouts/Main';
 import NewsFeed from '../components/presentational/NewsFeed';
 import NewsFeedApolloHOC from '../components/container/NewsFeedWithApolloRenderer';
 import withData from '../helpers/withData';
+import registerServiceWorker from '../helpers/registerServiceWorker';
 
 const POSTS_PER_PAGE = 30;
 
@@ -45,7 +46,7 @@ const TopNewsFeed = graphql(query, {
   }),
 })(NewsFeedApolloHOC);
 
-export default withData((props) => {
+export default withData(registerServiceWorker((props) => {
   const pageNumber = (props.url.query && +props.url.query.p) || 0;
   return (
     <Main currentURL={props.url.pathname}>
@@ -57,4 +58,4 @@ export default withData((props) => {
       />
     </Main>
   );
-});
+}));

src/server.js

@@ -1,3 +1,4 @@
+import path from 'path';
 import dotenv from 'dotenv/config';
 import express from 'express';
 import cookieParser from 'cookie-parser';
@@ -148,6 +149,11 @@ app.prepare()
       app.render(req, res, actualPage);
     });
 
+    server.get('/service-worker.js', (req, res) => {
+      const swPath = path.join(__dirname, '.next', '/service-worker.js');
+      app.serveStatic(req, res, swPath);
+    })
+
     server.get('*', (req, res) => handle(req, res));
 
     /* END EXPRESS ROUTES */