Next offline (#9010)

* example: add next-offline example * fix: fix readme * fix: lint standard
vercel · Oct 10, 2019 · ec40d51 · ec40d51
1 parent c6609e5
commit ec40d51
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 0 deletions.
diff --git a/examples/with-next-offline/README.md b/examples/with-next-offline/README.md
@@ -0,0 +1,46 @@
+# next-offline example
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-next-offline with-next-offline-app
+# or
+yarn create next-app --example with-next-offline with-next-offline-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-next-offline
+cd with-next-offline
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+npm run export
+serve -s out
+# or
+yarn
+yarn dev
+yarn export
+serve -s out
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example demonstrates how to use the [next-offline plugin](https://github.com/hanford/next-offline) It includes manifest.json to install app via chrome
diff --git a/examples/with-next-offline/next.config.js b/examples/with-next-offline/next.config.js
@@ -0,0 +1,5 @@
+const withOffline = require('next-offline')
+
+const nextConfig = {}
+
+module.exports = withOffline(nextConfig)
diff --git a/examples/with-next-offline/package.json b/examples/with-next-offline/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "with-next-offline",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "export": "next build && next export"
+  },
+  "dependencies": {
+    "next": "latest",
+    "next-offline": "4.0.6",
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2",
+    "serve": "11.2.0"
+  }
+}
diff --git a/examples/with-next-offline/pages/_document.js b/examples/with-next-offline/pages/_document.js
@@ -0,0 +1,24 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+  static async getInitialProps (ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+
+  render () {
+    return (
+      <Html>
+        <Head>
+          <link rel='manifest' href='/manifest.json' />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
diff --git a/examples/with-next-offline/pages/index.js b/examples/with-next-offline/pages/index.js
@@ -0,0 +1 @@
+export default () => <div>Next-Offline Example, try to install app via chrome</div>
diff --git a/examples/with-next-offline/public/manifest.json b/examples/with-next-offline/public/manifest.json
@@ -0,0 +1,16 @@
+{
+  "name": "next-offline",
+  "short_name": "next-offline",
+  "description": "Nextjs using serveice worker via next-offline",
+  "icons": [
+    {
+      "src": "/static/pwa.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "start_url": "/",
+  "display": "standalone"
+}
diff --git a/examples/with-next-offline/public/static/pwa.png b/examples/with-next-offline/public/static/pwa.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export default () => <div>Next-Offline Example, try to install app via chrome</div>