Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PWA All the Things (Dec 2018)

Ee15d938bcfedc4abeb1fbe520a95ab6?s=47 Todd Anglin
December 05, 2018

PWA All the Things (Dec 2018)

Did you know Progressive Web Apps are about more than just mobile apps? Yep. As modern browsers increasingly support the underlying technology required for PWAs, any website can begin to take advantage of benefits PWAs offer: offline support, faster loading sites and more "native-like" experiences. In this session, you'll get a quick introduction to the primary concepts necessary to PWA-ify a website (like Service Worker), and learn how to begin building and debugging PWAs like a pro.


Todd Anglin

December 05, 2018


  1. PWA All the Things @toddanglin ! ?

  2. Todd Anglin VP, Product @ @toddanglin anglin@progress.com

  3. What are PWAs (really)? Why do we need them? And,

    what ever happened to Responsive Web Apps?
  4. Evolution of the web Web 1.0 Responsive Web Design Progressive

    Web Apps Foundation Design for all Screens Design for offline
  5. Pillars of PWA 1. Reliable 2. Fast 3. Engaging 1.

    Progressive 2. Responsive 3. Connectivity independent 4. App-like 5. Safe 6. Discoverable 7. Re-engageable 8. Installable 9. Linkable
  6. "Progressive Web Apps use modern web capabilities to deliver an

    app- like user experience." "Progressive Web Apps work everywhere but are supercharged in modern browsers. ."
  7. Common Myths PWAs are a "Google" thing

  8. Common Myths PWAs only work on Android

  9. Common Myths PWAs only make sense on mobile

  10. Common Myths PWAs will replace mobile apps

  11. DEMO Let's look at some PWAs

  12. Works Offline Loads Fast "App-like"

  13. Service Workers web app manifest "App-like"

  14. Application Shell My App My App Settings Account Something else

    My App 80º Orlando 20º Boston Shell Content Cached on first visit Loaded from network
  15. Approaches to PWA 1. App Shell + Server-Side Render (SSR)

    for Entry Pages 2. App Shell + Client-Side Render (CSR) for Content 3. Full SSR SSR == Server-Side Rendering
  16. PWA "minimum requirements" HTTPS Service Worker Web App Manifest

  17. Image source: "Your First Progressive Web App", Google Developers •

    App shell method • Make it work offline • Using Angular
  18. Demo Create baseline Angular Weather App

  19. Lighthouse • Check PWA readiness • Detect common problems •

    Audit performance
  20. Demo Lighthouse

  21. Service Worker § It's just a separate JavaScript file §

    Special type of web worker focused on controlling network requests § Runs separate from main thread § Can run in the background (when no tab open) § No direct DOM access § Communicates with main thread via postMessages § One service worker "per scope" § Updated (at least) every 24 hours
  22. Service Worker Server Your page Service Worker GET request HTTPS

    Cache Browser
  23. Service Worker Server Your page GET request HTTPS Older Browser

    if ('serviceworker' in navigator)
  24. None
  25. Service Worker fetch cache API for retrieving content from the

    network API for storing/retrieving cached app content/data
  26. None
  27. Service Worker Lifecycle First Install 1. register 2. install 3.

    activate 4. idle Updates 1. install 2. waiting 3. activate 4. idle navigator.serviceWorker.register('./service-worker.js')
  28. DEMO Starting our PWA with a Service Worker

  29. Caching

  30. Cache strategies § Cache Only § Network Only § Cache

    First, Fallback on Network § Cache First, Then Network § Cache and Network Race § Network First, Fallback on Cache § Generic Fallback
  31. Cache Only For "static" resources that change with "versions" of

    your site Page Cache Service Worker 1 2 3
  32. Network Only For resources that cannot (or should not) be

    cached Page Network Service Worker 1 2 3
  33. Cache First, Fallback on Network Primary offline-first pattern: load from

    cache if available, otherwise fetch Page Cache Service Worker Network x 1 2 3 4
  34. Network First, Fallback on Cache Load new content by default,

    or show cache if offline Page Cache Service Worker Network x 1 2 3 4
  35. Cache First, Then Network Display cached resource immediately, then update

    when network responds Page Cache Service Worker Network 1 1 2 2 3
  36. Cache and Network Race For cases where disk access may

    be slower than network response Page Cache Service Worker Network 1 2 2 3 x 3
  37. Generic Fallback For stuff that's not available in the cache

    OR on the network Page Cache Service Worker Network 1 2 3 x 5 x 4
  38. None
  39. § JavaScript library to handle service worker boilerplate workbox.routing.registerRoute( new

    RegExp('^https://fonts.(?:googleapis|gstatic).com/(.*)'), workbox.strategies.cacheFirst(), ); workbox.routing.registerRoute( /\.(?:js|css)$/, workbox.strategies.staleWhileRevalidate(), );
  40. § PWA schematic automatically creates and manages service worker $

    ng add @angular/pwa --project *project-name* $ ng build --prod
  41. ngsw-config.json assetGroups § Static resources versioned with your app §

    App shell, images, styles, etc § installMode/updateMode § lazy § prefetch dataGroups § Caching policy for resources not versioned with your app § API responses § cacheConfig § maxSize (# of entries) § maxAge § timeout § strategy § performance § freshness
  42. DEMO Using Angular PWA

  43. Web App Manifest § Evolution of mobile meta tags §

    Control PWA's home screen icon, splash screen, theme colors, start URL § Helps PWA feel more "app like" (on Android) <link rel="manifest" href="/manifest.json">
  44. Image Source: Addy Osmani, https://addyosmani.com/blog/getting-started-with-progressive-web-apps/ Web App Install banner Requires:

    • Web App Manifest • HTTPS • Registered Service Worker • 2 visits, at least 5 min between visits
  45. Image Source: Addy Osmani, https://addyosmani.com/blog/getting-started-with-progressive-web-apps/ Home screen icon & splash

    screen Define: • App icon • App name • App theme color • Splash screen background color • Orientation limits
  46. None
  47. • name • short_name • icons • dir • lang

    Control Home Screen • start_url • display • fullscreen, standalone, minimal-ui, browser • orientation • any, natural, landscape, portrait, landscape-preferred, landscape-secondary, portrait- preferred, portrait-secondary • background_color • theme_color Control App Behavior • description • related_ applications • prefer_ related_ applications • scope Extras
  48. DEMO Adding web app manifest

  49. PWA Frameworks ReactPWA Angular CLI (!) vue-pwa-boilerplate Polymer App Toolbox

    Kendo UI Ionic
  50. Migrating an Existing Site § It's possible! § Best to

    start with a SPA architecture
  51. Additional Web APIs § Background Sync § Payment Request API

    § Web Push Notifications § Web VR
  52. Background Sync // 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'); }); self.addEventListener('sync', function(event) { if (event.tag == 'myFirstSync') { event.waitUntil(doSomeStuff()); } }); In app js: In service worker:
  53. None
  54. None
  55. None
  56. Apple Pay JS Image source: https://developers.bluesnap.com/docs/apple-pay

  57. [2] Requires full browser to be running to receive messages

    [3] Apple has custom API for desktop Safari
  58. PWA All the things?

  59. PWA Limits Safari Older Browsers Native APIs

  60. iOS & Safari § Some PWA features coming soon §

    BUT some potentially problematic differences
  61. Notable limits on iOS § Limited to 50 MB (files

    and data) § No background sync (or background execution) § No ability to lock screen orientation § No app splash screen § No “installation” UX § Less control over status bar styling § PWAs ”restart” every time the user switches apps § PWAs don’t work in non-default iOS browsers (Chrome, Brave, etc) § Auto-purged PWA cache for infrequently used apps
  62. When should you add PWA? When should you go native?

  63. • Largely read-only • Simple user interactions • Mostly dynamic

    content • No need to access device APIs • No need for encrypted device storage • Web distribution • Frequently used • More complex user interactions • Need for access to device APIs • Need for encrypted storage • App store distribution PWA
  64. Thanks! @toddanglin anglin@progress.com