Add a sw-precache example (vercel#2237)

chrisdwheatley · timneutkens · commit 87c4e98fa533 · 2017-06-12T19:24:57.000+02:00
* add sw-precache example

* remove npm run dev command
diff --git a/examples/with-sw-precache/README.md b/examples/with-sw-precache/README.md
@@ -0,0 +1,32 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-sw-precache)
+
+# sw-precache example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-sw-precache
+cd with-sw-precache
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run build
+npm start
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+You'll often want your Service Worker to be registered at the root level to give it access to your whole application.
+
+This example shows how this can be achieved alongside [sw-precache](https://github.com/GoogleChrome/sw-precache) (via [the webpack plugin](https://github.com/goldhand/sw-precache-webpack-plugin)).
diff --git a/examples/with-sw-precache/next.config.js b/examples/with-sw-precache/next.config.js
@@ -0,0 +1,20 @@
+const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
+
+module.exports = {
+  webpack: (config) => {
+    config.plugins.push(
+      new SWPrecacheWebpackPlugin({
+        verbose: true,
+        staticFileGlobsIgnorePatterns: [/\.next\//],
+        runtimeCaching: [
+          {
+            handler: 'networkFirst',
+            urlPattern: /^https?.*/
+          }
+        ]
+      })
+    )
+
+    return config
+  }
+}
diff --git a/examples/with-sw-precache/package.json b/examples/with-sw-precache/package.json
@@ -0,0 +1,12 @@
+{
+  "scripts": {
+    "build": "next build",
+    "start": "NODE_ENV=production node server.js"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "sw-precache-webpack-plugin": "^0.11.3"
+  }
+}
diff --git a/examples/with-sw-precache/pages/index.js b/examples/with-sw-precache/pages/index.js
@@ -0,0 +1,21 @@
+import React from 'react'
+
+export default class extends React.PureComponent {
+  componentDidMount() {
+    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 (
+      <p>Check the console for the Service Worker registration status.</p>
+    )
+  }
+}
diff --git a/examples/with-sw-precache/server.js b/examples/with-sw-precache/server.js
@@ -0,0 +1,27 @@
+const { createServer } = require('http')
+const { join } = require('path')
+const { parse } = require('url')
+const next = require('next')
+
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+const handle = app.getRequestHandler()
+
+app.prepare()
+.then(() => {
+  createServer((req, res) => {
+    const parsedUrl = parse(req.url, true)
+    const { pathname } = parsedUrl
+
+    if (pathname === '/service-worker.js') {
+      const filePath = join(__dirname, '.next', pathname)
+      app.serveStatic(req, res, filePath)
+    } else {
+      handle(req, res, parsedUrl)
+    }
+  })
+  .listen(3000, (err) => {
+    if (err) throw err
+    console.log('> Ready on http://localhost:3000')
+  })
+})
