Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)
Similar to Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016) (20)
Recently uploaded
Recently uploaded (20)
Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)
- 1. Progressive web apps Jakub Škvára Frontend engineer @ Prague prepare your web for 2017
- 2. “ 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)
- 3. 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?
- 5. if ('serviceWorker' in navigator) { ... } Progressive enhancement JavaScript
- 6. Responsive
- 7. CSS @media (min-width: 300px) and (max-width: 600px) { ... } Responsive
- 8. App-Like: Application Shell Minimal user interface Instant loading
- 10. Offline
- 11. Service worker Service workers are to progressive web apps as XMLHttpRequest was to AJAX
- 12. JavaScript navigator .serviceWorker .register('/sw.js') .then(function() { ... }); Service worker
- 13. Web app manifest Full-screen Splash screen Add to home screen Icons
- 14. manifest.json { "short_name": "My App", "name": "My Progressive Web App", "display": "standalone", "icons": { } } Web app manifest
- 15. Re-engageable: Push notifications Push API Works even if browser is closed Needs permission
- 16. JavaScript self.registration.showNotification('Title', { body: 'My Notification', icon: 'images/icon.png', tag: 'my-tag' }); Push notifications
- 17. Safe
- 18. 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
- 19. 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
- 20. Other Geolocation Camera + Microphone Battery Connection info Bluetooth - Physical web
- 23. Benefits Works offline Improves the load performance Increases conversion rate
- 24. “ Progressive web apps are our ticket out of the tab, if only we reach for it. “ “