PWA with Next Js 13
Tags: nextjs, pwa, typescript, javascript
Published: 2023-02-21 20:50:15

## 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
1. Have Cross-platform compatibility.
2. They're fast and lightweight.
3. They work offline unlike other sites.
4. Push notifications functionality. 
5. 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/](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?
1. You can create a PWA with Next Js from startch.
2. 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](https://github.com/sabbirzzaman/next-pwa)

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

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

**For JavaScript**

```shell
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. 

```shell
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](https://www.simicart.com/manifest-generator.html/)

```json
{
  "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. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gmo6jtpioa9xpincjuk.png)

## 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. 

```ts
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. 

```ts
/** @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. 

```shell
# 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:

```shell
npm run build
```

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

```shell
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!