What is Progressive Web app (PWA) ?



Progressive Web App (PWA):


In this tutorial, we will talk about progressive web apps or PWA's. If Google it, we will find that progressive web apps are a type of application that will deliver through the web but using common web technologies using HTML CSS and JavaScript it is intended to work on any platform that supports a standard-compliant browser.


    So basically the progressive web app is an enhanced version of web apps that lets you create apps with react, Angular, or any other technology. There are few extra things that we need to do to build along with the web app to convert to the PWA app. So after making it a PWA it will give us some extra activities like offline uses and post notification and most importantly users of the web app can install it as a native app. it can be installed like an android app or computer app so progressive web apps bridge the gap between a native app and web app.


    So we will take an example of a Twitter app that we can download from the play-store web-based or any other platform. this app is the native app that we get from the Google play store and it has all the features and it has all the features, notifications, and all the stuff. Similarly, this application is a Twitter web application that is a p w a which age start from the web browser and it has all the capability that has a native web app. Anything that we can do with the normal apps we can do with the progressive web app also and we can also use it in offline mode that is the most attractive feature of the progressive web apps and we do not require to download it from the play store, we can download it directly from the browser itself.


    If you're looking for a web application that looks and feels like a native application then PWA will suit you. There might not be all the capabilities like a native application like accessing cameras or some hardware resources but it is a growing technology and it may cover some extent of resources/features. Also, Google allows the progressive web app to add to the google play store. It was a concept that was introduced by Google. We can also install these progressive web apps in the iOS ecosystem and Safari allows installing progressive web apps by clicking 'add it to the home screen' UI in the browser itself.


Now here are some points that are what makes a good progressive web app. If you go to web.dev site they provide a checklist. In the checklist, they described what makes the app installable and usable by all users regardless of input size or type.

What makes a good Progressive Web App?

It starts fast and stays fast.
It works in the browser.
Responsive to any screen.
provides a custom offline page.
and is installable.

Optimal progressive web app checklist: 


Provides an offline experience.
Is fully accessible can be discovered through search.
Works with any input type and size.
Provides context for permission request
Follows best practices for healthy code.

Install criteria:


The progressive web app must satisfy the following criteria in Chrome before it will fire the 'beforeinstallprompt' event and shows the in-browser install promotion.

It should not already installed.
It should make a user engagement.
It should be served over https on localhost .
It should include a web manifest with:
  • short name or name
  • icon 
  • start_url
  • display 
  • prefer_related_applications and 
  • register a service worker with fetch handler.


And other browsers also have similar criteria for installation.


Check the following link to convert angular app to PWA.

How to convert Angular App to Progressive Web App (PWA)?

Post a Comment

1 Comments

  1. Thanks for providing this valuable information and I have bookmarked it for future reference. Make a count of every minute with the Project Time Tracking Software for Employees to grow business. Hope you write again soon.

    ReplyDelete