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