Updated: Build a PWA with Next.js with achieve 100% score in lighthouse
Tags: nextjs, pwa, beginners, webdev
Published: 2023-10-23 04:23:00

## Introduction

A Progressive Web App (PWA) is a type of web application that offers a user experience similar to that of a traditional native mobile app or desktop application. PWAs are designed to be fast, reliable, and engaging, and they combine the best features of web and mobile apps. Here are some key characteristics and features of PWAs:

![Source from microsoft](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0f33j9x451wl0wv4cle.png)

**Progressive Enhancement:** PWAs are designed to work on any platform, whether it's a desktop, mobile device, or tablet. They provide a consistent user experience across various screen sizes and resolutions.

**Offline Capabilities:** One of the defining features of PWAs is their ability to work offline or in low-network conditions. They achieve this through the use of service workers, which cache essential resources and enable the app to function even when there's no internet connection.

**Responsive Design:** PWAs are built with responsive web design in mind, ensuring that the user interface adapts to different screen sizes and orientations, providing a consistent and visually pleasing experience.

**App-Like Interactions:** PWAs offer app-like interactions and navigation, such as smooth animations and gestures, making them feel native and responsive to user input.

**Push Notifications:** PWAs can send push notifications to users' devices, keeping them informed and engaged with updates, news, or other relevant information, even when the app is not open.

**Secure:** PWAs are served over HTTPS, which ensures data security and privacy for both users and the application.

**No App Store Installation:** Unlike traditional native apps, PWAs are accessed through a web browser, which means users don't need to download and install them from an app store.

**Automatic Updates:** PWAs are updated automatically on the server, ensuring users always have access to the latest version of the app.

**Discoverability:** PWAs are discoverable through search engines and can be easily shared via URLs, increasing their accessibility and visibility.

**Linkable:** PWAs can be linked to directly, allowing users to share specific content or app states with others.

**Lower Data Usage:** PWAs are often more data-efficient, which can be especially valuable in regions with limited data access.

**Reduced Storage Space:** PWAs don't consume significant amounts of device storage, making them suitable for users with limited storage capacity.

PWAs are typically built using web technologies such as HTML, CSS, and JavaScript, and they can be developed to be platform-agnostic, meaning they can run on various operating systems and browsers. This versatility and the benefits of PWAs have made them a popular choice for businesses and developers looking to provide a seamless, engaging, and accessible user experience.

![Giphy Wow](https://media.giphy.com/media/cL4pqu8GGRIihabgSM/giphy.gif)

## Let start the Implementation

**Step 1:** Create NextJS app
Set up everything automatically for you. To create a project, run:
```
$ npx create-next-app@latest
``` 
**Step 2:** Add PWA plugin in nextJS project
```
$ yarn add next-pwa
or
$ npm i next-pwa
```
**Step 3:** Add manifest json file in `public` folder, example
```
{
    "theme_color": "#f69435",
    "background_color": "#f69435",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "name": "PWA test APP",
    "short_name": "PWA App",
    "description": "NextJS PWA app tutorial",
    "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"
        }
    ]
}
```
**Step 4:** Run the below command to create `Service worker` and `workbox-file`
```
$ npm run build
or
$ yarn build
```
**Step 5:** Config the `manifest.json` file in nextJS project `.layout.tsx/js`. like below
```
export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
  manifest: '/manifest.json' // Import manifest file here
}
```
**Step 6:** Now, run the project
```
$ npm run start
or
$ yarn start
```

You can find the below screen in your chrome browser

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvnadqv79sj2v06gelhd.png)

## Live Example Video
{% embed https://www.youtube.com/watch?v=4dtpI8sx46M %}

That's all

![Example](https://media.giphy.com/media/miTNwGML5iNO1uaJh5/giphy-downsized-large.gif)


## Resources
**Live url:** https://brilliant-conkies-01fe45.netlify.app/
**Repo URL:** https://github.com/lakshmanan-arumugam/next.js-pwa
**next-pwa:** https://www.npmjs.com/package/next-pwa
**Manifest generator:** https://www.simicart.com/manifest-generator.html/