Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Progressive Web Apps in 10 minutes - Google for India
Paul Kinlan
December 17, 2015
Programming
2
190
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
72
Be instant and engaging on the mobile web - Google Mobile for India
paulkinlan
4
210
The future of the web on mobile? - Coldfront conf
paulkinlan
5
53k
This is the Web Platform
paulkinlan
5
59k
State of the Mobile Browser
paulkinlan
3
170
The Next Evolution of Chrome Apps - Devoxx 2012
paulkinlan
3
360
Building Web Apps of the future. Tomorrow, today and yesterday.
paulkinlan
32
6.8k
Other Decks in Programming
See All in Programming
What's new in Android development tools まとめ
mkeeda
0
340
GDG Seoul IO Extended 2022 - Android Compose
taehwandev
0
320
JSのウェブフレームワークで高速なルーターを実装する方法
usualoma
1
1.8k
オブジェクト指向で挫折する初学者へ
deepoil
0
170
CSE360 Tutorial 07
javiergs
PRO
0
100
Vite でお手軽 Vue.js の環境構築
azuki
2
180
Java初心者が知っておくべきプログラミングのこと - JJUG CCC 2022 Spring
kishida
5
550
プロダクトのタイプ別 GraphQL クライアントの選び方
shozawa
0
5.1k
Node-RED 3.0 新機能紹介
utaani
0
140
BASE BANKチームの技術選定と歴史 / how to decide technology selection for startup
budougumi0617
0
1.1k
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @enterjs2022
manfredsteyer
PRO
0
180
データ分析やAIの "運用" について考える
mmorito
0
130
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
Practical Orchestrator
shlominoach
178
8.6k
Making Projects Easy
brettharned
98
4.3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
GraphQLの誤解/rethinking-graphql
sonatard
28
6.6k
Why Our Code Smells
bkeepers
PRO
324
55k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
Teambox: Starting and Learning
jrom
123
7.7k
Why You Should Never Use an ORM
jnunemaker
PRO
47
7.6k
Documentation Writing (for coders)
carmenhchung
48
2.6k
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