What on Earth is a Progressive Web App?

We’ve seen Magento puff their chest and shout that with the help of Google, they are working on making Magento a PWA. Cool! Right?! Umm, yeah, I mean, well, at least it sounds like something I’d want. I think. Do I really have a choice?

Ok, so let’s back up a bit to work out what’s the philosophy behind PWAs and what features and technologies are important in creating them. How is this going to affect the way we build, with or without the upcoming Magento support?

Transcript

2. © 2017 Mage Titans 2 Ok, I’ll bite, what on earth is a 
 Progressive Web App? TOM ROBERTSHAW Founder & CEO at Meanbee @bobbyshaw
3. © 2017 Mage Titans All the goodness of the web Progressively enhanced with all the goodness that device-level access provides PWA 3
4. MVP Installable & handles going offline gracefully
5. © 2017 Mage Titans Apps can provide a better user experience But.. ๏ Massive bundle downloads ๏ Walled gardens ๏ Hard to link to ๏ Lame upgrade process The Competition 5
6. © 2017 Mage Titans ๏ Progressive ๏ Responsive ๏ Connectivity independent ๏ App-like ๏ Fresh ๏ Safe Google’s Guidelines 6 ๏ Discoverable ๏ Re-engageable ๏ Installable ๏ Linkable
7. © 2017 Mage Titans ๏ Connectivity independent ๏ App like ๏ Fresh ๏ Discoverable ๏ Installable ๏ Re-engagable So, what’s new? 7
8. © 2017 Mage Titans 8 ๏ Service Worker ๏ Web App Manifest ๏ Push Notifications ๏ Background Sync ๏ WebPayments API ๏ Credentials Management API ๏ Streams ๏ IndexedDB ๏ Vibration API ๏ NFC API ๏ Bluetooth API ๏ Camera & Microphone API Browser Tech Updates
9. Reducing the gap between the web and the device
10. © 2017 Mage Titans ๏ HTTPS ๏ Service Worker ๏ Manifest File Bare Minimum 10
11. © 2017 Mage Titans ๏ Siloed, event handling, JavaScript. ๏ Can intercept every browser request. ๏ Programatically control request/response. ๏ Use Cache API to cache responses. Service Worker 11
12. © 2017 Mage Titans if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js'); } self.addEventListener('install', event => { event.waitUntil( fetch(createCacheBustedRequest(OFFLINE_URL)) .then(function(response) { return caches.open(CURRENT_CACHES.offline) .then(function(cache) { return cache.put(OFFLINE_URL, response); }); }) ); }); Service Worker 12
13. © 2017 Mage Titans self.addEventListener('fetch', event => { if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) { event.respondWith( fetch(event.request).catch(error => { return caches.match(OFFLINE_URL); }) ); } }); Service Worker 13
14. © 2017 Mage Titans :( 14
15. © 2017 Mage Titans Ta Da 15
16. © 2017 Mage Titans ๏ Network-First ๏ Cache-First ๏ Fastest ๏ Cache-only ๏ Network-only Caching Strategies 16
17. © 2017 Mage Titans Don’t rely on a good connection for a good UX Online, offline and Lie-Fi 17
18. Installing a PWA
19. © 2017 Mage Titans { "name": "SHOP", "short_name": "SHOP", "icons": [{ "src": "images/shop-icon-128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/shop-icon-192.png", "sizes": "192x192", "type": "image/png" },{ "src": "images/shop-icon-384.png", "sizes": "384x384", "type": "image/png" },{ "src": "images/shop-icon-512.png", "sizes": "512x512", "type": "image/png" }], "start_url": "/", "background_color": "#fff", "display": "standalone", "theme_color": "#fff" } Web App Manifest 19
20. © 2017 Mage Titans 20
21. © 2017 Mage Titans 21
22. © 2017 Mage Titans ๏ Packages your PWA into a native app ๏ Making the PWA a first-class citizen ๏ Essence of Electron WebAPK 22
23. That’s great, but I’m a Magento Developer
24. © 2017 Mage Titans 24
25. © 2017 Mage Titans ๏ Service Worker ๏ Magento 1 on GitHub ๏ Magento 2 on GitHub ๏ Manifest ๏ Magento 1 on GitHub (Thanks Sitewards!) ๏ Magento 2 on GitHub ๏ PWA Magento 2 Theme & Extension Open-Source FTW 25
26. © 2017 Mage Titans ๏ Service worker enables us to fetch and cache an App Shell. ๏ Critical components and UI. ๏ Fetch content ๏ Lazy load in additional assets. App Shell 26
27. © 2017 Mage Titans 27
28. © 2017 Mage Titans ๏ Don’t waste time re-rendering App Shell ๏ Separating application structure from content ๏ Moving from a document to an application-based web. Single Page Applications 28
29. © 2017 Mage Titans ๏ Let’s use current magento architecture. ๏ Save App Shell on install ๏ When a link is clicked we fetch page ๏ And replace main content ๏ Not MVC in traditional sense. ๏ But 80/20 benefit received. Our PWA Magento 2 SPA 29
30. © 2017 Mage Titans ๏ Super excited about Magento ๏ Growing an impressive & experienced frontend team. ๏ React & Redux ๏ Aim to release tooling for next year ๏ Longer term, replacing Magento frontend Magento PWA Studio & Beyond 30
31. © 2017 Mage Titans ๏ Lose features we got for free from the Browser ๏ Routing ๏ History ๏ Scroll position ๏ Page load indicators ๏ Hard to let go of Server-Side Rendering ๏ SEO ๏ Maintain progressive enhancement It’s no silver bullet 31
32. © 2017 Mage Titans ๏ Some very successful projects ๏ Intense focus on performance ๏ Careful resource management to reduce bundle size Doesn’t come for free 32
33. Go forth and install service workers
34. © 2017 Mage Titans ๏ Great experience online. ๏ Add a service worker to get an experience offline. ๏ Add more complex caching strategies to components. ๏ SPA to really push performance & UX boundaries. ๏ In a not too distant future: ๏ Auto-login, browser stored payments, offline order submission, push notifications once confirmed & shipped. Iterate our way to success! 34
35. Cheers!
36. © 2017 Mage Titans ๏ Jake Archibald Google I/O 2016: https://www.youtube.com/ watch?v=cmGr0RszHc8 ๏ https://medium.com/@paularmstrong/twitter-lite-and-high- performance-react-progressive-web-apps-at-scale- d28a00e780a3 ๏ https://joreteg.com/blog/installing-web-apps-for-real ๏ https://joreteg.com/blog/betting-on-the-web ๏ https://www.w3.org/Mobile/mobile-web-app-state/ ๏ https://adamsilver.io/articles/the-disadvantages-of-single- page-applications/ Recommended Material 36