What on Earth is a Progressive Web App?

Bf9f3f29049791136b9b815f59e1f09c?s=47 Meanbee
September 15, 2017

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?

Bf9f3f29049791136b9b815f59e1f09c?s=128

Meanbee

September 15, 2017
Tweet

Transcript

  1. None
  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