Progressive Web App(PWA)

Progressive Web Apps are web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications.

Progressive Web Apps are a useful design pattern, though they aren't a formalized standard. PWA can be thought of as similar to AJAX.

In order to call a Web App a PWA, technically speaking it should have the following features: Secure contexts (HTTPS), one or more Service Workers, and a manifest file.

Secure contexts (HTTPS)

The web application must be served over a secure network. Being a secure site is not only a best practice, but it also establishes your web application as a trusted site especially if users need to make secure transactions. Most of the features related to a PWA such as geolocation and even service workers are available only once the app has been loaded using HTTPS.

Service workers

A service worker is a script that allows intercepting and control of how a web browser handles its network requests and asset caching. With service workers, web developers can create reliably fast web pages and offline experiences.

 Manifest file

A JSON file that controls how your app appears to the user and ensures that progressive web apps are discoverable. It describes the name of the app, the start URL, icons, and all of the other details necessary to transform the website into an app-like format.

PWA Advantages

PWAs should be discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, and safe.

·        Like a Native App.

·        Quick and Easy To Install.

·        Enhanced Performance.

·        Working Everywhere.

·        Operating Offline.

·        Updating Silently.

·        Sending Push Notifications.

·        No App Distribution Platforms.

PWA Disadvantages

·        No access to apps stores. The disadvantage of this is that users have to visit the website themselves before they can add the app on their phone screen.

·        Fewer functionalities.

·        Performance.

PWA  App Folder Structure

PWA  Websites Example

Pinterest, Starbucks, Twitter.

Learn more about how to create PWA app

GitHub URL: https://github.com/gokulkrishh/demo-progressive-web-app

Live URL: https://demopwa.surge.sh/