PWA Roman Jašek RIGANTI s.r.o. Microsoft MVP roman.jasek@riganti.cz Goals • Understand what a PWA is • Understand what you need to make a website into PWA • Know the pros and cons of PWAs • Know what tools can help you Progressive Web Apps • Existing web site • No hybrid applications • Easy installation • Faster service • Native device features • Updates without Store • Discoverability Concepts Manifest Service Worker Caching Storage Tools Platforms Tips You only need 3 things • HTTPS • Web App Manifest • Service Worker Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Web App Manifest • Metadata of your application • • Properties • short_name and/or name • icons • start_url • background_color • theme_color • display • orientation • scope Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Service Worker • Separate script from web • Runs in background • Interferes requests Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Service Worker • Caching • Background sync • Push notifications • Cannot access DOM • Reacts to events • You need HTTPS Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Service Worker registration • Check if service worker is supported if ('serviceWorker' in navigator) • Register navigator.serviceWorker.register('service-worker.js'); Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Service Worker Lifecycle • Installing • Cache static assets • Activated • Manage old caches • Idle • Fetch/Message • Process request Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Cache Only Caching strategies Network Only 1 2 3 1 2 3 Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Caching strategies Cache First Network First 1 2 3 4 1 2 3 4 Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Caching Strategies Stale-While-Revalidate 1 2 3 4 5 Concepts Manifest Service Worker Caching Storage Tools Platforms Tips PWA Sample Demo Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Local storage • No expiration date • Key-value storage for strings • About 5MB limit • Not accessible from service worker Concepts Manifest Service Worker Caching Storage Tools Platforms Tips SQLite • We are still on the client • Where do we store the .db file? • Native File System to the rescue? Concepts Manifest Service Worker Caching Storage Tools Platforms Tips IndexedDB • Size limit – depends on browser – but is in 10s or 100s of MBs • Also accessible from service worker • More complex than LocalStorage • Need to take care of updating schema of database on client • But enables more advanced scenarios • Dexie.js – nice library for working with IndexedDb Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Sync When Online • Detect when the web goes online/offline • JavaScript - navigator.online • Sync local data with server • Logic depends on application Concepts Manifest Service Worker Caching Storage Tools Platforms Tips JavaScript Interoperability • [JSInvokable] attribute – enable calling of method from JavaScript • In JavaScript - interop.invokeMethodAsync() • 1st parameter – name of method • Other parameters – method parameters • IJSRuntime – run JavaScript from C# code • InvokeVoidAsync() – no return value expected • InvokeAsync<>() – return value expected Concepts Manifest Service Worker Caching Storage Tools Tips Data Storage Demo Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Chrome Developer Tools • Application • Manifest • Service Workers • Storage • Audits • Progressive Web App • Remote Target Concepts Manifest Service Worker Caching Storage Tools Platforms Tips PWA builder • Check your PWA capabilities • Add a prepared service worker • Add features • Generate – Android, Windows, iOS, Meta Quest • VS Code extension • https://www.pwabuilder.com/ Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Android App • Option 1: Download a pre-built package from PWA builder • Option 2: Create a project in Android Studio • Option 3: Download a ready-made TWA Android Studio project and modify URLs and images: https://github.com/AJONPLLC/com-ajonpapp (how to use: https://www.youtube.com/watch?v=db9Y5jyparA) Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Trusted Web Activities – TWA • Android only • The app and web are from the same developer • Digital Asset Links file • Rendered in user’s browser • Fullscreen • https://developers.google.com/web/updates/2019/02/using-twa Concepts Manifest Service Worker Caching Storage Tools Tips iOS App • From browser • Add custom install prompt • Supported • App Store: • Cordova Concepts Manifest Service Worker Caching Storage Tools Tips Native Features • Shortcuts Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Native Features • Shortcuts • Window Controls Overlay Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Native Features • Shortcuts • Window Controls Overlay • Web Share API Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Native Features • Shortcuts • Window Controls Overlay • Web Share API • Badging Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Native Features • Shortcuts • Window Controls Overlay • Web Share API • Badging • Push Notifications Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Project Fugu • Web Apps should be able to do anything iOS/Android/desktop apps can. • File, Url and protocol handling • Native file system access – save file to its original location • Run on OS login • Title bar customization - override default window titlebar • Share target • App shortcuts (jump lists) • https://web.dev/fugu-status/ Concepts Manifest Service Worker Caching Storage Tools Platforms Tips 30 Days of PWA • Step-by-step tutorial for understanding PWAs • Core Concepts • Advanced Capabilities • Developer Tools • Platforms & Practices • https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/ Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Real World PWAs Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Source Code https://github.com/nesfit/IW5/tree/main/src/CookBook Concepts Manifest Service Worker Caching Storage Tools Platforms Tips Application Development Overview Reach Power PWA Native App with WebView Site Native App Web Hybrid Native Service Worker HTTPS Web App Manifest Q&A