If you aren’t talking about PWAs you are seriously missing out. PWAs in recent years has grown to be the most adopted optimization trick in the software industry.

Not only optimization benefits but a plethora lot of goodies:

Progressive enhancement : It works for every user no matter the browser choice of the user. Your app will run properly on a wide range of browsers and will degrade gracefully when certain functionalities are not available but still with a decent user experience.

: It works for every user no matter the browser choice of the user. Your app will run properly on a wide range of browsers and will degrade gracefully when certain functionalities are not available but still with a decent user experience. Native-like experience : It provides a mobile-like experience. It is a web app but it feels like you are interacting with an Android/iOS app.

: It provides a mobile-like experience. It is a web app but it feels like you are interacting with an Android/iOS app. Responsiveness : It can match to fit any screen size be it a tablet, mobile, iPad or desktop. It automatically adjusts to compensate for either a new space or a narrow space.

: It can match to fit any screen size be it a tablet, mobile, iPad or desktop. It automatically adjusts to compensate for either a new space or a narrow space. Offline support : Your app can work offline.

: Your app can work offline. Push Notifications: PWAs are engaging with the use of push notifications, they pop up a notification to notify about either a friend request, current news, new message or any other thing, you will feel the urge to respond to the notification(to respond to the message, to read the news, to check out the new friend) and launch the app again, thereby re-engaging you with the web app.

Service Workers

Service Workers is a type of Worker that lets us run scripts in the background of our browser. It is like a man-in-the-middle between our browser and the network. The main work of Service workers is to help us cache and serve the cached files which provide an uninterrupted user experience.

Service workers allow developers to manage resource caching more efficiently so that users don’t experience interruptions even if they disconnect from the internet. — KeyCDN in What Are Service Workers and How They Help Improve Performance

In normal web apps, we can only navigate through our website if we are connected to a network, without the network we will see the usual “Network error: Page cannot load” or Chrome little dinosaur game. But service workers have changed the game, with service workers we can cache our website pages not only web pages but other resources that do make up our web pages apart from the text. Service workers cache webpage resources in a new storage called CacheStorage, when we go offline the service workers kick in and serve the cached pages in the CacheStorage.

Progressiveness in PWA

We understood how service workers workes in the above section. Now the question is: What is the Progressiveness in the PWA acronym?

Progressive Web App (PWA) is a term used to denote a new software development methodology. Unlike traditional applications, progressive web apps are a hybrid of regular web pages (or websites) and a mobile application. This new application model attempts to combine features offered by most modern browsers with the benefits of mobile experience. — Wikipedia

Most of the PWA features are not yet supported in most browsers and more features will be added in the future. You don’t have to implement all the features. If your browser doesn’t support app manifest but support CacheStorage, you can leave out the app manifest and start with the CacheStorage, if in the future your browser(on update) come to support app manifest you can then add that feature to your PWA.

You see, you keep progressing as more features are added to your browser without a total halt and waiting for your browser to fully support all the PWA features.

In this post, we will learn how to build a PWA in React.