$30 off During Our Annual Pro Sale. View Details »

Be Offline Ready with Progressive Web Apps

Be Offline Ready with Progressive Web Apps

Presented at the Game Of Learners Pre-Season Training Series 2022:
https://www.microsoft.com/MEA/Gameoflearners/

Abstract:
Progressive Web Apps are traditional web apps that are progressively enhanced to deliver richer experiences (comparable to platform-native apps) on more capable devices. In this workshop, we'll walk through the core concepts of Progressive Web Apps, learn about development tools we can use to simplify our build-deploy workflows, and walk through the steps of enhancing an existing web app to support desirable PWA characteristics.

Related:
Check out the #30DaysOfPWA series for more details
https://dev.to/nitya/series/16849

Nitya Narasimhan, PhD

March 07, 2022
Tweet

More Decks by Nitya Narasimhan, PhD

Other Decks in Technology

Transcript

  1. Progressive
    Web Apps
    Nitya Narasimhan | @nitya
    Senior Cloud Advocate, Microsoft
    March 2022
    Be Offline Ready With

    View Slide

  2. @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  3. Agenda
    • Introducing PWA
    • Deconstructing PWA
    • Make PWA Installable
    • Make PWA Reliable
    • Make PWA Work Offline
    • Make PWA Capable
    • Developing your PWA
    • Testing your PWA
    https://bit.ly/30DaysOfPWA
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  4. Agenda
    • Introducing PWA
    • Deconstructing PWA
    • Make PWA Installable
    • Make PWA Reliable
    • Make PWA Work Offline
    • Make PWA Capable
    • Developing your PWA
    • Testing your PWA
    https://bit.ly/30DaysOfPWA
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  5. Introducing PWA
    Progressive web apps are
    • Traditional web apps that are
    • Progressively enhanced using open web technologies
    • Helping them deliver usable experiences everywhere
    • And scale up to enhanced experiences on capable devices
    • Making them feel just like native apps on that device
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  6. Traditional web
    apps have reach.
    But are limited in
    capability since
    they need to work
    on all browsers
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  7. @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA
    Platform “native”
    apps have richer
    capabilities.
    But are limited in
    reach because they
    are optimized to
    work on that device

    View Slide

  8. PWAs have reach
    and capability!
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  9. The secret ingredient is
    progressive enhancement
    Deliver usable baseline
    experience everywhere,
    even on older browsers
    just like any web app
    Use open web standards
    and new web capabilities to
    unlock new powers on
    more capable devices
    Deliver rich experiences
    using new capabilities
    supported by that device
    just like native apps
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  10. Characteristics
    of good PWAs
    Responsive = adapts to device screen size, orientation, inputs
    Discoverable = with web search (like web apps) and in app stores (like native apps)
    Network Independent = usable experience even in flaky networks, including working offline
    Secure = end-to-end encrypted communications and privacy safeguards to prevent tampering
    Re-Engageable = use push notifications and other tools to bring user back to PWA, even if not actively in use
    Progressively Enhanced = use new web capabilities to scale up baseline experiences on capable devices
    Linkable = link, share, bookmark any page within the app
    Installable = can be added to device home screen and found/launched just like native apps
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  11. Exercise: Try installing a sample PWA on your desktop!
    https://docs.microsoft.com/microsoft-edge/progressive-web-apps-chromium/demo-pwas

    View Slide

  12. In the real world: What motivated PWA deployment?
    2020 – Lyft
    PWA got 40% more clicks vs.
    the “Download app” option
    2018 - Starbucks
    PWA had 2X daily users at
    launch, comparable order
    rates to mobile & desktop
    2017 - Trivago
    PWA got 150% more
    engagement post install,
    97% increase in clockouts
    @nitya | @sketchthedocs https://pwastats.com

    View Slide

  13. Agenda
    • Introducing PWA
    • Deconstructing PWA
    • Make PWA Installable
    • Make PWA Reliable
    • Make PWA Work Offline
    • Make PWA Capable
    • Developing your PWA
    • Testing your PWA
    https://bit.ly/30DaysOfPWA
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  14. Building Blocks: What are the core components of a PWA?
    @nitya | @sketchthedocs https://pwastats.com
    Open web standards and
    technologies that enable
    progressive enhancement

    View Slide

  15. Inspect Sample PWA: See components in action
    @nitya | @sketchthedocs https://devtoolstips.org

    View Slide

  16. Audit Sample PWA: Judge PWA quality by core components
    @nitya | @sketchthedocs https://pwabuilder.com

    View Slide

  17. Functionality: What does each component contribute?
    @nitya | @sketchthedocs https://pwabuilder.com
    Think of the PWA
    like a startup.
    HTTPS is a security
    officer, gates access
    Service Worker is the
    chief of staff, works in
    background.
    Web App Manifest is the
    company resume
    Web Capabilities are
    consultants on demand

    View Slide

  18. Agenda
    • Introducing PWA
    • Deconstructing PWA
    • Make PWA Installable
    • Make PWA Reliable
    • Make PWA Work Offline
    • Make PWA Capable
    • Developing your PWA
    • Testing your PWA
    https://bit.ly/30DaysOfPWA
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  19. Web App Manifest: Let’s look at the sample PWA
    @nitya | @sketchthedocs https://developer.mozilla.com/docs/WebManifest
    The web app manifest is a valid JSON file with defined members like:
    • short_name - app name for constrained spaces (e.g., home screen)
    • categories - hints for stores or app catalogs. (See W3C examples)
    • display - how much of browser UI does user see in app?
    • background_color - placeholder to show (before stylesheet loads)
    • theme_color - default theme color for app
    • scope - what web pages can be viewed (navigation scope)
    • description - what is the app about?
    • icons - array of icon images used in various contexts
    • screenshots - showcase application UI/UX (e.g., for app stores)

    View Slide

  20. Web App Manifest: Make PWA installable
    Think of the Manifest
    like a resume for the
    PWA written in JSON.
    Identity – name, start
    URL, categories
    Branding – icons, colors,
    screenshots
    Skills – properties for
    web capabilities
    Web Capabilities are
    consultants on demand
    @nitya | @sketchthedocs https://developer.mozilla.com/docs/WebManifest

    View Slide

  21. Web App Manifest: How does it work?
    manifest.json created
    and added to app folder
    for deployment
    href=“/manifest.json”
    manifest linked to app
    HTML for discovery
    manifest by app store
    when publishing PWA
    manifest used by device
    when installing PWA
    @nitya | @sketchthedocs https://developer.mozilla.com/docs/WebManifest

    View Slide

  22. What makes a minimal vs. good manifest?
    @nitya | @sketchthedocs https://pwabuilder.com
    Simplest manifest
    can have just
    - name
    - start_url
    - lang

    View Slide

  23. Agenda
    • Introducing PWA
    • Deconstructing PWA
    • Make PWA Installable
    • Make PWA Reliable
    • Make PWA Work Offline
    • Make PWA Capable
    • Developing your PWA
    • Testing your PWA
    https://bit.ly/30DaysOfPWA
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  24. Service Workers: Making PWA reliable & re-engageable
    The PWA is like the
    chief of staff to the
    main app thread (CEO)
    Web Worker runs in a
    background, unblocks CEO
    (time-intensive tasks)
    Network Proxy – intercept app
    requests & handle it
    Cache Manager – make sure
    app has resources to continue
    working offline
    Event Listener – run in the
    background and me ready to
    handle async events like push
    notifications
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  25. Service Workers: Lifecycle and functionality
    Defined in its own file. Its
    location sets its scope for
    influence.
    Registration = “hired”.
    Worker is downloaded.
    Install Event = “badged”
    Worker can pre-cache
    resources while waiting.
    Activate Event = “in office”
    Worker signals it’s ready to
    handle functional events.
    Clears out previous worker
    assets in cache.
    Functions = handle fetch,
    push, message, sync etc.
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  26. Inspect the sample PWA: See service worker in action
    @nitya | @sketchthedocs https://devtooltips.org

    View Slide

  27. Agenda
    • Introducing PWA
    • Deconstructing PWA
    • Make PWA Installable
    • Make PWA Reliable
    • Make PWA Work Offline
    • Make PWA Capable
    • Developing your PWA
    • Testing your PWA
    https://bit.ly/30DaysOfPWA
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  28. Network-Independent: What does offline-ready mean?
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA
    Detect and respond to
    network changes with
    usable experiences.
    Provide a custom offline
    page (keep user engaged)
    Precache assets, responses
    (make ready for offline use)
    Proxy requests – decides
    response based on policy
    & current state
    Manage cache – know my
    storage options, enforce
    cache strategy, refresh on
    periodic sync (if enabled)

    View Slide

  29. Storage & Strategy: Cache API & Policy, Indexed DB
    Cache stores request-
    response pairs. Service
    worker can have multiple
    named caches if needed.
    IndexedDB stores large
    amounts of unstructured
    data in transactional,
    object-oriented database
    Service workers only use
    storage that is async-ready
    Cache policies include on-
    install (performant) , cache-
    first (on fetch) etc.
    @nitya | @sketchthedocs https://devtooltips.org

    View Slide

  30. Agenda
    • Introducing PWA
    • Deconstructing PWA
    • Make PWA Installable
    • Make PWA Reliable
    • Make PWA Work Offline
    • Make PWA Capable
    • Developing your PWA
    • Testing your PWA
    https://bit.ly/30DaysOfPWA
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  31. Web Capabilities: Let’s talk about Project Fugu
    @nitya | @sketchthedocs https://fugu-tracker.web.app
    Multi-organization initiative:
    help web apps do anything
    native apps can do.
    Project Fugu API Tracker
    shows current proposals and
    state of adoption in browsers
    Process is open, anyone can
    provide feedback, propose
    new features, vote priorities.
    Workflow – feature request,
    under consideration, dev and
    origin trials, then ship/drop.
    Sample PWA see capabilities
    in action in real contexts

    View Slide

  32. Agenda
    • Introducing PWA
    • Deconstructing PWA
    • Make PWA Installable
    • Make PWA Reliable
    • Make PWA Work Offline
    • Make PWA Capable
    • Developing your PWA
    • Testing your PWA
    https://bit.ly/30DaysOfPWA
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  33. An Offline Cookbook: Let’s PWA-enable an existing web app
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA
    • Select a Web App
    • Audit the Baseline
    • Secure it with HTTPS
    • A PWABuilder Assist
    • Configure App Manifest
    • Add Service Worker
    • Audit the Final Version
    • Validate with Usage

    View Slide

  34. Then & Now: Interactive Walkthrough ( Post | Code | Demo)
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  35. Agenda
    • Introducing PWA
    • Deconstructing PWA
    • Make PWA Installable
    • Make PWA Reliable
    • Make PWA Work Offline
    • Make PWA Capable
    • Developing your PWA
    • Testing your PWA
    https://bit.ly/30DaysOfPWA
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide

  36. Sneak Peek: Developer Tools in Week 3 of #30DaysOfPWA
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA
    PWABuilder tools for
    authoring, auditing and
    packaging for app store
    Edge DevTools for
    debugging, profiling
    and experimenting
    Playwright for end-to-
    end test automation
    webhint for linting code
    to improve accessibility,
    cross-browser compat
    and performance
    VSCode extensions!!

    View Slide

  37. Playwright: Reliable End-to-End Testing For Modern Web Apps
    @nitya | @sketchthedocs https://playwright.dev
    Unified API for cross-
    browser, cross-platform
    testing. Multi-language
    development libraries
    Powerful Tooling for
    authoring, debugging,
    profiling, reporting
    Resilient Testing with
    auto-wait and web-first
    assertions (no timeouts!)
    Fast, Isolated Testing
    with browser contexts,
    parallelization
    Demo.Playwright

    View Slide

  38. Thank
    You!
    Q&A
    https://bit.ly/30DaysOfPWA
    @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

    View Slide