SlideShare une entreprise Scribd logo
1  sur  54
Télécharger pour lire hors ligne
@AdityaPunjani
Offline-First Progressive
Web Apps
Mobile is key focus area.
• No. of new internet users in India in the last year
alone was one third of United States population.
• 34.8% Internet Penetration.
• 81% of First Time Internet Users are only on
Mobile.
• India to become 2nd largest smart phone market
by 2017.
Source : Mary Meeker’s 2016 Internet Trends Report & Morgan Stanley Report
• Poor User Experience.
• Low Performance.
• Lack of Engagement tools.
Why we shut down our mobile website?
Mobile Web
No storage
requirements
Instant Loading
(No Install Friction) Always up-to-date
Challenges
With Mobile
• Low-end Device Profiles
• Slow Internet Speeds
• Flaky Network connectivity
• Browser Navigation Failures
• Network Congestion
• Low Signal
• Battery Saver Mode
• Thermal CPU Throttling
• Limited Carrier Capacity
• Server Outage
• ISP failure
Unpredictable Conditions
Learnings from Native App.
Architecture
Goals
• App Like Experience
• Build for Offline.
• Optimize for repeat visits
JavaScript (React.js) SPA
+
App Shells
App Shells
Route Defined Route To Render Shell
/:slug/p/:itemid → /slug/p/itemId → Product
/(.*)/pr → /splat/pr → Browse
/search → /search → Search
/accounts/(.*) → /accounts/splat → Accounts
Routes → HTMLApp Shells
• Build Time heavy lifting.
• Lightning fast Response
times.
• Long-term cache.
• Reused across URLs.
• Perceived Performance.
• Fast and smooth
Navigations.
• Rich Interactivity.
• App Like polished
experience.
Single Page App App Shells
Service Worker
• Highly Programmable Low level primitive.
• Progressive Network Proxy in browser.
• Sophisticated Caching policies.
• Lives beyond the Browser Scope.
App Shells - Fastest Strategy
Offline Mode
Strategy
SW-Toolbox
Single Page App - Drawbacks
• JS bundle is huge.
• CSS bundle is huge.
• Bad first load Performance.  
Multiple SPAs Architecture
Each SPA : JS Bundle + CSS Bundle + HTML Shells
Benefits of Multiple SPAs
• Smaller JS Bundles.
• Smaller CSS Bundles.
• Decoupled Deployments.
• Navigations between SPAs allow SW
update, Cache clean up, Heap Memory
Clearing.
Home Screen users
covert 70% more.
3x more Home Screen
additions.
40% more repeat visits.
Biz Requirements
• Cross browser support
• SEO 
Phase II
SEO with App Shells
• Build a cross browser app.
• Web Crawlers do execute JS.
• Keep JS size small.
• Embed SEO critical content in the
App Shells.
• Test using Webmaster tools.
Cross Browser
• Build for the Lowest common Browser engine.
• Optimize for Most common Browser.
• Polyfill / Feature detect every API.
• Tone down Interactions / Animations for older browsers.
• SW as a Progressive Network Proxy.
• PostCSS - Autoprefix and polyfills CSS.
• Conditionally serve JS Polyfills.
PROGRESSIVE
WEB APP
Performance
Phase III • JS Bundle Size growing with
new features.
• Bounce Rate increasing.
Route Based Chunking
(Code - Splitting)
Route Based Chunking
• Prioritized JS Downloads.
• Execute only critical JS.
• Cache-Invalidate only the changed JS bundle.
SPA
App Shells
Route Chunks
0s 2s 4s 6s 8s
First Content Paint First Meaningful Paint
Performance
Requirements
• Extreme Scalability
• Reduce # of network requests
• Fully fault tolerant Web App.
BBD
Offline - First
• Network Resilience: Offline is not an
exception but the norm.
• Serving Strategy: Serve all requests from the
cache (offline) before going to the network.
PRE-BBD Architecture
API Requests
Offline-First
API Requests
Offline-First Architecture
Repeat Visit
SPA
App Shells
Route Chunks
Offline-First
0s 2s 4s 6s 8s
First Paint Meaningful Paint
Performance
“There are only two hard things in Computer
Science: cache invalidation and naming
things.” -- Phil Karlton.
Cache Invalidation
• MaxAgeSeconds based TTL.
• Cache Versions
• Kill Switch
Kill Switch
• Global Cache Version
• No-Cache, max-age=0 HTTP headers on SW.js
• SW self.skipWaiting()
• SW self.clients.claim()
Emergency - Refresh
Offline-First
Network Resilience Reliable Performance Robust Application
Reduced Bounce Rate.
2x BAU Conversion during BBD.
Zero User Perceived Downtime.
Thank You!
@AdityaPunjani

Contenu connexe

Tendances

Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)
Zhentian Wan
 

Tendances (20)

Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Pwa.pptx
Pwa.pptxPwa.pptx
Pwa.pptx
 
Guidance on how to develop a progressive web app using react native!
Guidance on how to develop a progressive web app using react native!Guidance on how to develop a progressive web app using react native!
Guidance on how to develop a progressive web app using react native!
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Progressive Web Apps 1. keynote
Progressive Web Apps 1. keynoteProgressive Web Apps 1. keynote
Progressive Web Apps 1. keynote
 
Introduction to Progressive Web App
Introduction to Progressive Web AppIntroduction to Progressive Web App
Introduction to Progressive Web App
 
From AMP to PWA
From AMP to PWAFrom AMP to PWA
From AMP to PWA
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Building Progressive Web Apps (Kyle Buchanan)
Building Progressive Web Apps (Kyle Buchanan)Building Progressive Web Apps (Kyle Buchanan)
Building Progressive Web Apps (Kyle Buchanan)
 
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
 
Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
 
Progressive Web Apps are here!
Progressive Web Apps are here!Progressive Web Apps are here!
Progressive Web Apps are here!
 
Progressive Web Apps For Startups
Progressive Web Apps For StartupsProgressive Web Apps For Startups
Progressive Web Apps For Startups
 
Progressive web app
Progressive web appProgressive web app
Progressive web app
 
Progressive Web-App (PWA)
Progressive Web-App (PWA)Progressive Web-App (PWA)
Progressive Web-App (PWA)
 
Next Generation Mobile Web - PWA (Progressive Web App)
Next Generation Mobile Web  - PWA (Progressive Web App)Next Generation Mobile Web  - PWA (Progressive Web App)
Next Generation Mobile Web - PWA (Progressive Web App)
 
Progressive Web Apps and the Windows Ecosystem [Build 2017]
Progressive Web Apps and the Windows Ecosystem [Build 2017]Progressive Web Apps and the Windows Ecosystem [Build 2017]
Progressive Web Apps and the Windows Ecosystem [Build 2017]
 

En vedette

En vedette (14)

Offline First Applications
Offline First ApplicationsOffline First Applications
Offline First Applications
 
Hitting the couch madrid js
Hitting the couch madrid jsHitting the couch madrid js
Hitting the couch madrid js
 
Chris Wilson: Progressive Web Apps
Chris Wilson: Progressive Web AppsChris Wilson: Progressive Web Apps
Chris Wilson: Progressive Web Apps
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Progressive web apps - prepare your web for 2017 (Devfest Ukraine 2016)
Progressive web apps - prepare your web for 2017 (Devfest Ukraine 2016)Progressive web apps - prepare your web for 2017 (Devfest Ukraine 2016)
Progressive web apps - prepare your web for 2017 (Devfest Ukraine 2016)
 
Turku <3 Frontend - Progressive Web Apps, Web and Apps
Turku <3 Frontend - Progressive Web Apps, Web and AppsTurku <3 Frontend - Progressive Web Apps, Web and Apps
Turku <3 Frontend - Progressive Web Apps, Web and Apps
 
Progressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejorProgressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejor
 
Estudio jurídico doctrinario pension alimenticia
Estudio jurídico doctrinario pension alimenticiaEstudio jurídico doctrinario pension alimenticia
Estudio jurídico doctrinario pension alimenticia
 
Progressive web apps
 Progressive web apps Progressive web apps
Progressive web apps
 
Introducción a las Progressive web apps
Introducción a las Progressive web appsIntroducción a las Progressive web apps
Introducción a las Progressive web apps
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Why Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your BusinessWhy Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your Business
 
The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017
 

Similaire à Offline-First Progressive Web Apps

Benefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular jsBenefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular js
Harbinger Systems - HRTech Builder of Choice
 

Similaire à Offline-First Progressive Web Apps (20)

[TTT Meetup] Enhance mobile app testing with performance-centric strategies (...
[TTT Meetup] Enhance mobile app testing with performance-centric strategies (...[TTT Meetup] Enhance mobile app testing with performance-centric strategies (...
[TTT Meetup] Enhance mobile app testing with performance-centric strategies (...
 
Benefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular jsBenefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular js
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...
 
Decoupled Architecture and WordPress
Decoupled Architecture and WordPressDecoupled Architecture and WordPress
Decoupled Architecture and WordPress
 
The Art of Mobile Performance (Mobiconf 2015)
The Art of Mobile Performance (Mobiconf 2015)The Art of Mobile Performance (Mobiconf 2015)
The Art of Mobile Performance (Mobiconf 2015)
 
introduction to web engineering.pdf
introduction to web engineering.pdfintroduction to web engineering.pdf
introduction to web engineering.pdf
 
Offline web app - Let's kill the downasaur
Offline web app - Let's kill the downasaurOffline web app - Let's kill the downasaur
Offline web app - Let's kill the downasaur
 
introduction to web engineering.pptx
introduction to web engineering.pptxintroduction to web engineering.pptx
introduction to web engineering.pptx
 
Basic fundamentals of web application development
Basic fundamentals of web application developmentBasic fundamentals of web application development
Basic fundamentals of web application development
 
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
 
Oscon2014 Netflix API - Top 10 Lessons Learned
Oscon2014 Netflix API - Top 10 Lessons LearnedOscon2014 Netflix API - Top 10 Lessons Learned
Oscon2014 Netflix API - Top 10 Lessons Learned
 
A year with progressive web apps! #webinale
A year with progressive web apps! #webinaleA year with progressive web apps! #webinale
A year with progressive web apps! #webinale
 
Modern Web Applications
Modern Web ApplicationsModern Web Applications
Modern Web Applications
 
Finding the sweet spot - blending the best of native and web
Finding the sweet spot - blending the best of native and webFinding the sweet spot - blending the best of native and web
Finding the sweet spot - blending the best of native and web
 
How to be Successful with Responsive Sites (Koombea & NGINX) - English
How to be Successful with Responsive Sites (Koombea & NGINX) - EnglishHow to be Successful with Responsive Sites (Koombea & NGINX) - English
How to be Successful with Responsive Sites (Koombea & NGINX) - English
 
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page Applications
 
Mobile Performance Testing
Mobile Performance TestingMobile Performance Testing
Mobile Performance Testing
 
Performance testing of mobile apps
Performance testing of mobile appsPerformance testing of mobile apps
Performance testing of mobile apps
 
Synapse india reviews on cross plateform mobile apps development
Synapse india reviews on cross plateform mobile apps developmentSynapse india reviews on cross plateform mobile apps development
Synapse india reviews on cross plateform mobile apps development
 

Dernier

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Dernier (20)

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 

Offline-First Progressive Web Apps