DEV Community

Andreyscott
Andreyscott

Posted on

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.

Image description

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.

Top comments (2)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
andreyscott profile image
Andreyscott

Thanks friend