PWA Next.js Website Guide 🦮

Introduction 💥Create a basic next.js project or use existing project Make it a PWA 🌀Install next-pwa update thiis Create a manifest.json Make a maskable icon Link the manifest Configure for Next.js 9.0.0+Now build it! 🏗Congratulations You Just Made Your First PWA! 🥳

Introduction 💥

This guide is by all means not only way to make a Personal Web Application (PWA) with Next.js (React Framework).

I advise you to research about PWA's, manifest files and service workers before continuing. I found the following resources extremely helpful:

🎉

Quick shoutout to Fireship , one of the highest efficency and quality youtube programmers there are! Keep it up 😄

Create a basic next.js project or use existing project

We can do this using Next.js create-next-app in the command line.


npx create-next-app [optional-typescript] [app-name]

[optional-typescript] - add flags --ts or --typescript to initialise app with typescript rather than js.

[app-name] - The name of the repository of your app, notes this must be all lowercase.

Make it a PWA 🌀

The easiest method for making a Next.js app into a Progressive Web App as of September, 2021, is to install the node package module next-pwa by Wei Wang - @https://github.com/shadowwalker

next-pwa

Next.js with PWA, powered by workbox.

https://www.npmjs.com/package/next-pwa

Install `next-pwa` update thiis

You can install via npm or yarn


npm i next-pwa


yarn add next-pwa

Create a manifest.json

This is used to describe attributes and routes about your app, also to set shortcuts and icons.


{
    "name": "App Name",
    "short_name": "Short Name",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#FFFFFF",
    "theme_color": "#FFFFFF",
    "orientation": "portrait-primary",
    "icons": [
      {
        "src": "manifest/icon-72x72.png",
        "type": "image/png",
        "sizes": "72x72"
      },
      {
        "src": "manifest/icon-96x96.png",
        "type": "image/png",
        "sizes": "96x96"
      },
      {
        "src": "manifest/icon-128x128.png",
        "type": "image/png",
        "sizes": "128x128"
      },
      {
        "src": "manifest/icon-192x192.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "manifest/icon-384x384.png",
        "type": "image/png",
        "sizes": "384x384"
      },
      {
        "src": "manifest/icon-512x512.png",
        "type": "image/png",
        "sizes": "512x512"
      }
    ]
  }

Make a maskable icon

This is so that it can reach the full area of the icon border. Be careful no to have your logo over the 80% safe zone in the centered diameter of the icon. You can define a maskable icon by adding the purpose key with the value maskable any


{
  …
  "icons": [
    …
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
  …
}

Link the manifest

Once you have successfully set up your manifest.json in the /public directory of your project, you must then link it to your page route via the Next.js <Head></Head> tags that come as a built in component to help with SSR.


// Inside /pages/index.ts
// .. Other imports
import Head from 'next/head';

export default function Home() {
	return (
		<Head>
			<link rel="manifest" href="/manifest.json" />
		</Head>
	)
}

Now quickly test if everything is working correctly by

Run the local development server with npm run dev

Open Google Chrome and go to http://localhost:3000

Open Google Chrome Dev Tools by right clicking, then go to the the tab at the top Application then click on manifest in the sidebar.

You should see information about your PWA 🤩 but if you don't just double check your path reference 🔎📂

Configure for Next.js 9.0.0+

If you are running a version of Next.js after version 9.0.0 then use the next.config.js file to configure your service worker for your PWA. This is done simply by including the dependancy, then running its function on the module export of the next.config.js


/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')

module.exports = withPWA({
  pwa: {
    dest: 'public',
    // disable: process.env.NODE_ENV === 'development',
    // register: true,
    // scope: '/app',
    // sw: 'service-worker.js',
    //...
  }
})

Now build it! 🏗

Once you have successfully setup your PWA with you next.js app. All you need to do is run


npm run build

This will create an optimised build for your website, however also create a service worker file inside your public directory. This will keep track of all of your assets and cache them as they are updated by the server for instant load times on user returns (with no data update). ✈ This also allows for airplane mode to be enabled after the app has been loaded once on the device and the page will still render to the fallback!

Congratulations You Just Made Your First PWA! 🥳

📸

MUM GET THE CAMERA

To summarise this blog I would just like to take a second to point the spotlight at what is actually happening here. Essentially you have just avoided coding THE SAME app in 3 or more different coding languages to be compatible with almost every phone or device there is out there in less than a few lines of code 🤯.

I was blown away when I first saw this concept. I hope you enjoyed it as much as I did and chuck the author of next-pwa a star on GitHub. He is a legend, made my life a lot easier 😋