service worker

closes #1

next.config.js

@@ -0,0 +1,27 @@
+const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
+const { name } = require('./package.json');
+
+module.exports = {
+  webpack: config => {
+    if (process.env.NODE_ENV === 'production') {
+      config.plugins.push(
+        new SWPrecacheWebpackPlugin({
+          cacheId: name,
+          filename: 'sw.js',
+          minify: true,
+          staticFileGlobs: [
+            'static/**/*', // Precache all static files by default
+          ],
+          staticFileGlobsIgnorePatterns: [/\.next\//],
+          runtimeCaching: [
+            {
+              handler: 'networkFirst',
+              urlPattern: /^https?.*/,
+            },
+          ],
+        }),
+      );
+    }
+    return config;
+  },
+};

package.json

@@ -5,15 +5,16 @@
   "scripts": {
     "dev": "next",
     "build": "next build",
-    "start": "next start"
+    "start": "NODE_ENV=production node server.js"
   },
   "author": "Logan McAnsh <logan@mcan.sh> (https://mcan.sh)",
   "description": "",
   "dependencies": {
     "next": "^4.0.0-beta.6",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react-dom": "^16.0.0",
+    "sw-precache-webpack-plugin": "^0.11.4"
   },
   "devDependencies": {
     "eslint": "^4.8.0",

pages/index.js

@@ -12,6 +12,12 @@ class Index extends React.Component {
   }
 
   componentDidMount() {
+    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+      navigator.serviceWorker
+        .register('/sw.js')
+        .then(console.log('service worker registration successful'))
+        .catch(err => console.warn(err));
+    }
     const updateConnectionInfo = () => {
       if ('connection' in navigator) {
         const network = navigator.connection;

server.js

@@ -0,0 +1,26 @@
+const { createServer } = require('http');
+const { parse } = require('url');
+const next = require('next');
+const { join } = require('path');
+
+const dev = process.env.NODE_ENV !== 'production';
+const app = next({ dev });
+const PORT = process.env.PORT || 3000;
+const handle = app.getRequestHandler();
+
+app.prepare().then(() => {
+  createServer((req, res) => {
+    const parsedUrl = parse(req.url, true);
+    const { pathname } = parsedUrl;
+
+    if (pathname === '/sw.js') {
+      const filePath = join(__dirname, '.next', pathname);
+      app.serveStatic(req, res, filePath);
+    } else {
+      handle(req, res, parsedUrl);
+    }
+  }).listen(PORT, err => {
+    if (err) throw err;
+    console.log(`> Ready on http://localhost:${PORT}`);
+  });
+});