Neil Haddley - Developer & Technical Consultant

Next.js (Part 5)

Neil Haddley • January 13, 2022

next-pwa and ionic

next-pwa

next-pwa adds Progressive Web Application (PWA) features to Nextjs

shadowwalker provides examples apps based on next-pwa

A Nextjs project that includes the ionic web components can be created by running the command:

BASH

1% npx create-next-app --example with-ionic-typescript --use-npm haddley-nextjs-ionic-pwa

The steps below demonstrate how next-pwa can be added to a with-ionic-typescript project

example with-ionic-typescript

npm run build copies the svg folder to public

update next.config.js to include next-pwa (remove the svg copy)

update gitignore so that generated files are ignored

add an offline page

add a manifest.json file (so that app can be installed)

include the icons referenced in the manifest.json

include a Nextjs _document.js file that includes a reference to the manifest.json file

I needed to remove (unneeded) files from the svg folder...

npm run build

Create Azure Web App

provide a name

select a node version

select a pricing tier

deploying...

iPhone Simulator

Accessing https://haddleynextjsionicpwa.azurewebsites.net using Safari

Add to Home Screen

Confirm application details

Application on Home Screen

Application running with an Internet connection

Internet connection disabled

Application running offline

Accessing https://haddleynextjsionicpwa.azurewebsites.net using Chrome on a MacBook

Installing application on MacBook

Running application online or offline on MackBook

.gitignore

TEXT

1**/public/workbox-*.js
2**/public/sw.js
3**/public/fallback-*.j

_offline.js

TEXT

1import Head from 'next/head'
2
3export default () => (
4  <>
5    <Head>
6      <title>next-pwa example</title>
7    </Head>
8    <h1>This is offline fallback page</h1>
9    <h2>When offline, any page route will fallback to this page</h2>
10  </>
11)

manifest.json

TEXT

1{
2    "name": "next-pwa",
3    "short_name": "next-pwa",
4    "display": "standalone",
5    "orientation": "portrait",
6    "theme_color": "#FFFFFF",
7    "background_color": "#FFFFFF",
8    "start_url": "/",
9    "icons": [
10      {
11        "src": "/icons/android-chrome-192x192.png",
12        "sizes": "192x192",
13        "type": "image/png",
14        "purpose": "any maskable"
15      },
16      {
17        "src": "/icons/icon-512x512.png",
18        "sizes": "512x512",
19        "type": "image/png"
20      }
21    ]
22  }

_document.js

TEXT

1import Document, { Html, Head, Main, NextScript } from 'next/document'
2
3const APP_NAME = 'next-pwa example'
4const APP_DESCRIPTION = 'This is an example of using next-pwa plugin'
5
6export default class extends Document {
7  static async getInitialProps(ctx) {
8    return await Document.getInitialProps(ctx)
9  }
10
11  render() {
12    return (
13      <Html lang='en' dir='ltr'>
14        <Head>
15          <meta name='application-name' content={APP_NAME} />
16          <meta name='apple-mobile-web-app-capable' content='yes' />
17          <meta name='apple-mobile-web-app-status-bar-style' content='default' />
18          <meta name='apple-mobile-web-app-title' content={APP_NAME} />
19          <meta name='description' content={APP_DESCRIPTION} />
20          <meta name='format-detection' content='telephone=no' />
21          <meta name='mobile-web-app-capable' content='yes' />
22          <meta name='theme-color' content='#FFFFFF' />
23          {/* TIP: set viewport head meta tag in _app.js, otherwise it will show a warning */}
24          {/* <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover' /> */}
25          
26          <link rel='apple-touch-icon' sizes='180x180' href='/icons/apple-touch-icon.png' />
27          <link rel='manifest' href='/manifest.json' />
28          <link rel='shortcut icon' href='/favicon.ico' />
29          <style>{
30            `
31            html, body, #__next {
32              height: 100%;
33            }
34            #__next {
35              margin: 0 auto;
36            }
37            h1 {
38              text-align: center;
39            }
40            `
41          }</style>
42        </Head>
43        <body>
44          <Main />
45          <NextScript />
46        </body>
47      </Html>
48    )
49  }
50}