SlideShare a Scribd company logo
Progressive Web Apps:
Bridging The Gap
Nitheesh T Ganesh
iamntg@gmail.com
Contents
 Overview of PWA
 Native Apps Vs PWA
 PWA Baseline Implementation
 Case Studies
 Lacking Features
 PWA - Wish lists
 Conclusion
Overview of PWA
Overview
 Progressive Web Apps are user experiences
that have the reach of the web
 Reliable - Load instantly and never show the
downasaur
 Fast - Respond quickly to user interactions
 Engaging - Feel like a natural app on the device
Overview
Native Apps Vs PWA
Native Apps Vs PWA
Native PWA
o Easy to launch
o Immediate Value
o Offline
o Slow Connections
o Push Notifications
o Device-Access
o No installation
o Cross-Platform
o Easy Deployment
o Easy to update
o Searchable
o Links/ Bookmarks
Native Apps Vs PWA
 Native apps face two gigantic hurdles trying to compete with PWAs:
 Need to build only one app that works for android, iOS and web.
 App install friction is suffocating native apps.
Native Apps Vs PWA
90%
72%
60%
45%
40%
25%
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
USERS
 It takes about 6 clicks to install a
native app
 Every Step Costs You around 20%
of Users
Native Apps Vs PWA
 Why Native Apps are a Gamble?
 60% of apps in the Google Play/App store have never been downloaded.
 The average user downloads less than 3 apps per month.
 Half of US smartphone users download zero apps per month.
 94% of app revenue comes from 1% of publishers, and users spend 80% of their time using
just 5 apps.
 80% of users who download an app fail to become active users.
PWA Baseline Implementation
PWA Baseline Implementation
Required Recommended
o HTTPS + Service Worker
o Web App Manifest
o App shell caching
o Splash screen
o Smooth navigation
o Cross browser support
o Push notifications
o Advanced Offline Support
PWA Baseline Implementation
 Client-side proxy written in JavaScript
 Can intercept requests
 Can decide to go idle or to re-activate
themselves
 Safari and Edge support is still in Development
 Must use HTTPS
Service Workers
PWA Baseline Implementation
 Shell is cached using service worker
 Uses cached data from indexedDB or any
other web storage
 Updates cached view with online data when
loaded
 Cached shell can load instantly on repeat
visits.
App Shell
PWA Baseline Implementation
 Rich native presence on user’s home screen
 Launch app in full-screen mode
 Control the screen orientation for optimal
viewing
 Define “splash screen” launch, theme colour
for site
Web App Manifests {
"short_name": "My Cool App",
"name": "My Totally Cool Application",
"icons":[
{"src": "launcher-icon-3x.png",
"sizes": "192x192",
"type": "image/png"},
{"src": "launcher-splash.png",
"sizes": "512x512",
"type": "image/png"}],
"start_url": "index.html",
"display": "standalone",
"background_color" : "#aeaeae",
"theme_color" : "#aeaeae",
"orientation" : "landscape"
}
PWA Baseline Implementation
 User who visits 2x in a given time
period will be prompted with “add
to home screen”
 One tap to add to home screen
 Opens full screen by showing splash
screen on load (no URL bar)
Web App Manifests
PWA Baseline Implementation
 Show content when on flaky networks
 Store data locally using service workers
 Local Stroage, WebSQL or IndexedDB
 Use an abstraction, like PouchDB
 Caching Pattern
 Cache only or Network only
 Try cache first, then network
 Try network first, then cache
Offline
PWA Baseline Implementation
 App can request Background Sync
 Service Worker triggers Sync Event when it is
appropriate (Network, Battery…)
 Also plans for periodic Background Sync
Background Sync
PWA Baseline Implementation
 System level notifications, like apps
 Register/Receive push notification using service worker
 Ask to notify users with specific information
 Can send notifications even when page closed
Push Notifications
PWA Baseline Implementation
 For first-time visitors, load pages in <10s on 3G connections
 For repeat visitors, instant loading of page in <500 milliseconds
 Always scrolling at 60 frames/second
 Content shouldn’t jump as images are loaded
Instant loading and smooth navigation
Case Studies
Case Studies
 3x time spent on site, from 1 minute to 3.5 minutes
 Seeing 40% visitors return week over week
 70% greater conversion rate among those arriving via “Add to
Homescreen”
 3X lower data usage
Flipkart
Case Studies
 76% more web conversions
 30% more monthly active users on Android, 14% more on iOS
 4X higher interaction rate from “Add to Homescreen”
Alibaba
Case Studies
 38% more conversions
 40% lower bounce rate
 10% longer average session
 30% faster page load
Housing.com
Lacking Features
Lacking Features
 Contacts, calendar and browser bookmarks access (lack of access to these could be viewed
as a feature by privacy-conscious users)
 Alarms
 Telephony features - intercept SMS or calls, send SMS/MMS, get the user's phone number,
read voice mail, make phone calls without the Dialler dialog
 Low-level access to some hardware features and sensors: flashlight, atmospheric pressure
sensor
 System access: Task management, modifying system settings, logs
PWA - Wish lists
PWA - Wishlists
 Automatic grant of permissions for Push notification when added to home screen.
 Events to instrument uninstalls
 Deduping between native and web app from the same publisher (Push notification)
 Deep linking into the installed web app
 Some equivalent of Device ID
 More top browsers including progressive features
 Discoverability on the store as well on the user’s phone
Conclusion
Conclusion
If you target the Next Billion Users, PWAs are the way to go
If you are planning for a product, Traditionally, you’d have to build
You can, right now, in most cases, just build
And once Safari implements Service Worker, it will be just
Desktop/Mobile web + Native Android + Native iOS
PWA + Native iOS app
PWA
Thank You!

More Related Content

PDF
Building a Progressive Web App
ODP
Introduction to Progressive Web Apps (PWA)
PPTX
Progressive web app
PPTX
Pwa.pptx
PPTX
Progressive Web Apps(PWA)
PDF
Introduction to Progressive web app (PWA)
PPTX
Introduction to Progressive Web App
PPTX
PWA - Progressive Web App
Building a Progressive Web App
Introduction to Progressive Web Apps (PWA)
Progressive web app
Pwa.pptx
Progressive Web Apps(PWA)
Introduction to Progressive web app (PWA)
Introduction to Progressive Web App
PWA - Progressive Web App

What's hot (20)

PPTX
Progressive Web App
PDF
Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...
PPTX
Pwa demystified
PDF
Progressive Web Applications
PPTX
Progressive Web-App (PWA)
PPTX
Progressive Web App
PDF
Progressive web apps
PDF
Progressive Web Apps
PPTX
Appium ppt
PPTX
Why Progressive Web App is what you need for your Business
PPTX
Full stack development
PPTX
Introduction to Performance Testing & Loadrunner
PPTX
Nodejs Session01
PPTX
Introduction to Node js
PDF
Laravel for e commerce build small store now and scale big later
PPTX
Introduction to node.js
PDF
Introduction to Magento PWA
PDF
9 reasons why low code no-code platform is the best choice for increasing ado...
PPTX
Part One: Building Web Apps with the MERN Stack
PDF
Web Services (SOAP, WSDL, UDDI)
Progressive Web App
Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...
Pwa demystified
Progressive Web Applications
Progressive Web-App (PWA)
Progressive Web App
Progressive web apps
Progressive Web Apps
Appium ppt
Why Progressive Web App is what you need for your Business
Full stack development
Introduction to Performance Testing & Loadrunner
Nodejs Session01
Introduction to Node js
Laravel for e commerce build small store now and scale big later
Introduction to node.js
Introduction to Magento PWA
9 reasons why low code no-code platform is the best choice for increasing ado...
Part One: Building Web Apps with the MERN Stack
Web Services (SOAP, WSDL, UDDI)
Ad

Viewers also liked (20)

PDF
Getting Started with Progressive Web Apps
PDF
PWA e Hybrid App VS Native
PDF
From AMP to PWA
PPTX
PWA 101
PDF
Progressive web apps
PDF
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
PDF
Anatomy of a Progressive Web App
PDF
Progressive Web Apps for Beginners
PDF
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
PDF
Angular Connect
PPTX
San Diego Daily Transcript - PR Newswire Event July 2009
PPT
“How can we face Facebook?”
PDF
The Hitchhiker's Guide to Building a Progressive Web App
PDF
Progressive web apps
PDF
Demystifying progressive web apps
PDF
Progressive Web Apps – the return of the web?
PDF
Progressive Web Apps - NPD Meet
PPTX
Progressive Web Apps - Lightning Talk
PDF
Introducción a las Progressive web apps
PDF
Building Progressive Web Apps (Kyle Buchanan)
Getting Started with Progressive Web Apps
PWA e Hybrid App VS Native
From AMP to PWA
PWA 101
Progressive web apps
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Anatomy of a Progressive Web App
Progressive Web Apps for Beginners
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Angular Connect
San Diego Daily Transcript - PR Newswire Event July 2009
“How can we face Facebook?”
The Hitchhiker's Guide to Building a Progressive Web App
Progressive web apps
Demystifying progressive web apps
Progressive Web Apps – the return of the web?
Progressive Web Apps - NPD Meet
Progressive Web Apps - Lightning Talk
Introducción a las Progressive web apps
Building Progressive Web Apps (Kyle Buchanan)
Ad

Similar to Progressive Web Apps (20)

PPTX
Progressivewebapps by sheddy nathan for isdev2017
PPTX
Basic Understanding of Progressive Web Apps
PPTX
Introduction of Progressive Web App
PPTX
Progressive Web APP ( PWA )
PDF
WTF R PWAs?
PPTX
PWA demystified
PPTX
Progressive web application
PPTX
PWA basics for developers
PPTX
PWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
PDF
How OutSystems Accelerates PWA Development
PPTX
Progressive web app testing
PDF
Checklist for progressive web app development
PDF
Progressive Web App
PDF
Progressive Web Apps –The Future of Apps
PPTX
pwapresentation1-180803034649.pptxwebapps
PPTX
Why progressive apps for WordPress - WordSesh 2020
PPTX
PWAs overview
PDF
Progressive Web Apps
PDF
Planning Your Progressive Web App
Progressivewebapps by sheddy nathan for isdev2017
Basic Understanding of Progressive Web Apps
Introduction of Progressive Web App
Progressive Web APP ( PWA )
WTF R PWAs?
PWA demystified
Progressive web application
PWA basics for developers
PWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
How OutSystems Accelerates PWA Development
Progressive web app testing
Checklist for progressive web app development
Progressive Web App
Progressive Web Apps –The Future of Apps
pwapresentation1-180803034649.pptxwebapps
Why progressive apps for WordPress - WordSesh 2020
PWAs overview
Progressive Web Apps
Planning Your Progressive Web App

Recently uploaded (20)

PPTX
Online Work Permit System for Fast Permit Processing
PDF
top salesforce developer skills in 2025.pdf
PDF
System and Network Administration Chapter 2
PDF
Internet Downloader Manager (IDM) Crack 6.42 Build 41
PPTX
ai tools demonstartion for schools and inter college
PDF
Wondershare Filmora 15 Crack With Activation Key [2025
PDF
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
PDF
Flood Susceptibility Mapping Using Image-Based 2D-CNN Deep Learnin. Overview ...
PPTX
CHAPTER 2 - PM Management and IT Context
PDF
How to Choose the Right IT Partner for Your Business in Malaysia
PDF
Odoo Companies in India – Driving Business Transformation.pdf
PPT
Introduction Database Management System for Course Database
PDF
Why TechBuilder is the Future of Pickup and Delivery App Development (1).pdf
PPTX
history of c programming in notes for students .pptx
PDF
Softaken Excel to vCard Converter Software.pdf
PPTX
ISO 45001 Occupational Health and Safety Management System
PPTX
Oracle E-Business Suite: A Comprehensive Guide for Modern Enterprises
PDF
Adobe Illustrator 28.6 Crack My Vision of Vector Design
PDF
How to Migrate SBCGlobal Email to Yahoo Easily
PDF
2025 Textile ERP Trends: SAP, Odoo & Oracle
Online Work Permit System for Fast Permit Processing
top salesforce developer skills in 2025.pdf
System and Network Administration Chapter 2
Internet Downloader Manager (IDM) Crack 6.42 Build 41
ai tools demonstartion for schools and inter college
Wondershare Filmora 15 Crack With Activation Key [2025
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
Flood Susceptibility Mapping Using Image-Based 2D-CNN Deep Learnin. Overview ...
CHAPTER 2 - PM Management and IT Context
How to Choose the Right IT Partner for Your Business in Malaysia
Odoo Companies in India – Driving Business Transformation.pdf
Introduction Database Management System for Course Database
Why TechBuilder is the Future of Pickup and Delivery App Development (1).pdf
history of c programming in notes for students .pptx
Softaken Excel to vCard Converter Software.pdf
ISO 45001 Occupational Health and Safety Management System
Oracle E-Business Suite: A Comprehensive Guide for Modern Enterprises
Adobe Illustrator 28.6 Crack My Vision of Vector Design
How to Migrate SBCGlobal Email to Yahoo Easily
2025 Textile ERP Trends: SAP, Odoo & Oracle

Progressive Web Apps

  • 1. Progressive Web Apps: Bridging The Gap Nitheesh T Ganesh iamntg@gmail.com
  • 2. Contents  Overview of PWA  Native Apps Vs PWA  PWA Baseline Implementation  Case Studies  Lacking Features  PWA - Wish lists  Conclusion
  • 4. Overview  Progressive Web Apps are user experiences that have the reach of the web  Reliable - Load instantly and never show the downasaur  Fast - Respond quickly to user interactions  Engaging - Feel like a natural app on the device
  • 7. Native Apps Vs PWA Native PWA o Easy to launch o Immediate Value o Offline o Slow Connections o Push Notifications o Device-Access o No installation o Cross-Platform o Easy Deployment o Easy to update o Searchable o Links/ Bookmarks
  • 8. Native Apps Vs PWA  Native apps face two gigantic hurdles trying to compete with PWAs:  Need to build only one app that works for android, iOS and web.  App install friction is suffocating native apps.
  • 9. Native Apps Vs PWA 90% 72% 60% 45% 40% 25% 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% USERS  It takes about 6 clicks to install a native app  Every Step Costs You around 20% of Users
  • 10. Native Apps Vs PWA  Why Native Apps are a Gamble?  60% of apps in the Google Play/App store have never been downloaded.  The average user downloads less than 3 apps per month.  Half of US smartphone users download zero apps per month.  94% of app revenue comes from 1% of publishers, and users spend 80% of their time using just 5 apps.  80% of users who download an app fail to become active users.
  • 12. PWA Baseline Implementation Required Recommended o HTTPS + Service Worker o Web App Manifest o App shell caching o Splash screen o Smooth navigation o Cross browser support o Push notifications o Advanced Offline Support
  • 13. PWA Baseline Implementation  Client-side proxy written in JavaScript  Can intercept requests  Can decide to go idle or to re-activate themselves  Safari and Edge support is still in Development  Must use HTTPS Service Workers
  • 14. PWA Baseline Implementation  Shell is cached using service worker  Uses cached data from indexedDB or any other web storage  Updates cached view with online data when loaded  Cached shell can load instantly on repeat visits. App Shell
  • 15. PWA Baseline Implementation  Rich native presence on user’s home screen  Launch app in full-screen mode  Control the screen orientation for optimal viewing  Define “splash screen” launch, theme colour for site Web App Manifests { "short_name": "My Cool App", "name": "My Totally Cool Application", "icons":[ {"src": "launcher-icon-3x.png", "sizes": "192x192", "type": "image/png"}, {"src": "launcher-splash.png", "sizes": "512x512", "type": "image/png"}], "start_url": "index.html", "display": "standalone", "background_color" : "#aeaeae", "theme_color" : "#aeaeae", "orientation" : "landscape" }
  • 16. PWA Baseline Implementation  User who visits 2x in a given time period will be prompted with “add to home screen”  One tap to add to home screen  Opens full screen by showing splash screen on load (no URL bar) Web App Manifests
  • 17. PWA Baseline Implementation  Show content when on flaky networks  Store data locally using service workers  Local Stroage, WebSQL or IndexedDB  Use an abstraction, like PouchDB  Caching Pattern  Cache only or Network only  Try cache first, then network  Try network first, then cache Offline
  • 18. PWA Baseline Implementation  App can request Background Sync  Service Worker triggers Sync Event when it is appropriate (Network, Battery…)  Also plans for periodic Background Sync Background Sync
  • 19. PWA Baseline Implementation  System level notifications, like apps  Register/Receive push notification using service worker  Ask to notify users with specific information  Can send notifications even when page closed Push Notifications
  • 20. PWA Baseline Implementation  For first-time visitors, load pages in <10s on 3G connections  For repeat visitors, instant loading of page in <500 milliseconds  Always scrolling at 60 frames/second  Content shouldn’t jump as images are loaded Instant loading and smooth navigation
  • 22. Case Studies  3x time spent on site, from 1 minute to 3.5 minutes  Seeing 40% visitors return week over week  70% greater conversion rate among those arriving via “Add to Homescreen”  3X lower data usage Flipkart
  • 23. Case Studies  76% more web conversions  30% more monthly active users on Android, 14% more on iOS  4X higher interaction rate from “Add to Homescreen” Alibaba
  • 24. Case Studies  38% more conversions  40% lower bounce rate  10% longer average session  30% faster page load Housing.com
  • 26. Lacking Features  Contacts, calendar and browser bookmarks access (lack of access to these could be viewed as a feature by privacy-conscious users)  Alarms  Telephony features - intercept SMS or calls, send SMS/MMS, get the user's phone number, read voice mail, make phone calls without the Dialler dialog  Low-level access to some hardware features and sensors: flashlight, atmospheric pressure sensor  System access: Task management, modifying system settings, logs
  • 27. PWA - Wish lists
  • 28. PWA - Wishlists  Automatic grant of permissions for Push notification when added to home screen.  Events to instrument uninstalls  Deduping between native and web app from the same publisher (Push notification)  Deep linking into the installed web app  Some equivalent of Device ID  More top browsers including progressive features  Discoverability on the store as well on the user’s phone
  • 30. Conclusion If you target the Next Billion Users, PWAs are the way to go If you are planning for a product, Traditionally, you’d have to build You can, right now, in most cases, just build And once Safari implements Service Worker, it will be just Desktop/Mobile web + Native Android + Native iOS PWA + Native iOS app PWA