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...
Search
Paul Kinlan
December 17, 2015
Programming
2
300
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
140
Be instant and engaging on the mobile web - Google Mobile for India
paulkinlan
4
320
The future of the web on mobile? - Coldfront conf
paulkinlan
5
56k
This is the Web Platform
paulkinlan
5
65k
State of the Mobile Browser
paulkinlan
3
210
The Next Evolution of Chrome Apps - Devoxx 2012
paulkinlan
3
400
Building Web Apps of the future. Tomorrow, today and yesterday.
paulkinlan
32
7.3k
Other Decks in Programming
See All in Programming
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
2
1.7k
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.2k
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.2k
XP, Testing and ninja testing ZOZ5
m_seki
1
180
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
1
400
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
1
560
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
280
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
2
100
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
300
defer f()とdefer fの挙動を 誤解していた話
kogamochiduki
2
160
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
440
Featured
See All Featured
Designing for Performance
lara
610
69k
Facilitating Awesome Meetings
lara
56
6.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
What's in a price? How to price your products and services
michaelherold
246
12k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Designing Experiences People Love
moore
142
24k
Visualization
eitanlees
148
16k
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