Progressive Web Applications

Progressive Web Apps (PWAs) are the latest trend in web development as they bring mobile-app-like experiences to your users without requiring them to install an app from the app store/ play store. PWAs have been around for sometime and have helped companies improve conversions for new users.

What is PWA?

It’s a term referring to couple of features you can add to any web application running in browser to progressively enhance web apps to look and feel like native apps. It adds capability to leverage native features like your app working offline, having icon on the home screen, accessing device camera and location, synchronising data in the background etc.

There are three main keywords that summarise PWA:

• Be Reliable: Load fast and provide offline functionality.
• Fast: Respond quickly to user actions and provide access to native device features in an intuitive way.
• Engaging: Feels like a native app on mobile devices.

Let’s talk about the core building blocks of PWAs.

• Service Workers: They are JavaScript running in the background process even if your application is closed. Service works are core building block as they allow us to get offline access to cache files and serve them if we don’t have internet connection. They also provide us access to other PWA features like synchronising user data in the background, sending push notifications in web as they are always running in the background independent of the currently opened tab.
• Application Manifest: It makes our web application installable on Home screen.
• Responsive Design: The layout should work/look good across all devices. This is not something new but we have been doing for a couple of years already.
• Geolocation API: Allows to access users device location.
• Media API: Allows access to device camera and microphone.

Single Page Apps and PWAs

Single Page Applications (SPAs) are web applications powered by JavaScript typically created using frameworks where framework takes control of rendering/updating the DOM. People often confuse between SPAs and PWAs but they are totally different. PWAs are collection of technologies and techniques which runs totally independent of your web app being SPA or not. We can turn any SPA into PWA and it holds true for any other traditional multi page web application.

How it works in different browsers?

Most of the modern browsers (except Safari) have good support for PWAs. We can configure it to work in such a way that our web page still works in browsers that still do not have support. It means if you have a modern browser on mobile device you start getting native experiences else you get the experience you have gotten anyway.

I am planning to write more about PWAs and it’s core building blocks in the coming days so stay-tuned. If you liked reading this, don’t forget to clap. 👏👏

You can also follow me on twitter @Akash940 for JavaScript or React updates.

Thank-you!