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:
A Next.js Project
next-pwa Installed
A Manifest.json file
Configured next.config.js
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-72×72.png”,
“sizes”: “72×72”,
“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.
