Be Offline Ready with Progressive Web Apps

Slide 1

Slide 1 text

Progressive Web Apps Nitya Narasimhan | @nitya Senior Cloud Advocate, Microsoft March 2022 Be Offline Ready With

Slide 2

Slide 2 text

@nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

Slide 3

Slide 3 text

Agenda • Introducing PWA • Deconstructing PWA • Make PWA Installable • Make PWA Reliable • Make PWA Work Offline • Make PWA Capable • Developing your PWA • Testing your PWA https://bit.ly/30DaysOfPWA @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Introducing PWA Progressive web apps are • Traditional web apps that are • Progressively enhanced using open web technologies • Helping them deliver usable experiences everywhere • And scale up to enhanced experiences on capable devices • Making them feel just like native apps on that device @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

Slide 6

Slide 6 text

Traditional web apps have reach. But are limited in capability since they need to work on all browsers @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

Slide 7

Slide 7 text

@nitya | @sketchthedocs https://bit.ly/30DaysOfPWA Platform “native” apps have richer capabilities. But are limited in reach because they are optimized to work on that device

Slide 8

Slide 8 text

PWAs have reach and capability! @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

Slide 9

Slide 9 text

The secret ingredient is progressive enhancement Deliver usable baseline experience everywhere, even on older browsers just like any web app Use open web standards and new web capabilities to unlock new powers on more capable devices Deliver rich experiences using new capabilities supported by that device just like native apps @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

Slide 10

Slide 10 text

Characteristics of good PWAs Responsive = adapts to device screen size, orientation, inputs Discoverable = with web search (like web apps) and in app stores (like native apps) Network Independent = usable experience even in flaky networks, including working offline Secure = end-to-end encrypted communications and privacy safeguards to prevent tampering Re-Engageable = use push notifications and other tools to bring user back to PWA, even if not actively in use Progressively Enhanced = use new web capabilities to scale up baseline experiences on capable devices Linkable = link, share, bookmark any page within the app Installable = can be added to device home screen and found/launched just like native apps @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

Slide 11

Slide 11 text

Exercise: Try installing a sample PWA on your desktop! https://docs.microsoft.com/microsoft-edge/progressive-web-apps-chromium/demo-pwas

Slide 12

Slide 12 text

In the real world: What motivated PWA deployment? 2020 – Lyft PWA got 40% more clicks vs. the “Download app” option 2018 - Starbucks PWA had 2X daily users at launch, comparable order rates to mobile & desktop 2017 - Trivago PWA got 150% more engagement post install, 97% increase in clockouts @nitya | @sketchthedocs https://pwastats.com

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Building Blocks: What are the core components of a PWA? @nitya | @sketchthedocs https://pwastats.com Open web standards and technologies that enable progressive enhancement

Slide 15

Slide 15 text

Inspect Sample PWA: See components in action @nitya | @sketchthedocs https://devtoolstips.org

Slide 16

Slide 16 text

Audit Sample PWA: Judge PWA quality by core components @nitya | @sketchthedocs https://pwabuilder.com

Slide 17

Slide 17 text

Functionality: What does each component contribute? @nitya | @sketchthedocs https://pwabuilder.com Think of the PWA like a startup. HTTPS is a security officer, gates access Service Worker is the chief of staff, works in background. Web App Manifest is the company resume Web Capabilities are consultants on demand

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Web App Manifest: Let’s look at the sample PWA @nitya | @sketchthedocs https://developer.mozilla.com/docs/WebManifest The web app manifest is a valid JSON file with defined members like: • short_name - app name for constrained spaces (e.g., home screen) • categories - hints for stores or app catalogs. (See W3C examples) • display - how much of browser UI does user see in app? • background_color - placeholder to show (before stylesheet loads) • theme_color - default theme color for app • scope - what web pages can be viewed (navigation scope) • description - what is the app about? • icons - array of icon images used in various contexts • screenshots - showcase application UI/UX (e.g., for app stores)

Slide 20

Slide 20 text

Web App Manifest: Make PWA installable Think of the Manifest like a resume for the PWA written in JSON. Identity – name, start URL, categories Branding – icons, colors, screenshots Skills – properties for web capabilities Web Capabilities are consultants on demand @nitya | @sketchthedocs https://developer.mozilla.com/docs/WebManifest

Slide 21

Slide 21 text

Web App Manifest: How does it work? manifest.json created and added to app folder for deployment

Slide 22

Slide 22 text

What makes a minimal vs. good manifest? @nitya | @sketchthedocs https://pwabuilder.com Simplest manifest can have just - name - start_url - lang

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Service Workers: Making PWA reliable & re-engageable The PWA is like the chief of staff to the main app thread (CEO) Web Worker runs in a background, unblocks CEO (time-intensive tasks) Network Proxy – intercept app requests & handle it Cache Manager – make sure app has resources to continue working offline Event Listener – run in the background and me ready to handle async events like push notifications @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

Slide 25

Slide 25 text

Service Workers: Lifecycle and functionality Defined in its own file. Its location sets its scope for influence. Registration = “hired”. Worker is downloaded. Install Event = “badged” Worker can pre-cache resources while waiting. Activate Event = “in office” Worker signals it’s ready to handle functional events. Clears out previous worker assets in cache. Functions = handle fetch, push, message, sync etc. @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

Slide 26

Slide 26 text

Inspect the sample PWA: See service worker in action @nitya | @sketchthedocs https://devtooltips.org

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Network-Independent: What does offline-ready mean? @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA Detect and respond to network changes with usable experiences. Provide a custom offline page (keep user engaged) Precache assets, responses (make ready for offline use) Proxy requests – decides response based on policy & current state Manage cache – know my storage options, enforce cache strategy, refresh on periodic sync (if enabled)

Slide 29

Slide 29 text

Storage & Strategy: Cache API & Policy, Indexed DB Cache stores request- response pairs. Service worker can have multiple named caches if needed. IndexedDB stores large amounts of unstructured data in transactional, object-oriented database Service workers only use storage that is async-ready Cache policies include on- install (performant) , cache- first (on fetch) etc. @nitya | @sketchthedocs https://devtooltips.org

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Web Capabilities: Let’s talk about Project Fugu @nitya | @sketchthedocs https://fugu-tracker.web.app Multi-organization initiative: help web apps do anything native apps can do. Project Fugu API Tracker shows current proposals and state of adoption in browsers Process is open, anyone can provide feedback, propose new features, vote priorities. Workflow – feature request, under consideration, dev and origin trials, then ship/drop. Sample PWA see capabilities in action in real contexts

Slide 32

Slide 32 text

Slide 33

Slide 33 text

An Offline Cookbook: Let’s PWA-enable an existing web app @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA • Select a Web App • Audit the Baseline • Secure it with HTTPS • A PWABuilder Assist • Configure App Manifest • Add Service Worker • Audit the Final Version • Validate with Usage

Slide 34

Slide 34 text

Then & Now: Interactive Walkthrough ( Post | Code | Demo) @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Sneak Peek: Developer Tools in Week 3 of #30DaysOfPWA @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA PWABuilder tools for authoring, auditing and packaging for app store Edge DevTools for debugging, profiling and experimenting Playwright for end-to- end test automation webhint for linting code to improve accessibility, cross-browser compat and performance VSCode extensions!!

Slide 37

Slide 37 text

Playwright: Reliable End-to-End Testing For Modern Web Apps @nitya | @sketchthedocs https://playwright.dev Unified API for cross- browser, cross-platform testing. Multi-language development libraries Powerful Tooling for authoring, debugging, profiling, reporting Resilient Testing with auto-wait and web-first assertions (no timeouts!) Fast, Isolated Testing with browser contexts, parallelization Demo.Playwright

Slide 38

Slide 38 text

Thank You! Q&A https://bit.ly/30DaysOfPWA @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA