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

5b392dc79d5b6d1dab580bf60e26fb7c?s=128

Nitya Narasimhan, PhD

August 30, 2021
Tweet

Transcript

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

    2021
  2. About Me • PhD, Distributed Systems • 20+ years Industry

    & Startups • Software Research & Eng. • Community Builder • Senior Cloud Advocate • Visual Storyteller
  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
  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)
  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.
  6. PWA Examples in the Real World Learn More: 12 Best

    Examples of PWA in 2021
  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
  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)
  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)
  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
  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
  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
  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
  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
  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)
  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)
  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)
  18. About: When to Cache First • On install as dependency

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

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

    • On install, no dependency • On user interaction event The Offline Cookbook (web.dev)
  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)
  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)
  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)
  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
  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 <link rel="manifest" href="manifest.json"> Browser Compatibility Specification Use the Web App Manifest to integrate PWA into target OS
  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
  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
  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
  29. About: Project Fugu Tracker Fugu API Tracker (fugu-tracker.web.app) | Explore

    codelab
  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
  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
  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
  33. Lighthouse: Automated auditing Lighthouse | Tools for Web Developers |

    Google Developers | PWA audits (web.dev)
  34. Chrome / Edge : DevTools https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium | Using DevTools with

    PWA
  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
  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
  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
  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
  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
  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
  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
  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
  43. PWA Builder: Ship to App Stores PWA Builder Blog

  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
  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)
  46. Case Studies: Trivago, Twitter, Pinterest Progressive Web Apps (PWA): Top

    3 Case Studies - SimiCart
  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
  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
  49. PWA For Beginners https://aka.ms/pwa-for-beginners

  50. PWA For Beginners Roadmap Roadmap here

  51. PWA Summit PWA Summit, October 6-7