Why PWA is so popular?

What is PWA ( Progressive Web App )?

Nidhi Kachhawa , 26 March, 2020

A progressive web app (PWA) is a website that uses the latest web technologies to make a web application act and feel like an app, or we can say PWA are a hybrid of Web Apps and Mobile Applications. They are the best way for developers to make their web apps load faster and more performance.
In a nutshell, PWAs are websites that use recent web standards to allow for installation on a user’s computer or device, and deliver an app-like experience to those users.
PWAs are built to take advantage of mobile device features such as push notifications, device camera, geolocations. They are installable, easy to synchronize and most importantly it’s advanced feature is it works offline.

Why should you build a PWA?

Nowadays people don’t download the apps of the websites which they frequently visit. This is because apps consume space in your mobile, and you have to update it time to time. But PWA doesn’t work like this. When a user visits the web page in the browser, he/she explores the website, they get a prompt if they would like to “ADD TO HOMESCREEN ''. Once the user accepts this prompt, PWA gets added to your homescreen. When you open it from the home screen, it will hide the browser User Interface Controls and will appear as an App. These are the principles of PWA:
  • Installable: It is easily available on the mobile home screen.
  • Linkable: We can share it by simply sending a URL.
  • Network Independent: It works offline.
  • Progressive: It’s able to send push notifications whenever there is new content available.
  • Responsive: It's usable on any device with a screen and a browser — mobile phones, tablets, laptops, TVs, fridges, etc.

What are the main differences between native apps and PWA?

  1. Installation: Native Applications are installed through an App store, such as Google Play or Apple’s iOS App Store. But PWA doesn’t work like this. When a user visits the web page in the browser, he/she explores the website, they get a prompt if they would like to “ADD TO HOMESCREEN ''.

  2. Offline: One of the great things mobile apps can do for users is giving them the ability to access the information without having to be connected to the internet. Offline Service Workers are the most important technology in PWA that is allowing offline use. Service Workers are Javascript files that run independently.

  3. Updates Native apps may require manual updates, but most of the time the process is automated. PWA is able to send push notifications whenever there is new content available.

  4. Discovery: There are two chances for native apps to show up in search results: within the App Store and in Search Engines. On the other hand, PWA will do well in terms of web search SEO as it was like any other website you’d encounter online.

  5. Costs: Web Apps are responsive and work in a browser. They can work faster and cheaper to create. Web Apps work on almost all the devices. Developing a Native app is quite time-consuming and also requires money, developer time, etc. What’s main important thing is you need to develop different apps for every app store.

  6. SEO: So starting mid 2018, Google has announced its changes in Ranking Algorithms. Websites which do have their mobile versions will be ranked higher. Native Apps won’t work since they work only in the app store.

  7. Platform: Native Apps are made specially for one platform- whether Windows phone, Android or iOS. Web Apps are coded to be used in the browser but can be “installed” on a phone by just adding it to the home screen.

What customers expect?

  1. Not every customer will install App.
  2. They expect a secure environment.
  3. They also expect faster web experience.

How does it work?

To add PWA features to our website, there are two essential things that we need to add to our application: a web app manifest file and a service worker.
  • Web App Manifest: The web app manifest is a JSON file that provides information to the browser about our Progressive Web App and how it should behave when installed on the user's desktop or mobile device. It defines metadata associated with the web application like the web application's name, links to icons, as well as the preferred URL to open when a user launches the web application.

  • Service Worker: A service worker is a JavaScript file which is added to the project and registered in the browser. The service worker script is then able to run in the background and perform tasks like:
    1. Is there an Internet Connection Or Not?
    2. Recognizing the network state.
    3. When the user is online, it adds Application data to the browser cache and also provides that data when the user is Offline.
    4. It also helps to display Push Notifications.

Four Key Technologies of PWA:

The progressive web app differs from traditional web app in variety of ways, but here are the main four technologies that set it apart from others:
  1. Application Shell Architecture: Fast loading time.
  2. Transport Layer Security: Privacy and data integrity.
  3. Service Worker: Works offline.
  4. Web App Manifest File: Home screen access.

What are the drawbacks of PWA?

  1. Manifest file is supported in Chrome, Opera and Samsung Browser but Safari and Edge have partial support.
  2. PWA doesn’t support any hardware that is not supported by HTML5.
  3. PWA consume more battery as compared to native apps because they are written in high-level code, so phones have to work harder to interpret the code.
  4. PWA does not show up in app stores, so most of the users directly search for apps in the app store instead of in the search engine.
  5. PWAs can’t use some of the latest hardware advancements (like fingerprint scanner), they are browsers after all.
  6. Plugins like facebook login and Google login can’t fetch data from Facebook and Google Apps. You need to separately login on the web too.

Examples Of PWA

The progressive web app differs from traditional web app in variety of ways, but here are the main four technologies that set it apart from others:
  1. MakeMyTrip: makemytrip.com is a great example of PWA. As mobile became the most preferred channel for booking among customers, they developed a PWA that led to fast, reliable and polished mobile-web experience.

  2. Uber: the Uber PWA is designed to make car booking viable on low-speed networks. Built around the concept of app-like experience, the PWA is great for riders on low-end devices , which may not be compatible with the native Uber App.

  3. Pinterest: Pinterest started their new mobile web experience from ground up as a PWA. It was realized that only their 1% of mobile users convert into sign-ups, logins or app installs, due to poor performance on mobile devices. So they rebuilt the mobile web using PWA technology.

Is the future "progressive"?

"May or may not be! But, most possibly yes, Progressive Web App or PWA is the future of all apps. This is because a normal app will give you the facility to work from the home screen of the mobile but that's it. It will send you notifications or updates but only when you are online."
/
Posted In - PWA
blog comments powered by Disqus