progressive web apps prepare your web for 2017 (gdg Čvut prague 20.11.2016)
TRANSCRIPT
![Page 1: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/1.jpg)
Progressive web apps
Jakub ŠkváraFrontend engineer @ Prague
prepare your web for 2017
![Page 2: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/2.jpg)
“Remember back when AJAX
completely changed what was
possible in the desktop web?
Progressive web apps are that
same fundamental shift for
the mobile web.
““
-Rahul Row-Chowdhury
(Google’s product lead for Chrome and the Web platform)
![Page 3: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/3.jpg)
I FELT PRETTY CLEVER UNTIL I REALIZED I’D INVENTED WEBPAGES.
INSTALLING THINGS HAS GOTTEN SO FAST AND PAINLESS.WHY NOT SKIP IT ENTIRELY, AND MAKE A PHONE THAT HAS EVERY APP “INSTALLED” ALREADY AND JUST DOWNLOADS AND RUNS THEM ON THE FLY?
![Page 4: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/4.jpg)
Progressive enhancement
![Page 5: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/5.jpg)
if ('serviceWorker' in navigator) { ...}
Progressive enhancementJavaScript
![Page 6: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/6.jpg)
Responsive
![Page 7: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/7.jpg)
CSS
@media (min-width: 300px) and (max-width: 600px) { ...}
Responsive
![Page 8: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/8.jpg)
App-Like: Application Shell
Minimal user interface
Instant loading
![Page 9: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/9.jpg)
HTML
<head> <style> .header { ... } </style></head>
Application Shell
![Page 10: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/10.jpg)
Offline
![Page 11: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/11.jpg)
Service worker
Service workers are to progressive web
apps as XMLHttpRequest was to AJAX
![Page 12: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/12.jpg)
JavaScript
navigator
.serviceWorker .register('/sw.js') .then(function() { ...
});
Service worker
![Page 13: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/13.jpg)
Web app manifest
Full-screen
Splash screen
Add to home screen
Icons
![Page 14: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/14.jpg)
manifest.json{ "short_name": "My App",
"name": "My Progressive Web App",
"display": "standalone",
"icons": {
}
}
Web app manifest
![Page 15: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/15.jpg)
Re-engageable: Push notifications
Push API
Works even if browser is closed
Needs permission
![Page 16: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/16.jpg)
JavaScript
self.registration.showNotification('Title', {
body: 'My Notification',
icon: 'images/icon.png',
tag: 'my-tag'
});
Push notifications
![Page 17: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/17.jpg)
Safe
![Page 18: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/18.jpg)
RAIL performance model
Response
- respond in under 100 ms
Animation
- every 16 ms = 60 fps
Idle - maximize idle time - 50 ms chunks
Load - deliver content under 1000 ms
![Page 19: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/19.jpg)
PRPL pattern
Push resources for initial route
Render the initial route ASAP
Pre-cache code for remaining routes
Lazy-load & create next routes on-demand
![Page 20: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/20.jpg)
Other
Geolocation
Camera + Microphone
Battery
Connection info
Bluetooth - Physical web
![Page 21: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/21.jpg)
Tools
developers.google.com/web/tools/
![Page 22: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/22.jpg)
Examples
pwa.rocks
![Page 23: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/23.jpg)
Benefits
Works offline
Improves the load performance
Increases conversion rate
![Page 24: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/24.jpg)
“Progressive web apps are our ticket
out of the tab, if only we reach for it.
“ “
![Page 25: Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)](https://reader031.vdocuments.site/reader031/viewer/2022030317/586e8c271a28aba0038b8351/html5/thumbnails/25.jpg)
Jakub Škvára@skvaros+JakubSkvara
Questions?
Thank you!