What on Earth are Progressive Web Apps?

Set to be the biggest change since response design, progressive web apps can be hard to get your head around. What's considered a progressive web app? What sort of things can be achieved? What should we be aiming for with our Magento builds?

Presented in Cluj Napoca, Magento Romania 2017.

Transcript

1. Progressive Web Apps TOM ROBERTSHAW Founder & CEO at Meanbee @bobbyshaw What on earth are
2. Apps provide a great user experience • Fast perceived load time • Consistent, smooth experience • Even in poor network conditions • Primed for re-use
3. Apps provide a great user experience But: • Massive bundle downloads • Walled gardens • Hard to link to • Lame upgrade process
4. Google’s Guidelines • Progressive • Responsive • Connectivity independent • App-like • Fresh • Safe • Discoverable • Re-engageable • Installable • Linkable
5. What’s new? • Connectivity independent • App like • Fresh • Discoverable • Installable • Re-engageable
6. Installable & handles going offline gracefully MVP
7. Browser Technologies • 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
8. We’re reducing the gap between the web and the device
9. Bare Minimum • HTTPS • Service Worker • Manifest File
10. Service Worker • Siloed, event handling, JavaScript. • Can intercept every browser request. • Programmatically control request/response. • Use Cache API to cache responses.
11. Service Worker 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); }); }) ); });
12. Service Worker 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); }) ); } });
15. Caching Strategies • Network-First • Cache-First • Fastest • Cache-only • Network-only
16. Online, offline and Lie-Fi Don’t rely on a good connection for a good user experience
17. Installing a PWA
18. Web App Manifest { "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" }
20. WebAPK • Packages your PWA into a native app • It becomes a first-class citizen on device.
21. That’s great, but I’m a Magento Developer
23. Open-Source FTW • 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
24. App Shell • Service worker enables us to fetch and cache an App Shell. • Critical components and UI. • Fetch content • Lazy load in additional assets.
26. Single Page Applications • Don’t waste time re-rendering App Shell • Separating application structure from content • Moving from a document to an application-based web.
27. Our PWA Magento 2 SPA • 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.
28. Some new challenges • 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
29. Attention to detail • Some very successful projects • Dow to an intense focus on performance • We’re having to work harder than ever • But it’s never been more exciting
30. Magento PWA Studio & Beyond • Super excited about Magento • Growing an impressive & experienced frontend team. • React Ecosystem • Aim to release tooling for next year • Longer term, replacing Magento frontend
31. Go forth and install service workers
32. Iterate your way to PWA success! • Add a service worker to craft an offline experience. • Use cache-first strategies where possible. • SPA to really push performance & UX boundaries. • Imagine the future: ◦ Auto-login, browser stored payments, offline order submission, push notifications once confirmed & shipped.
33. Thanks!
34. Recommended Material • Jake Archibald Google I/O 2016: https://www.youtube.com/watch?v=cmGr0RszHc8 • https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-p rogressive-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/