What on Earth are Progressive Web Apps?

Bf9f3f29049791136b9b815f59e1f09c?s=47 Meanbee
October 16, 2017

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.

Bf9f3f29049791136b9b815f59e1f09c?s=128

Meanbee

October 16, 2017
Tweet

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); }) ); } });
  13. None
  14. None
  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" }
  19. None
  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

  22. None
  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.
  25. None
  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/