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

PWA All the Things (Dec 2018)

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
Tweet

More Decks by Todd Anglin

Other Decks in Technology

Transcript

  1. PWA All the Things
    @toddanglin
    !
    ?

    View full-size slide

  2. Todd Anglin
    VP, Product @
    @toddanglin
    [email protected]

    View full-size slide

  3. What are PWAs (really)?
    Why do we need them?
    And, what ever happened to Responsive Web Apps?

    View full-size slide

  4. Evolution of the web
    Web 1.0
    Responsive Web Design
    Progressive Web Apps
    Foundation
    Design for all
    Screens
    Design for offline

    View full-size slide

  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

    View full-size slide

  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. ."

    View full-size slide

  7. Common Myths
    PWAs are a "Google" thing

    View full-size slide

  8. Common Myths
    PWAs only work on Android

    View full-size slide

  9. Common Myths
    PWAs only make sense on mobile

    View full-size slide

  10. Common Myths
    PWAs will replace mobile apps

    View full-size slide

  11. DEMO
    Let's look at some PWAs

    View full-size slide

  12. Works
    Offline
    Loads
    Fast
    "App-like"

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  16. PWA "minimum requirements"
    HTTPS Service Worker Web App Manifest

    View full-size slide

  17. Image source: "Your First Progressive Web App", Google Developers
    • App shell method
    • Make it work offline
    • Using Angular

    View full-size slide

  18. Demo
    Create baseline Angular Weather App

    View full-size slide

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

    View full-size slide

  20. Demo
    Lighthouse

    View full-size slide

  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

    View full-size slide

  22. Service Worker
    Server
    Your
    page
    Service
    Worker
    GET
    request
    HTTPS
    Cache
    Browser

    View full-size slide

  23. Service Worker
    Server
    Your
    page
    GET
    request
    HTTPS
    Older Browser
    if ('serviceworker' in navigator)

    View full-size slide

  24. Service Worker
    fetch cache
    API for retrieving
    content from the network
    API for storing/retrieving
    cached app content/data

    View full-size slide

  25. 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')

    View full-size slide

  26. DEMO
    Starting our PWA with a Service Worker

    View full-size slide

  27. 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

    View full-size slide

  28. Cache Only
    For "static" resources that change with "versions" of your site
    Page
    Cache
    Service
    Worker
    1
    2
    3

    View full-size slide

  29. Network Only
    For resources that cannot (or should not) be cached
    Page
    Network
    Service
    Worker
    1
    2
    3

    View full-size slide

  30. 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

    View full-size slide

  31. 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

    View full-size slide

  32. Cache First, Then Network
    Display cached resource immediately, then update when network responds
    Page
    Cache
    Service
    Worker
    Network
    1
    1
    2
    2
    3

    View full-size slide

  33. 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

    View full-size slide

  34. 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

    View full-size slide

  35. § 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(),
    );

    View full-size slide

  36. § PWA schematic automatically creates and manages service
    worker
    $ ng add @angular/pwa --project *project-name*
    $ ng build --prod

    View full-size slide

  37. 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

    View full-size slide

  38. DEMO
    Using Angular PWA

    View full-size slide

  39. 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)

    View full-size slide

  40. 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

    View full-size slide

  41. 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

    View full-size slide

  42. • 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

    View full-size slide

  43. DEMO
    Adding web app manifest

    View full-size slide

  44. PWA Frameworks
    ReactPWA
    Angular CLI (!) vue-pwa-boilerplate
    Polymer App Toolbox
    Kendo UI Ionic

    View full-size slide

  45. Migrating an Existing Site
    § It's possible!
    § Best to start with a SPA architecture

    View full-size slide

  46. Additional Web APIs
    § Background Sync
    § Payment Request API
    § Web Push Notifications
    § Web VR

    View full-size slide

  47. 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:

    View full-size slide

  48. Apple Pay JS
    Image source: https://developers.bluesnap.com/docs/apple-pay

    View full-size slide

  49. [2] Requires full browser to be running to receive messages
    [3] Apple has custom API for desktop Safari

    View full-size slide

  50. PWA All the things?

    View full-size slide

  51. PWA Limits
    Safari Older Browsers Native APIs

    View full-size slide

  52. iOS & Safari
    § Some PWA features coming soon
    § BUT some potentially problematic differences

    View full-size slide

  53. 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

    View full-size slide

  54. When should you add PWA?
    When should you go native?

    View full-size slide

  55. • 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

    View full-size slide