Progressive Web Apps - BrestJS 2016-10

Progressive Web Apps, or PWA, we are been hearing that a lot these last months, but what's behind this term? In this talk I explain the concepts and technologies behind PWA, and how they allows to boost your webapp in both performance and UX, even in browsers that don't support the full technical stack yet.

Transcript

1. @LostInBrittany @BrestJS #PWA Progressive Web Apps with Polymer Horacio Gonzalez @LostInBrittany
2. @LostInBrittany @BrestJS #PWA Horacio Gonzalez @LostInBrittany Cityzen Data http://cityzendata.com Spaniard lost in Brittany, developer, dreamer and all-around geek
3. @LostInBrittany @BrestJS #PWA Apps vs Web mobile Yet again...
4. @LostInBrittany @BrestJS #PWA How did the Web beat native applications on the desktop? Distribution Is The Hardest Problem In Software
5. @LostInBrittany @BrestJS #PWA The Mobile Internet came when it brought the Web You had the whole desktop internet in your hands Everywhere !
6. @LostInBrittany @BrestJS #PWA Applications?
7. @LostInBrittany @BrestJS #PWA Applications vs Web Users spend way more time on apps than on browser
8. @LostInBrittany @BrestJS #PWA So apps are winning aren't it? Mobile audience growth driven by mobile web which is actually bigger and growing faster than apps
9. @LostInBrittany @BrestJS #PWA Apps drive engagement But web drives visitors...
10. @LostInBrittany @BrestJS #PWA Are you winning the app lottery? If you're not in the top 10, you don't exist...
11. @LostInBrittany @BrestJS #PWA The best of two worlds? Web audience and app engagement...
12. @LostInBrittany @BrestJS #PWA What if the Web evolved? Just as it did with Ajax! Image: © Nintendo
13. @LostInBrittany @BrestJS #PWA Progressive Web Apps The missing link
14. @LostInBrittany @BrestJS #PWA What's Missing? 1. Homescreen Access 2. Push Notifications 3. Offline 4. Access to terminal capabilities
15. @LostInBrittany @BrestJS #PWA PWA Mix of new and not so new technologies to make webapp evolve
16. @LostInBrittany @BrestJS #PWA Some core technologies • Service workers • App Shell • Installability and App Manifest • Notifications and Push APIs
17. @LostInBrittany @BrestJS #PWA Service Workers JavaScript Worker acting as a proxy Fully programmable: https://serviceworke.rs/ • Cache • Notifications HTTPS only
18. @LostInBrittany @BrestJS #PWA Service Workers Sad Safari by Chris Joel
19. @LostInBrittany @BrestJS #PWA AppShell Minimal HTML, CSS, JS • load fast • cached • dynamically display content
20. @LostInBrittany @BrestJS #PWA Installability and manifest Browsers display install banner if app has: • A web app manifest file with: ◦ a short_name (used on the home screen) ◦ a name (used in the banner) ◦ a 144x144 png icon (the icon declarations must include a mime type of image/png) ◦ a start_url that loads • Has a service worker registered • Is served over HTTPS • Is visited at least twice, with at least five minutes between visits.
21. @LostInBrittany @BrestJS #PWA Testing the manifest On Chrome Dev Tools
22. @LostInBrittany @BrestJS #PWA Installability and manifest Sad Safari by Chris Joel
23. @LostInBrittany @BrestJS #PWA Notifications and Push APIs • Based on Service Workers ◦ In background serviceWorkerRegistration. showNotification(title, options); { "body": "Did you make a $1,000,000 purchase at Dr. Evil...", "icon": "images/ccard.png", "vibrate": [200, 100, 200, 100, 200, 100, 400], "tag": "request", "actions": [ { "action": "yes", "title": "Yes", "icon": "images/yes.png" }, { "action": "no", "title": "No", "icon": "images/no.png" } ] }
24. @LostInBrittany @BrestJS #PWA Notifications and Push APIs Sad Safari by Chris Joel
25. @LostInBrittany @BrestJS #PWA Progressiveness What does it mean?
26. @LostInBrittany @BrestJS #PWA Progressive means everybody Progressive enhancement as a core tenant No matter the browser choice, our web app works for all
27. @LostInBrittany @BrestJS #PWA But not everything for everybody Core features for all, enhanced features for some
28. @LostInBrittany @BrestJS #PWA But iOS doesn't support PWA... Safari's… hmm… delay in adding modern features... isn't a problem if you're considering Progressive Web Apps https://cloudfour.com/thinks/ios-doesnt-support-progressive-web-apps-so-what/
29. @LostInBrittany @BrestJS #PWA But iOS doesn't support PWA... • Progressive Web Apps still work on iOS • Progressive Web Apps perform better on iOS
30. @LostInBrittany @BrestJS #PWA Example of progressiveness Offline mode
31. @LostInBrittany @BrestJS #PWA Offline mode Background sync API Using Service Workers // Register your service worker: navigator.serviceWorker.register('/sw.js'); // Then later, request a one-off sync: navigator.serviceWorker.ready.then(function(swRegistration) { return swRegistration.sync.register('myFirstSync'); }); // in /sw.js self.addEventListener('sync', function(event) { if (event.tag == 'myFirstSync') { event.waitUntil(doSomeStuff()); } });
32. @LostInBrittany @BrestJS #PWA Offline mode Service Worker and Cache API Great and easy to use… but support isn't universal yet Sad Safari by Chris Joel
33. @LostInBrittany @BrestJS #PWA Offline mode But if I need offline everywhere? Universal alternatives... IndexedDB PouchDB LocalForage Dexie.js
34. @LostInBrittany @BrestJS #PWA Offline mode Online or offline? A property window.navigator.onLine Two events online and offline
35. @LostInBrittany @BrestJS #PWA Offline mode Or simply back to the progressive idea Safari users get no offline mode Sad Safari by Chris Joel
36. @LostInBrittany @BrestJS #PWA Offline mode But the others do And Safari still gets a faster app!
37. @LostInBrittany @BrestJS #PWA How to measure progressiveness? Lighthouse
38. @LostInBrittany @BrestJS #PWA Lighthouse
39. @LostInBrittany @BrestJS #PWA Lighthouse 1. Install Lighthouse extension (Chrome) 2. Visit website, click on the Lighthouse icon 3. Check the results 4. Target 90% or higher https://github.com/GoogleChrome/lighthouse
40. @LostInBrittany @BrestJS #PWA I want to know more Give me more information
41. @LostInBrittany @BrestJS #PWA PWA showcase https://developers.google.com/web/showcase/
42. @LostInBrittany @BrestJS #PWA Conclusion That's all folks!
43. @LostInBrittany @BrestJS #PWA Thank you!