Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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)

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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)

Slide 9

Slide 9 text

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)

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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)

Slide 16

Slide 16 text

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)

Slide 17

Slide 17 text

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)

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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)

Slide 22

Slide 22 text

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)

Slide 23

Slide 23 text

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)

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

• 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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

PWA Builder: Ship to App Stores PWA Builder Blog

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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)

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

PWA For Beginners Roadmap Roadmap here

Slide 51

Slide 51 text

PWA Summit PWA Summit, October 6-7