progressive web apps - prepare your web for 2017 (devfest ukraine 2016)
TRANSCRIPT
Progressive web apps
Jakub ŠkváraFrontend engineer @ Prague
prepare your web for 2017
“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)
#dfuaI 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?
#dfua
Progressive enhancement
#dfua
if ('serviceWorker' in navigator) {
...
}
Progressive enhancementJavaScript
#dfua
Responsive
#dfua
CSS
@media (min-width: 300px) and (max-width: 600px) {
...
}
Responsive
#dfua
Offline
#dfua
Service worker
Service workers are to progressive
web apps as XMLHttpRequest was to
AJAX
#dfua
App-Like: Application Shell
Minimal user interface
Instant loading
#dfua
HTML
<head>
<style>
.header {
...
}
</style>
</head>
Application Shell
#dfua
Web app manifest
Full-screen
Splash screen
Add to home screen
Icons
#dfua
manifest.json
{
"short_name": "My App",
"name": "My Progressive Web App",
"display": "standalone",
"icons": {
...
}
}
Web app manifest
#dfua
Re-engageable: Push notifications
Push API
Works even if browser is closed
Needs permission
#dfua
JavaScript
self.registration.showNotification('Title', {
body: 'My Notification',
icon: 'images/icon.png',
tag: 'my-tag'
});
Push notifications
#dfua
Safe
#dfua
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
#dfua
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
#dfua
Other
Geolocation
Camera + Microphone
Battery
Connection info
Bluetooth - Physical web
#dfua
Tools
developers.google.com/web/tools/
Project Hoverboard
#dfua
Examples
pwa.rocks
#dfua
Benefits
Works offline
Improves the load performance
Increases conversion rate
“Progressive web apps are our ticket
out of the tab, if only we reach for it.
“ “
#dfua
Do you want to know more?
Build a Progressive Web App with Firebase and Polymer
Friday 14:00
Offline-first progressive web apps Saturday 10:00
Going offline with Service Worker Friday 16:50
Jakub Škvára@skvaros+JakubSkvara
Questions?
Thank you!