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

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

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

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)

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.

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

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

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)

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)

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

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

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

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

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

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)

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)

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)

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

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

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

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)

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)

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)

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

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

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

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

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

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

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

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

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

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

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

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

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

• 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

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

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

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

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

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

PWA Builder: Ship to App Stores PWA Builder Blog

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

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)

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

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

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

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

PWA For Beginners Roadmap Roadmap here

PWA Summit PWA Summit, October 6-7