PWA with Next Js 13

What is PWA?

Progressive Web Applications (PWAs) are apps built with web technologies that we probably all know and love, like HTML, CSS, and JavaScript. But they have the feel and functionality of an actual native app.

Before we have to manage different code bases for web, android, and ios applications. But PWA makes developers life easy. Now we can manage all those with a single code base. We can turn any websites or web apps into a installable mobile application and use it in different platforms.

Benefits of PWA

Have Cross-platform compatibility.
They're fast and lightweight.
They work offline unlike other sites.
Push notifications functionality.
Low maintenance cost.

Example of a PWA

Twitter is a great example of a PWA, with its fast loading times, responsive design, and ability to function offline. The PWA version of Twitter can be accessed at the URL https://twitter.com/, and it allows users to browse and interact with tweets in a mobile-friendly and app-like interface. The Twitter PWA also supports push notifications, enabling users to receive updates and alerts in real-time. The PWA is designed to be accessible and optimized for all devices, including desktop and mobile, making it easy for users to stay connected and engage with their followers on the go.

What you're going to learn?

You can create a PWA with Next Js from startch.
You can convert your existing app with a PWA.

Next Js PWA Boilerplate

If you're more of a code-first kind of person, you can find a ready-to-go boilerplate here. However, I still recommend reading the rest of this post to gain a better understanding of how everything works together.

GitHub - sabbirzzaman/next-pwa

Or just run this command to clone the repository in the terminal. (TypeScript)



https://github.com/sabbirzzaman/next-pwa.git

For JavaScript



git clone -b with-js https://github.com/sabbirzzaman/next-pwa.git

Let's create a PWA

First open your terminal and create a Next Js project.



npx create-next-app@latest

Generate Manifest file

A manifest file is a JSON file that provides metadata and configuration details about a PWA. It contains information such as the app's name, icons, start URL, theme color, and display mode. The manifest file is used by web browsers to identify and install the PWA, allowing it to behave more like a native app on the user's device. The manifest file is also used by the browser to display the PWA's name, icon, and splash screen when the app is launched.

You can simply create a manifest.json file in the public folder and copy the below manifest and modify the name, colors, description, etc as par your requiremts. Or you can also generate a new one for you from this website: simicart



{
  "theme_color": "#3b82f6",
  "background_color": "#f8fafc",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "name": "Your App Name",
  "short_name": "your_app_name",
  "description": "A PWA boilerplate with Next Js TypeScript",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

This is how the public folder will look like after creating the manifest.json file.

Create _document file

Next you have to create a _document.js, _document.jsx or _document.tsx file the in the pages directory and paste the following code.



import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <link rel="manifest" href="/manifest.json" />
        <link rel="apple-touch-icon" href="/icon.png"></link>
        <meta name="theme-color" content="#fff" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

The _document.tsx file in Next.js is used to customize the HTML document served to the user's browser, allowing developers to add custom HTML head elements and modify the HTML structure of the page. It is executed only on the server-side during the initial rendering of the page and is commonly used to add server-side rendering support for CSS-in-JS libraries or to add global styles and scripts to the page.

Next PWA Configuration

In Next.js, developers can configure their project using the default configuration file, next.config.js. Simply open the file and paste the following code.

Note: if your project is not in TypeScript you can ingore the /** @type {import('next').NextConfig} */ line.



/** @type {import('next').NextConfig} */

const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
});

module.exports = withPWA({
  reactStrictMode: true,
});

Some gitignores

After creating the build, you will see several auto generated .js files in your public folder. You don't need to keep those in GitHub. For ignoring those you can can paste those following lines in your .gitingore file.



# Auto Generated PWA files
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map

Local build and test the PWA

After completing the configuration process, you can test your Next.js application. To test the PWA locally, you need to create a new build. Stop the terminal and use the following command to create a build:



npm run build

Now that you have created a new build, you can run it locally.



npm run start

Alright, so now that you've created a fresh build, let's test it out on your local machine! Head over to http://localhost:3000 in your favorite browser and keep an eye out for the installable icon located in the right corner of the URL box. Click on that bad boy and you should be able to search for the app on your computer and run it like a pro!

That's it, folks! Now you know how to turn your Next.js website into a fancy PWA app. Cheers!

Blog

Sabbir Zzaman