PROGRESSIVE WEB APPS for FE
By Technocrats

Features of PWA

Fast

Respond quickly to user interactions with silky smooth animations and no janky scrolling.

Reliable

Loads instantly and it can work offline even in uncertain network conditions.

Safe

Uses secure HTTPs for all its communications.

Engaging

web push notifications, immersive full screen experience, control screen orientation, home screen icon etc.,

Discoverable

Searchable and listed on search engine result pages.

Installable

It is easily installable from the web.

Native Apps vs PWA

Why PWA compared to Native Apps?

  • It supports reusability of code across different platforms i.e., Html, JavaScript and CSS
  • Learn one language and apply everywhere i.e, JavaScript
  • It is written in JavaScript - a well known language with largest ecosystem and community
  • It can be integrated into an existing website and enhance user experience in modern browser that supports PWA. So, existing customers can directly benefit from it.
  • It can benefit from the site's popularity.
  • Reduces installation friction
  • Updates to PWA is immediately delivered to customers.
  • Smaller file downloads during incremental updates
  • Supports sharing application through URL
  • PWA coupled with AMP(Accelerated Mobile Pages) provides faster initial load and smooth, cached subsequents requests.

Feature 1: Cache content for Offline access

Service worker script can be enabled for entire domain. If added to the site root, it gets activated on page load and starts caching the site assets and request originating for entire domain in the user’s browser cache/storage based on configured routes. Once cached, next time application can load instantly even work without network.

Typical storage quota for PWA is 50MB, above which app might show warning depending on the browser. If required, we can minimize storage usage by caching particular site paths or assets.

Demo :

This website caches all assets like html, scripts, css and external fonts using cache storage. So even when network connection is weak or offline, site page loads instantly without showing offline page.

PWA storage in chrome developer tool

Browser Support :

90% of users are using modern browser that supports Service Workers

Feature 2: Notification API for alerts

In most of our application, we allow users to generate reports from huge amount of data, these tasks usually take long duration to complete. During the wait time, the users usually gets distracted and navigate away from the site. And currently, there is no other way for users to know whether their report is ready without checking the site page frequently.

Using Notification API, we can enhance the user experience by notifying the user using device notification system when task is completed and provide him with a clickable notification that brings him back to the actual report page. Since this messages are shown using notification system, we can reach the user even if he is on another browser tab or even another application.

Demo :

 

Few things to consider :

  • Notification API requires user permission to show notifications from our site. So, this cannot completely replace the current in-page notifictaions.
  • Based on the device OS and browser, the level of richness in showing the notification may differ. Notification display in Latest Operating System supports rich text with images.

Browser Support :

75% of users are using modern browser that supports Notification API

Feature 3: Improve user Re-engagement using Push API

One of the best feature of native apps is its ability to re-engage user periodically by displaying relevant content through push notifications. Typical notification may be related to on-going discounts/promos/offers, latest content from a subscribed channel or news magazine or informing about goal/milestone completion etc.,

So in-case of a news/blog post site; when a new article/news post is published on website, we can directly send the notifications to the user's device using Push API to notify/promote the content through device notifications center. These messages can be delivered to the user device, even when the browser is not open/running.

This way of alerting helps to re-engage with the interested user or targetted audience, and there by bringing in more traffic and returning/loyal visitors to the website.

Demo :

 

Subscription Information :

The endpoint is generated by Firebase Cloud Messaging (FCM) a free push service by Google. To respect user's privacy - Web Push Protocol allows to use FCM using VAPID, that doesn't require any account with FCM service.

Browser Support :

78% of users are using modern browser that supports Push API

Feature 4: Native app like behaviour

PWA provides following native apps like features

  • It provides ability to add PWA to homescreen icon
  • It can display pages as fullscreen, standalone, minimal UI or browser
  • It can control device orientation
  • It can show splash screen on load