Published on 19 February 2021

Enable PWA for Next.js

Enable Progressive Web Application (PWA) for a Next.js website

What’s PWA and why we need this in our web application?

These are web applications. PWA is the short form of Progressive Web Application and this will offer some common web capabilities for the user as a native mobile app. Basically, we can say that same website turns into a mobile app and it has the capability of work offline as a mobile app.

Installing necessary packages.

After creating a Next.js project we can install “next-pwa” package like below.

bash
yarn add next-pwa
# or
npm install next-pwa

Working on next.config.js file.

Next, we need to create a next.config.js file in the root folder to add our configuration. If you’re using the Next.js version lower than 9 we need a service worker requires a custom server. But for 9+ versions it’s not required. Because next-pwa will create a sw.js file for us in the public folder. After creating the next.config.js file we need to add some configuration as below to set up PWA with next-pwa

js
const withPWA = require("next-pwa");

module.exports = withPWA({
  pwa: {
    disable: process.env.NODE_ENV === "development", //PWA will be disabled on development environment.
    dest: "public",
  },
});

If you’re in the development environment you can keep the disable as false as you can see the in the code above.

Creating a manifest.json

Simply just create the manifest.json file and add the code below with including your details. Make sure to use correct image sizes for icons and their paths. Then you can keep this file inside the public folder.

json
{
  "name": "Madushan Perera",
  "short_name": "Madushan Perera",
  "description": "Madushan Perera",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "prefer_related_applications": true,
  "theme_color": "##111827",
  "background_color": "##111827",
  "display": "standalone",
  "scope": "/",
  "start_url": "/"
}

Adding meta tags

We need some meta tags for specify these PWA details to different devices and screens.

Then make sure to keep those tags inside Head tag in the _document.js file as shown below.

js
import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link href="/m16.png" rel="icon" type="image/png" sizes="16x16" />
          <link href="/m32.png" rel="icon" type="image/png" sizes="32x32" />
          <meta name="application-name" content="Madushan Perera" />
          <meta name="apple-mobile-web-app-capable" content="yes" />
          <link rel="manifest" href="/manifest.json" />
          <meta
            name="apple-mobile-web-app-status-bar-style"
            content="default"
          />
          <meta name="apple-mobile-web-app-title" content="Madushan Perera" />
          <meta name="theme-color" content="##111827" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Let’s Build our app to see what’s happening.

If you can see the that the PWA Compile the client. You got this 😘

By the way you can go to your Chrome DevTools > Lighthouse, and generate a report. It will show you if you have any problems with your manifest and meta tags.

If everything works you will be able to see PWA enabled sign on it.

Thanks for stopping here to read this and hope this helps for your developments 🎉.

Blog