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

PWA For Beginners

PWA For Beginners

An introduction to Progressive Web Apps from concepts to code, looking at key PWA requirements (installability, reliability, capability) and walking through the PWABuilder tools and ecosystem for quickstart.

Presented to students at Microsoft | Aug 2021

Nitya Narasimhan, PhD

August 30, 2021
Tweet

More Decks by Nitya Narasimhan, PhD

Other Decks in Technology

Transcript

  1. Progressive
    Web Apps:
    For Beginners
    NITYA NARASIMHAN | @NITYA
    AUG 2021

    View full-size slide

  2. About Me
    • PhD, Distributed Systems
    • 20+ years Industry & Startups
    • Software Research & Eng.
    • Community Builder
    • Senior Cloud Advocate
    • Visual Storyteller

    View full-size slide

  3. PWA
    Concepts
    1. What’s a PWA?
    2. Benefits & Drawbacks
    3. Under the Hood
    4. PWA Tools & Frameworks
    5. PWA Starter: Template
    6. PWA Builder: Audit
    7. PWA Apps: Examples

    View full-size slide

  4. What is a Progressive Web App?
    Progressive Web Apps are web
    apps that are reliable, installable,
    and capable exemplified by:
    • open web technologies
    • cross-platform interoperability
    • progressive enhancement
    • native-like app experience
    Learn More: Microsoft Docs
    "The Chocolatey Layers of Progressive Enhancement”
    (Credit: A List Apart)

    View full-size slide

  5. Where does it fit into app ecosystems?
    • Web apps have best reach.
    Anyone, anywhere, on any device.
    One codebase. Always up-to-date.
    • Native apps have best capability.
    Work reliably offline, use latest APIs.
    Feel like they belong on platform.
    • PWAs are web apps enhanced with
    modern APIs – in supported browsers
    – to deliver best of both worlds
    Learn More: web.dev
    Capabilities vs. reach of platform-specific apps, web
    app, and progressive web apps.

    View full-size slide

  6. PWA Examples in the Real World
    Learn More: 12 Best Examples of PWA in 2021

    View full-size slide

  7. PWA
    Concepts
    1. What’s a PWA?
    2. Benefits & Drawbacks
    3. Under the Hood
    4. PWA Tools & Frameworks
    5. PWA Starter: Template
    6. PWA Builder: Audit
    7. PWA Apps: Examples

    View full-size slide

  8. Principles of Good PWA (Benefits)
    Learn More: web.dev
    Discoverability
    Better metadata, easier
    to find via search on
    web or in platform
    Installability
    Feels like it belongs on
    target platform – home
    screen (launch), native
    feel (app container)
    Linkability
    Link to directly specific
    pages (routes) in app –
    for easy share & launch
    Reliability
    Network independence
    (work offline or under
    intermittent connectivity)
    Progressive
    Enhancement
    Work cross-browser,
    rendering best content
    experience for local
    platform capability
    Re-engageability
    Remind users of app
    existence (even if
    browser is not live) using
    web push & notifications
    Responsiveness
    Use media queries &
    viewport to adapt to
    form factors – including
    dual-screen (foldables)
    Safety / Security
    Use HTTPS for secure
    communications, verify
    link matches web domain
    (unlike in app stores)

    View full-size slide

  9. What are the drawbacks of PWA?
    Basic PWA
    Requirements
    Service Workers
    Web App Manifest
    Push Notifications
    Can I Use APIs on all
    modern browsers &
    target platforms?
    This is where progressive
    enhancement finds value.
    Is service worker ready?
    (jakearchibald.github.io)

    View full-size slide

  10. Why should we care about PWA today?
    Mobile web usage
    continues to grow
    even as desktop use
    stays strong
    App developers
    need to think
    “multi-platform”
    Mobile Vs Desktop Internet Usage (Latest 2021
    Data) – BroadbandSearch – Feb 2021

    View full-size slide

  11. Native app abandonment
    rates remain quite high.
    Users forget they exist,
    or don’t upgrade
    The Case for Progressive Web Applications |
    WebAppDevCo
    2018
    7 Awesome PWA Statistics You Should Know in
    2020 (beezer.com)
    Why should we care about PWA today?
    Mobile revenue gap
    more consumption time but
    less revenue than with
    desktop app

    View full-size slide

  12. Making the ’case’ for PWA
    Case Study (web.dev) – Selected case studies for
    the “Progressive Web Apps tag” from 2020-2021
    • Feels native on mobile & desktop
    • Faster loading speeds
    • Instantly available (latest)
    • Comparatively lighter
    • Offline-ready
    • Retention & Conversion
    The Case for Progressive Web Applications | WebAppDevCo

    View full-size slide

  13. PWA
    Concepts
    1. What’s a PWA?
    2. Benefits & Drawbacks
    3. Under the Hood
    4. PWA Tools & Frameworks
    5. PWA Starter: Template
    6. PWA Builder: Audit
    7. PWA Apps: Examples

    View full-size slide

  14. PWA Requirements: Core + Optimal
    Service
    Workers
    HTTPS Web App
    Manifest
    • Service Workers are proxies
    between application and network (when
    available). Requires HTTPS by default.
    • Web App Manifests
    provide structured metadata to support
    installability and discoverability
    Also see:
    PWA app architectures

    View full-size slide

  15. About: Service Workers
    • Service Workers run in
    background, uses
    messages to ”talk” to
    app pages in scope
    • Programmable network
    proxy with own lifecycle
    • Can hijack connections,
    manipulate responses
    => HTTPS mandatory to
    prevent man-in-middle
    Using Service Workers - Web APIs | MDN (mozilla.org)

    View full-size slide

  16. About: Service Workers
    Kickstart service worker by registering
    it in app’s ”load” event handler
    • Installing: registers service worker
    • Determines scope (for fetch events)
    • Cache resources (for given policy)
    • Waiting: for prior worker exits
    • Activated: ready for fetch events
    • Redundant: no further requests
    Using Service Workers - Web APIs | MDN (mozilla.org)

    View full-size slide

  17. About: Handling Fetch Events
    Service Workers and
    Cache API work in
    tandem to deliver
    response (by policy)
    2 questions:
    • How frequently is cache
    updated for resource?
    • Does this resource have
    other dependencies?
    Using Service Workers - Web APIs | MDN (mozilla.org)

    View full-size slide

  18. About: When to Cache First
    • On install as dependency
    The Offline Cookbook (web.dev)

    View full-size slide

  19. About: When to Cache First
    • On install as dependency
    • On install, no dependency
    The Offline Cookbook (web.dev)

    View full-size slide

  20. About: When to Cache First
    • On install as dependency
    • On install, no dependency
    • On user interaction event
    The Offline Cookbook (web.dev)

    View full-size slide

  21. About: When to Cache First
    • On install as dependency
    • On install, no dependency
    • On user interaction event
    • On network response
    The Offline Cookbook (web.dev)

    View full-size slide

  22. About: When to cache
    • On install as dependency
    • On install, no dependency
    • On user interaction event
    • On network response
    • On activate (new worker)
    The Offline Cookbook (web.dev)

    View full-size slide

  23. About: Caching Strategy (What, When)
    What to cache is decided by content questions asked
    • Stale while revalidate – for frequently updating resources (fetch for next time)
    • Network first – where freshest content is priority (breaking news)
    • Cache first – for infrequently updated resources (images)
    • Cache only – for resource that must exist when worker updates (e.g., offline page)
    • Network only – if no offline equivalent exists (e.g., network pings)
    The Offline Cookbook (web.dev)

    View full-size slide

  24. PWA Requirements: Core + Optimal
    Service
    Workers
    HTTPS Web App
    Manifest
    • Service Workers are proxies
    between application and network (when
    available). Requires HTTPS by default.
    • Web App Manifests
    provide structured metadata to support
    installability and discoverability
    Also see:
    PWA app architectures

    View full-size slide

  25. About: Web App Manifest
    Web App Manifest governs
    how PWA looks & behaves
    when installed on target OS.
    JSON file (5 required fields)
    name, short_name, icons, start_url, display
    Deploy Manifest

    Browser Compatibility Specification
    Use the Web App Manifest to integrate PWA into target OS

    View full-size slide

  26. About: Install Options for PWA
    Best practices:
    • Don’t disrupt key user workflows
    • Allow user to dismiss or decline promo
    • Don’t annoy or spam the user
    Promotional patterns:
    • Automatic browser promotion (Typical)
    • Simple install button (in journey)
    • Fixed install button (in header)
    • After key conversion events (proof of use)
    • Temporary UI, banner etc.
    Patterns for promoting PWA installation (web.dev). | https://web.dev/customize-install/
    Custom Install: Flow
    • Listen for beforeinstallprompt event
    • Save event (to trigger later)
    • Provide UI element for triggering
    • Call prompt() on saved event to trigger

    View full-size slide

  27. PWA Requirements: Core + Optimal
    Service
    Workers
    HTTPS Web App
    Manifest
    PWA
    Checklist
    • Provides an offline experience
    • Is fully accessible (inclusive)
    • Can be discovered through search
    • Works with any input type (interaction)
    • Provides context for permission requests
    • Follows best practices for healthy code
    • Starts fast, stays fast
    • Works in any browser
    • Responsive to any screen size
    • Provides custom offline page
    • Is installable

    View full-size slide

  28. About: Web Capabilities Project
    Cross-company effort to
    support new web capability
    APIs across browser platforms
    • Some experimental APIs (behind flag)
    • Expose native platform capabilities to
    browser via open web standards
    • Maintain tenets of web (security,
    privacy, trust) in implementation
    • What’s new in Edge
    • Origin trials in Chrome
    Unlocking new capabilities for the web

    View full-size slide

  29. About: Project Fugu Tracker
    Fugu API Tracker (fugu-tracker.web.app) | Explore codelab

    View full-size slide

  30. PWA
    Development
    1. What’s a PWA?
    2. Benefits & Drawbacks
    3. Under the Hood
    4. PWA Tools & Frameworks
    5. PWA Starter: Template
    6. PWA Builder: Audit
    7. PWA Apps: Examples

    View full-size slide

  31. Getting Started With PWA: Options
    Make it installable • Add a manifest
    • Create an offline page
    • Add service workers
    Focus on a feature Pick one high impact PWA feature
    and support it in your app
    • Push Notifications
    • File Handling
    Build a simple version Focus on one user journey
    Make that workflow offline-first!
    Start from ground up Use frameworks and boilerplate
    Leverage tools and best practices

    View full-size slide

  32. Service Workers
    Cookbook
    Service Worker Cookbook
    is a collection of working,
    practical examples of using
    service workers in modern
    web sites.
    GitHub Repo
    Mozilla / ServiceWorker Cookbook
    The Offline
    Cookbook
    The Offline Cookbook (web.dev)
    Practical caching patterns
    (with demos and figures)
    that help explain strategies
    Workbox (Tools)
    Workbox | Google Developers
    Set of libraries with baked-
    in best practices ready for
    production use

    View full-size slide

  33. Lighthouse: Automated auditing
    Lighthouse | Tools for Web Developers | Google Developers | PWA audits (web.dev)

    View full-size slide

  34. Chrome / Edge : DevTools
    https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium | Using DevTools with PWA

    View full-size slide

  35. PWA
    Development
    1. What’s a PWA?
    2. Benefits & Drawbacks
    3. Under the Hood
    4. PWA Tools & Frameworks
    5. PWA Starter: Template
    6. PWA Builder: Audit
    7. PWA Apps: Examples

    View full-size slide

  36. pwa-builder/pwa-starter
    • Template (best practices)
    • 100 Lighthouse Score
    • Workbox (service workers)
    • lit (web components)
    • FAST (fluent design)
    • Lazy-loaded routes (vaadin)
    • Typescript (language)
    • Sample apps (incl. dual-screen)
    PWA Starter: Scaffold & host a basic PWA

    View full-size slide

  37. • Use template to create app
    • Build for production
    • Test on local server
    • Host app on GitHub Pages
    Next:
    • Host on Azure Static Web Apps
    • Replicate PWA Examples
    • Add: Service Worker Strategies
    • Add: Web Capabilities
    PWA Starter: Demo App

    View full-size slide

  38. PWA
    Development
    1. What’s a PWA?
    2. Benefits & Drawbacks
    3. Under the Hood
    4. PWA Tools & Frameworks
    5. PWA Starter: Template
    6. PWA Builder: Audit
    7. PWA Apps: Examples

    View full-size slide

  39. PWA Builder: Audit your PWA
    • Generate a Report Card
    for new or existing app
    • Use recommendations to
    update PWA compliance
    • Use guidance & tools to
    package apps for Android
    and Windows app stores
    PWABuilder

    View full-size slide

  40. Audit Demo: PWA Report Card
    • Using Mozilla’s Demo
    App: JS13KGames
    • Source available here
    • Demo: Let’s look at the
    default report card
    • Score: 140

    View full-size slide

  41. Audit Demo: Manifest Options
    • Using Mozilla’s Demo
    App: JS13KGames
    • Source available here
    • Demo: Let’s look at the
    default report card
    • Score: 140

    View full-size slide

  42. Audit Demo: Service Worker Options
    • Using Mozilla’s Demo
    App: JS13KGames
    • Source available here
    • Demo: Let’s look at the
    default report card
    • Score: 140

    View full-size slide

  43. PWA Builder: Ship to App Stores
    PWA Builder Blog

    View full-size slide

  44. PWA
    Development
    1. What’s a PWA?
    2. Benefits & Drawbacks
    3. Under the Hood
    4. PWA Tools & Frameworks
    5. PWA Starter: Template
    6. PWA Builder: Audit
    7. PWA Apps: Examples

    View full-size slide

  45. PWA Project: Care4CF (Jordan Smith)
    CARE4CF
    • University Project in
    collaboration with MSFT
    • PWA-based logging app
    to log daily activity of
    participants in study
    • Guest Speaker:
    Jordan Smith
    University College
    London (UK)

    View full-size slide

  46. Case Studies: Trivago, Twitter, Pinterest
    Progressive Web Apps (PWA): Top 3 Case Studies - SimiCart

    View full-size slide

  47. PWA
    Summary
    1. What’s a PWA?
    2. Benefits & Drawbacks
    3. Under the Hood
    4. PWA Tools & Frameworks
    5. PWA Starter: Template
    6. PWA Builder: Audit
    7. PWA Apps: Examples

    View full-size slide

  48. PWA
    Resources
    PWABuilder / MSFT
    PWA on Windows / MSFT
    PWA Training / Google
    PWA Guides / Mozilla
    PWA Case Studies
    PWA in 2021 / firt.dev
    PWA Builder / samples

    View full-size slide

  49. PWA For
    Beginners
    https://aka.ms/pwa-for-beginners

    View full-size slide

  50. PWA For
    Beginners
    Roadmap
    Roadmap here

    View full-size slide

  51. PWA
    Summit
    PWA Summit, October 6-7

    View full-size slide