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

Transcript

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

   View Slide

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

   View 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 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 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 Slide

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

   View 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 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 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 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 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 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 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 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 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 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 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 Slide

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

    View Slide

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

    View 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 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 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 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 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 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 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 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 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 Slide

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

    View 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 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 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 Slide

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

    View Slide

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

    View 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 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 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 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 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 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 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 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 Slide

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

    View 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 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 Slide

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

    View 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 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 Slide

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

    View Slide

50. PWA For
    Beginners
    Roadmap
    Roadmap here
    

    View Slide

51. PWA
    Summit
    PWA Summit, October 6-7
    

    View Slide