Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Progressive Web Apps in 10 minutes - Google for India
Search
Paul Kinlan
December 17, 2015
Programming
2
230
Progressive Web Apps in 10 minutes - Google for India
Paul Kinlan
December 17, 2015
Tweet
Share
More Decks by Paul Kinlan
See All by Paul Kinlan
[this.javascript] State of Chrome
paulkinlan
0
110
Be instant and engaging on the mobile web - Google Mobile for India
paulkinlan
4
250
The future of the web on mobile? - Coldfront conf
paulkinlan
5
55k
This is the Web Platform
paulkinlan
5
63k
State of the Mobile Browser
paulkinlan
3
190
The Next Evolution of Chrome Apps - Devoxx 2012
paulkinlan
3
380
Building Web Apps of the future. Tomorrow, today and yesterday.
paulkinlan
32
7.1k
Other Decks in Programming
See All in Programming
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
210
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Fragment Composition of GraphQL
quramy
7
1k
Code Reviews
bkuhlmann
4
890
Fast JSX: Don't clone props object #28768
yossydev
1
130
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
360
Hanami and htmx
bkuhlmann
0
210
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
380
PHPはいつから死んでいるかの調査
chiroruxx
1
400
2 週間で Twitter Bot を作ってみた
contour_gara
0
630
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
390
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Side Projects
sachag
451
41k
Practical Orchestrator
shlominoach
182
9.7k
How to name files
jennybc
65
93k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
How GitHub (no longer) Works
holman
304
140k
Typedesign – Prime Four
hannesfritz
36
2.1k
Transcript
Paul Kinlan Developer Advocate
A Progressive Web App is Discoverable by all Loads quickly,
even on 2G Works offline Fast and smooth Progressively installed Easy to re-engage with
Installable Performant Engaging
Add to home screen Installable
Splash screen and theme color Installable
<link rel=“manifest" href="manifest.json"> HTML { "short_name": "Flipkart Lite", "start_url": "/",
"display": "standalone", "background_color": "#2196F3", "theme_color": "#2196F3", "icons": [{ "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" }], "orientation": "portrait" } JSON Manifest Installable
Activated Error Idle Active Terminated Load Service Worker Adds app-like
lifecycle to a page Wakes up only when the OS says Only responds to system events Installable
Install required assets Activated You manage what is “installed” and
how it is cached. Install Get files /index.html /styles/main.css /scripts/app.js Installable
Offline and resilient You are in control Client-side proxy Manage
every request Service Worker Web Server Local Cache Installable
Fast even on 2G and cost effective Service Worker Local
Cache Web Server Performant
DPR: Screen Density Viewport-Width: Mobile width Save-data:
User wants to save data downlinkMax: Network speed Make intelligent decisions on sever No image No videos Low res image downlinkMax < 50kp Save-data = 1 DPR = 0.5 Web Server Performant
Automatically fast ModPagespeedInheritVHostConfig on ModPagespeedRewriteLevel OptimizeForBandwidth <VirtualHost *:80> ServerName prioritize_above_the_fold.example.com
ModPagespeedEnableFilters inline_javascript,prioritize_critical_css,inline_preview_images </VirtualHost> <VirtualHost *:80> ServerName preserve_css_urls_off.example.com ModPagespeedCssPreserveURLs off </Directory> <VirtualHost *:80> ServerName core.example.com ModPagespeedRewriteLevel CoreFilters </Directory> Performant
Push notifications Works when browser closed Lightweight (save’s battery by
using GCM) Native notifications Service Worker Push Service (GCM) Web Server Engaging
Power of push notifications increase in time spent for users
visiting via push notifications 72% increase in average spend per visit by users arriving via a push notification 26% Engaging
350M Push notifications delivered every day Engaging
Bluetooth Permissions Network Information Microphone Camera And there is
more Native Sharing Location Engaging
Progressive Web Apps Discoverable by all Loads quickly, even on
2G Works offline Fast and smooth Progressively installed Easy to re-engage with
The web is critical to your mobile strategy
Thank You
New Billion Users IDG Ventures Culturealley Google Nishant Patni Sudhir
Sethi Jay Kota Snapdeal Anand Chandrasekaran
Thank You