Add lifecycle example

shadowwalker · Jan 22, 2020 · b7c4212 · b7c4212
1 parent a4b8492
commit b7c4212
Show file tree

Hide file tree

Showing 18 changed files with 7,037 additions and 86 deletions.
diff --git a/examples/lifecycle/README.md b/examples/lifecycle/README.md
@@ -0,0 +1,27 @@
+
+
+# next-pwa - lifecycle and register worflow control example
+
+[TOC]
+
+This example demostrates how to use `next-pwa` plugin to turn a `next.js` based web application into a progressive web application easily.
+
+It demonstrates how to control the service worker registration workflow (instead automatically register the service worker) and add event listener to handle the lifecycle events. This gives you more control through out the PWA lifecycle. The key here is set `register` option in `next.config.js` to `false`, then call `window.workbox.register()` to register the service worker on your own.
+
+## Usage
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/shadowwalker/next-pwa/)
+
+``` bash
+cd examples/lifecycle
+yarn install
+yarn build
+yarn start
+```
+
+## Recommend `.gitignore`
+
+```
+**/public/precache.*.js
+**/public/sw.js
+```
diff --git a/examples/lifecycle/next.config.js b/examples/lifecycle/next.config.js
@@ -0,0 +1,8 @@
+const withPWA = require('next-pwa')
+
+module.exports = withPWA({
+  pwa: {
+    dest: 'public',
+    register: false
+  }
+})
diff --git a/examples/lifecycle/package.json b/examples/lifecycle/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "next-pwa-example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^9.2.0",
+    "next-pwa": "^2.0.2",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  }
+}
diff --git a/examples/lifecycle/pages/_document.js b/examples/lifecycle/pages/_document.js
@@ -0,0 +1,49 @@
+import Document, { Head, Main, NextScript } from 'next/document'
+
+const APP_NAME = 'next-pwa example'
+const APP_DESCRIPTION = 'This is an example of using next-pwa plugin'
+
+export default class extends Document {
+  static async getInitialProps(ctx) {
+    return await Document.getInitialProps(ctx)
+  }
+
+  render() {
+    return (
+      <html lang='en' dir='ltr'>
+        <Head>
+          <meta name='application-name' content={APP_NAME} />
+          <meta name='apple-mobile-web-app-capable' content='yes' />
+          <meta name='apple-mobile-web-app-status-bar-style' content='default' />
+          <meta name='apple-mobile-web-app-title' content={APP_NAME} />
+          <meta name='description' content={APP_DESCRIPTION} />
+          <meta name='format-detection' content='telephone=no' />
+          <meta name='mobile-web-app-capable' content='yes' />
+          <meta name='theme-color' content='#FFFFFF' />
+          <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover' />
+
+          <link rel='apple-touch-icon' sizes='180x180' href='/icons/apple-touch-icon.png' />
+          <link rel='manifest' href='/manifest.json' />
+          <link rel='shortcut icon' href='/icons/favicon.ico' />
+          <style>{
+            `
+            html, body, #__next {
+              height: 100%;
+            }
+            #__next {
+              margin: 0 auto;
+            }
+            h1 {
+              text-align: center;
+            }
+            `
+          }</style>
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
diff --git a/examples/lifecycle/pages/index.js b/examples/lifecycle/pages/index.js
@@ -0,0 +1,74 @@
+import { useEffect } from 'react'
+import Head from 'next/head'
+
+export default () => {
+  // This hook only run once in browser after the component is rendered for the first time.
+  // It has same effect as the old componentDidMount lifecycle callback.
+  useEffect(()=>{
+    if (typeof window !== 'undefined' && 'serviceWorker' in navigator && window.workbox !== undefined) {
+      // add event listeners to handle any of PWA lifecycle event
+      // https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-window.Workbox#events
+      window.workbox.addEventListener('installed', event => {
+        console.log(`Event ${event.type} is triggered.`)
+        console.log(event)
+      })
+
+      window.workbox.addEventListener('controlling', event => {
+        console.log(`Event ${event.type} is triggered.`)
+        console.log(event)
+      })
+
+      window.workbox.addEventListener('activated', event => {
+        console.log(`Event ${event.type} is triggered.`)
+        console.log(event)
+      })
+
+      // ISSUE - this is not working as expected, why?
+      // I could only make message event listenser work when I 
+      // manually add this listenser into sw.js file
+      window.workbox.addEventListener('message', event => {
+        console.log(`Event ${event.type} is triggered.`)
+        console.log(event)
+      })
+
+      /*
+      window.workbox.addEventListener('redundant', event => {
+        console.log(`Event ${event.type} is triggered.`)
+        console.log(event)
+      })
+
+      window.workbox.addEventListener('waiting', event => {
+        console.log(`Event ${event.type} is triggered.`)
+        console.log(event)
+      })
+
+      window.workbox.addEventListener('externalinstalled', event => {
+        console.log(`Event ${event.type} is triggered.`)
+        console.log(event)
+      })
+
+      window.workbox.addEventListener('externalactivated', event => {
+        console.log(`Event ${event.type} is triggered.`)
+        console.log(event)
+      })
+
+      window.workbox.addEventListener('externalwaiting', event => {
+        console.log(`Event ${event.type} is triggered.`)
+        console.log(event)
+      })
+      */
+
+      // never forget to call register as auto register is turned off in next.config.js
+      window.workbox.register()
+    }
+  }, [])
+
+  return (
+    <>
+      <Head>
+        <title>next-pwa example</title>
+      </Head>
+      <h1>Next.js + PWA = AWESOME!</h1>
+    </>
+  )
+}
diff --git a/examples/lifecycle/public/icons/android-chrome-192x192.png b/examples/lifecycle/public/icons/android-chrome-192x192.png
diff --git a/examples/lifecycle/public/icons/apple-touch-icon.png b/examples/lifecycle/public/icons/apple-touch-icon.png
diff --git a/examples/lifecycle/public/icons/favicon.ico b/examples/lifecycle/public/icons/favicon.ico
diff --git a/examples/lifecycle/public/icons/icon-512x512.png b/examples/lifecycle/public/icons/icon-512x512.png
diff --git a/examples/lifecycle/public/manifest.json b/examples/lifecycle/public/manifest.json
@@ -0,0 +1,21 @@
+{
+  "name": "next-pwa",
+  "short_name": "next-pwa",
+  "display": "standalone",
+  "orientation": "portrait",
+  "theme_color": "#FFFFFF",
+  "background_color": "#FFFFFF",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/examples/lifecycle/worker.js b/examples/lifecycle/worker.js
@@ -0,0 +1,4 @@
+self.addEventListener('message', event => {
+    console.log(`Worker message event is triggered.`)    
+    console.debug(event)
+})