How to PWA you App like a pro

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.

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.