What are Progressive Web Apps (PWAs)

Junction of an app and website

3 min readNov 8, 2022

Introduction

Websites that took all the right vitamins.

Formal definition states that:

Progressive Web Apps (PWAs) are web apps built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device, all with a single codebase.

In simple language, major features of a Progressive Web Applications are:

Solid offline experience
- Our application should be able to without an Internet connection
Installable
- Website should provide a feature to install on desktop and mobile devices.
Support for Push Notifications
- It is also known as web push. It is the ability to receive asynchronous notifications(messages) that are pushed from the server.
Easy to synchronize
- Syncs data in the background even if the user is not using the web app.

Applications

Let us see some mordern applications of PWA.

Here’s an snapshot from youtube and spotify to show how the installable feature in a web app looks like.

2. Mobile app of a PWA website.

Requirements

Let’s discuss what makes a Website a Progressive web application. i.e, requirements for a website to be a Progressive web application. As we know that PWA is not a set of technology stack, PWA is instead a pattern which includes various technical components.

There are no specific rules that will be applicable on all web browsers but there are some set of recommendations by Google that one can follow in order to create an efficient PWA. Below is a link for the same.

What makes a good Progressive Web App?

web.dev

The recommendation PWA checklist is divided into two sub checklists:

Core Progressive Web App checklist
- Starts fast, stays fast
- Works in any browser
- Responsive to any screen size
- Provides a custom offline page
- Is installable
Optimal Progressive Web App checklist
- Provides an offline experience
- Is fully accessible
- Can be discovered through search
- Works with any input type
- Provides context for permission requests
- Follows best practices for healthy code

Turn your existing website into a PWA

PWA seems to provide rich mordern feature and it’s surprising to see how easy it is to turn your current application into a PWA. The process is a little different for different tech stack the the center idea is to add a manifest.json and service_worker file.

Implementation of PWA for diffferent tech stack can be found on this link.

Learn more about PWA

Here are some resources that will help you in bulding cool PWA’s.

Conclusion

This article should have given you a good introduction of Progressive web applications and how you can convert your website into a PWA. There is much more to learn and improve, but I hope you feel confident delving in and playing around with a wide range of powerful utilities yourself now.

Please let me know if anything was unclear, or if there’s anything else you’d like to see in this or a subsequent article. Feel free to reach out to me anytime if you want to discuss something. I would be more than happy if you send your feedback suggestions.

Thanks a lot for reading till end. You can contact me in case if you need any assistance:

Web: https://abhisheksrivastava.vercel.app
Instagram: https://www.instagram.com/theprogrammedenthusiast/
LinkedIn: https://www.linkedin.com/in/abhishek2x
Github: https://github.com/abhishek2x
Email: abhisheksrivastavabbn@gmail.com