How to PWA you App like a pro
Tags: webdev, react, nextjs, javascript
Published: 2024-03-23 21:24:32

Hello gang welcome to the place where you are currently reading this so I'm going to be talking about how to turn your React or Next.js app into a PWA which as I'm sure you know stands for Progressive web app.

Progressive Web Apps (PWAs) have become a game-changer in the world of web development. They offer the best of both worlds: the accessibility of a website and the capabilities of a native mobile app.

## What is a Progressive Web App?
some of you might be wondering what's a PWA? well, google that sh*t what do you think this is? introduction to Computer Science instead here are some of the reasons why you should PWA your website

- Reliable: They work offline and in low network conditions.

- Fast: They load quickly and respond faster to user interactions smoothly.

- Engaging: They provide a rich, app-like experience.

- Discoverable: They can be easily indexed by search engines. 

## Steps to Transform Your Next.js App into a PWA
Some Prerequisites:

1. A Next.js Project
2. next-pwa Installed
3. A Manifest.json file
4. Configured next.config.js
5. Service Worker

## Creating a Next.js project
Now create a Next.js project I believe in you.

## Install the PWA dependency:

Some libraries simplify the PWA setup process for Next.js. A popular option is next-pwa. You can install it using npm, yarn or whatever you think makes your life easier.
`yarn add next-pwa`

## Create a manifest file:

The manifest file provides information about your PWA, including its name, icons, and theme colour. You can create a manifest.json file in your project's root directory with details like this:

`{
  "short_name": "My PWA",
  "name": "My Progressive Web App",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    // Add icons for different sizes
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#007bff",
  "background_color": "#fafafa"
}
`
you can also add a description and pay attention to the image sizes 

##  Configure next.config.js
in your Next.js config file, import and configure next-pwa.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crdbuup13plq8c00j3q6.PNG)

Note strict mode might be optional. After running next build, this will generate two files in your public: workbox-*.js and sw.js, which will automatically be served statically.

**If you didn't use the next-pwa commands then you will have to register the service worker manually which is a drag *

## Extras
Add an Offline Access Page (Optional):

For a better user experience offline, you can create a custom page (/offline.html) that displays when the network is unavailable.

## Conclusion
Now you have a working PWA app once deployed you can validate your PWA with Next.js using dev tools in the lighthouse. you can also add push notifications but that's for another blog maybe😉;

_About the Author_
I'm Andrey and I wrote this blog because I remember trying to do this myself some years ago and all the resources I could find were either outdated or specific to react.js this is my first Blog post ever so tell me what you think.