I am in love with PWAs. They are so cool!

Published on 2023-01-30

WebTech

You know how we always have web version and app version for website? Example: Instagram web-login and mobile-login. Usually that means maintaining both website and mobile app. But Progressive Web Apps make the website to be able to add to home screen of devices (desktop/ mobile) just as native app!

Progressive Web Apps (PWAs)

PWAs are web apps that use service workers, manifests, and other web-platform features in combination with progressive enhancement to give users an experience on par with native apps.

Features of PWAs are

  1. Progressive: starts with the “good, old basic website” and progressively add new features while remembering to detect if they are available in the browser and gracefully handle any errors that crop up if support is not available. For example, an offline mode with the help of service workers is just an extra trait that makes the website experience better but it’s still perfectly usable without it.
  2. Discoverability: Searchable, easier to expose, catalog and rank, with metadata usable by browsers
  3. Install-ability: Be able to add to home screen just as a native app. Installation is supported by Chrome, Firefox (not anymore), Opera for Android.
  4. Network Independence: An offline mode with the help of service workers is just an extra trait that makes the website experience better. Cache API is for storing responses to network requests offline and client side data storage technologies such as Web Storage and IndexDb to store application data offline.
  5. Re-engageability
    • Web Push API: gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent. This lets developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content. Works with Service Worker.
    • Notifications API: The Notifications API allows web pages to control the display of system notifications to the end user. These are outside the top-level browsing context viewport, so therefore can be displayed even when the user has switched tabs or moved to a different app. The API is designed to be compatible with existing notification systems, across different platforms. Works with Web Worker.

Here's my concept proof of PWA BMI-calculator. BMI-calculator

Who adopted PWA

To name a few, - Starbucks - Spotify - Forbes ...

Further Reading

MDN Progressive Web Apps Explained Indexed Database API Push API

See you again!