Be Offline Ready with Progressive Web Apps

Presented at the Game Of Learners Pre-Season Training Series 2022:
https://www.microsoft.com/MEA/Gameoflearners/

Abstract:
Progressive Web Apps are traditional web apps that are progressively enhanced to deliver richer experiences (comparable to platform-native apps) on more capable devices. In this workshop, we'll walk through the core concepts of Progressive Web Apps, learn about development tools we can use to simplify our build-deploy workflows, and walk through the steps of enhancing an existing web app to support desirable PWA characteristics.

Related:
Check out the #30DaysOfPWA series for more details
https://dev.to/nitya/series/16849

Transcript

1. Progressive Web Apps Nitya Narasimhan | @nitya Senior Cloud Advocate, Microsoft March 2022 Be Offline Ready With
2. @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA
3. 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
4. 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
5. 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
6. Traditional web apps have reach. But are limited in capability since they need to work on all browsers @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA
7. @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
8. PWAs have reach and capability! @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA
9. 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
10. 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
11. Exercise: Try installing a sample PWA on your desktop! https://docs.microsoft.com/microsoft-edge/progressive-web-apps-chromium/demo-pwas
12. 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
13. 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
14. Building Blocks: What are the core components of a PWA? @nitya | @sketchthedocs https://pwastats.com Open web standards and technologies that enable progressive enhancement
15. Inspect Sample PWA: See components in action @nitya | @sketchthedocs https://devtoolstips.org
16. Audit Sample PWA: Judge PWA quality by core components @nitya | @sketchthedocs https://pwabuilder.com
17. 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
18. 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
19. 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)
20. 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
21. Web App Manifest: How does it work? manifest.json created and added to app folder for deployment <link rel=“manifest” href=“/manifest.json” manifest linked to app HTML for discovery manifest by app store when publishing PWA manifest used by device when installing PWA @nitya | @sketchthedocs https://developer.mozilla.com/docs/WebManifest
22. What makes a minimal vs. good manifest? @nitya | @sketchthedocs https://pwabuilder.com Simplest manifest can have just - name - start_url - lang
23. 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
24. 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
25. 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
26. Inspect the sample PWA: See service worker in action @nitya | @sketchthedocs https://devtooltips.org
27. 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
28. 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)
29. 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
30. 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
31. 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
32. 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
33. 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
34. Then & Now: Interactive Walkthrough ( Post | Code | Demo) @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA
35. 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
36. 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!!
37. 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
38. Thank You! Q&A https://bit.ly/30DaysOfPWA @nitya | @sketchthedocs https://bit.ly/30DaysOfPWA