progressive web apps prepare your web for 2017 (gdg Čvut prague 20.11.2016)
Post on 16-Apr-2017
156 Views
Preview:
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)
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?
Progressive enhancement
if ('serviceWorker' in navigator) { ...}
Progressive enhancementJavaScript
Responsive
CSS
@media (min-width: 300px) and (max-width: 600px) { ...}
Responsive
App-Like: Application Shell
Minimal user interface
Instant loading
HTML
<head> <style> .header { ... } </style></head>
Application Shell
Offline
Service worker
Service workers are to progressive web
apps as XMLHttpRequest was to AJAX
JavaScript
navigator
.serviceWorker .register('/sw.js') .then(function() { ...
});
Service worker
Web app manifest
Full-screen
Splash screen
Add to home screen
Icons
manifest.json{ "short_name": "My App",
"name": "My Progressive Web App",
"display": "standalone",
"icons": {
}
}
Web app manifest
Re-engageable: Push notifications
Push API
Works even if browser is closed
Needs permission
JavaScript
self.registration.showNotification('Title', {
body: 'My Notification',
icon: 'images/icon.png',
tag: 'my-tag'
});
Push notifications
Safe
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
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
Other
Geolocation
Camera + Microphone
Battery
Connection info
Bluetooth - Physical web
Tools
developers.google.com/web/tools/
Examples
pwa.rocks
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.
“ “
Jakub Škvára@skvaros+JakubSkvara
Questions?
Thank you!
top related