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

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