Progressive Web Apps (PWAs) are websites that use recent web standards to deliver an app-like experience without requiring users to download an app. PWAs work across any device, use responsive design for any screen size, and work offline or on low quality networks using service workers. They also feel like native apps through features like push notifications, being discoverable on search engines and home screen installation. PWAs provide a number of benefits including improved user experience through fast loading, engagement through push notifications, and business value through increased customer engagement and conversions.

1. PROGRESIVE WEB APPS(PWA) DEMYSTIFIED

2. WHAT IS PROGRESSIVE WEB APP
PWAs are websites that use recent web standards1
Deliver an app-like experience to users without
the need to install apps.2
Help in creating engaged and loyal users by
creating a Quick Access link on user’s device and
sending on demand PNs
3

3. Progressive & Responsive
Works for every user, regardless of browser
Fits any form factor: desktop, mobile, tablet, or
even larger sizes
Connectivity independent
Enhanced with service workers to work offline
or on low-quality networks.
Engaging
Immersive full screen experience
and re-engage users with
web push notifications
App-like
Feels like an app, because the app
shell model separates the
application functionality from
application content
Discoverable & Installable
Is identifiable as an "application"
allowing search engines to find it.
Allows users to add apps they find
most useful to their home screen
without the hassle of an app store
Fresh & Safe
Always up-to-date with newly introduced
service worker .
Served via HTTPS to prevent snooping
and ensuring non-tampered content
PWA
PROGRESSIVE WEB APPS-FEATURES

4. MOBILE SOLUTIONS : ANALYSIS
PROs
Responsive
Web
Progressive Web
Apps
Native Apps Cross Platform Apps
• Easy Development
• All Channels
• Centralized
Updates
• Installable
• App like features
• Centralized Updates
• Served over https
• Device
Experience
• Access to Native
APIs
• Faster App
Performance
• Appstore
Distribution
• Device Experience
• Access to Native APIs
• Faster App
Performance
• Appstore Distribution
• Single Code Base
CONs
• No Access to
Native APIs
• Browser
Experience
• Native UI
• Content re-use
• No Access to Native
APIs
• Browser Experience
• Native UI
• Device Specific
Development
• Decentralized
Updates
• Multiple Code
bases
• Additional development
Costs

5. Provides central place to put following
meta data associated with the web
application
• Name of the app
• Links to the app icon or image
• URL to launch or open the app
• Declaration for default orientation of
their web app
With service worker PWA handles
unreliable and potentially slow web
connectivity.
It also manages cache efficiently to
allow error free app display during
offline access
It provides an initial static frame, on
which content can be loaded
progressively as well as dynamically,
allowing users to engage with the
app despite varying degree of web
connectivity
PWA BUILDING BLOCKS
Application Shell
App ManifestService Worker
WEB PAGE

6. SERVICE WORKER IN ACTION
WWW
WEB PAGE
Page request
intercepted by
service worker
Fetch from site fails
Service Worker Website
Cache
Retrieve Cached Response
Return Cached response as fallback

7. PWA APPLICATION SHELL
Application shell is the minimal HTML, CSS, and JavaScript powering a user interface which keeps the UI local
and pulls in content dynamically through an API.
Image source:

8. PWA APP MANIFEST
The web app manifest is a W3C specification defining a JSON-based manifest to provide developers a centralized
place to put metadata associated with a web application including:
• The name of the web application
• Links to the web app icons or image objects
• The preferred URL to launch or open the web
• Declaration for default orientation
• Enables to set the display mode
e.g. full screen
Image Source

9. PWA BUSINESS VALUE

10. Awesome
Customer
Engagement
Fast &
stream lined
website
Enhanced
User
Experience
PWA prompts user to ‘allow’
sending notifications. With
chrome launching ‘add to
home screen’ function the
app gets cached and users get
a direct link to the app right
from the home screen
Progressive Web Apps use
scripted proxies that sit
between the user tab and
wider internet, intercepting
and rewriting or fabricating
network request to allow
caching and offline support.
It provides instant and
reliable loading irrespective
of network connection
User Experience
User visiting via browser
enjoy app-like user
experience. Return user
get instant uptime even
on slow network.
Frequent users will be
prompted to install and
upgrade to full version
Improved Website
PWA BUSINESS VALUE
Customer Engagement

11. Platform limitations prevent PWAs
from providing re-engagement for iOS
users.
Separate login on web is required as
Facebook login and Google login
can’t fetch data from Facebook and
Google Apps.
PWAs can’t use some of the latest
hardware advancements (like
fingerprint scanner).
You are not on Play Store, You miss
significant traffic who use Play store
for their primary search.
Zero-install no app store mediation
Discoverable and Easy to share.
Works on slow internet connections.
Safe and Always up-to date
BENEFITS DRAWBACKS
Full support for PWAs are not
available in default browsers of some
of the manufacturers
Add to Home Screen and PNs.

12. CASE STUDIES

13. HOW Alibaba BENEFITTED FROM PWA
76%
14%
30%
Higher conversions across browsers
Increase in Monthly Active Users on iOS
Increase in Monthly Active Users on Android
4X higher interaction rate from Add to Home Screen

14. HOW AliExpress BENEFITTED FROM PWA
104%
74%
Increased conversion rate for new users
Increase in session duration( Time spent on page)
2X more pages visited per session per user
across all browsers.

15. HOW 5miles BENEFITTED FROM PWA
50%
30%
Decrease in bounce rate
• Increase in time spent on site
Better conversion for users who arrived
via Add to Home screen
30%

16. PWA
USER EXPERIENCE DATA
2G
NETWORK
A2HS
CACHING
HTTPS
WEB PN
SEARCH ENGINE
01
02
03
04
05
06
07
ANALYTICS.
SEO FREINDLY.
PUSH NOTIFICATION
SAFE AND SECURE
OFFLINE ACEESS.
ADD TO HOME
SCREEN
SUPPORT FOR
LOW FREQUENY
NETWORKS.
Quick Recap

17. ThankYou!
Write to me:
pradeeppatel05@outlook.com