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