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.
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.
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.
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.