.NET Day 19 - Progressive Web Apps for .NET Developers An Overview by Christian Liebel

Progressive Web Apps work anywhere from iOS to Windows, run offline and can make use of native functionality such as camera access or geolocation. Thinktecture’s Christian Liebel shows you the technological foundations of this very promising application model, demonstrates how your PWAs can integrate with the Windows Runtime and what the new Chromium-based Edge means for Progressive Web Apps.

Transcript

1. Christian Liebel @christianliebel Consultant Progressive Web Apps for .NET Developers An Overview
2. Hello, it’s me. Progressive Web Apps for .NET Developers An Overview Christian Liebel Follow me: @christianliebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform & Serverless
3. Progressive Web Apps for .NET Developers An Overview - Das PWA-Anwendungsmodell - Web App Manifest - Service Worker und Cache API - Workbox: Toolkit für PWAs - Angular-Unterstützung für PWAs - Natives Look & Feel - Migrieren & veröffentlichen - Payment Request API & Apple Pay www.rheinwerk-verlag.de/4707
4. Cross-Platform UI Frameworks & .NET Core An Overview Progressive Web Apps for .NET Developers ? Xamarin UWP WinForms WPF
5. PWA! Cross-Platform UI Frameworks & .NET Core An Overview Progressive Web Apps for .NET Developers
6. Google’s Idea • No app stores anymore! • Web App = App App • Feature parity: Push notifications, offline availability and more for web & native applications • Backwards compatibility: PWAs can also be run on non-PWA browsers, but with reduced feature set Progressive Web Apps An Overview Progressive Web Apps for .NET Developers
7. An Overview Progressive Web Apps for .NET Developers Blazor
8. Progressive Web Apps HTML5, JavaScript, CSS3 Service Worker API Fetch API Web Notifications Web Workers Push API Web App Manifest HTTPS PWA Technology Overview An Overview Progressive Web Apps for .NET Developers
9. The Power of the Modern Web Web Share API Gamepad API Payment Request API Generic Sensor API Web Bluetooth API Shape Detection API Web Notifications WebVR WebRTC WebGL Speech Synthesis Web Cryptography API IndexedDB Geolocation Canvas Media Capture and Streams An Overview Progressive Web Apps for .NET Developers
10. Platform Support PWA Status Quo An Overview Progressive Web Apps for .NET Developers 17 11.1 44 40 4.1 Chrome 40 11.3
11. Platform Support Microsoft Edge uses Chromium (Blink + V8) in the future Edge comes to macOS Improved support for modern web APIs (~ as many as Chrome) Progressive Web Apps for .NET Developers An Overview PWA Status Quo
12. Progressive Web Apps are not a technology, but a collection of features an application must/should support. “Uber Pattern” An Overview Progressive Web Apps for .NET Developers
13. An Overview Progressive Web Apps for .NET Developers Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
14. https://pwa.liebel.io Progressive Web Apps for .NET Developers An Overview
15. Progressive Web Apps for .NET Developers An Overview Responsive
16. Reference Apps and Internal App States Goal: Directly link to applications or application states/views (deep link) Key technology for references in the World Wide Web: Hyperlinks Schema for hyperlinks: Uniform Resource Locator (URL) Hash Anchor (e.g. SPA) https://myapp.com/#/profile/peter.mueller HTML5 History (SPA)/Server Rendered https://myapp.com/profile/peter.mueller Linkable An Overview Progressive Web Apps for .NET Developers
17. Distinguish Web Apps from Websites How to distinguish websites from apps? Idea: Add a file with metadata for apps only Advantage: Apps can be identified by search engines, app store providers etc. Web App Manifest <link rel="manifest" href="manifest.json"> Discoverable An Overview Progressive Web Apps for .NET Developers
18. manifest.json { "short_name": "PWA Demo", "name": "PWA Demo", "icons": [ { "src": "assets/icon-144x144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone" } Web App Manifest Title Icons Start URL Display Type Age Rating Additional Config Description Related Apps An Overview Progressive Web Apps for .NET Developers
19. Display Modes Progressive Web Apps for .NET Developers An Overview Web App Manifest browser minimal-ui standalone fullscreen
20. Icon Purposes Progressive Web Apps for .NET Developers An Overview Web App Manifest (any) any context (e.g. app icon) badge different space constraints/ color requirements maskable user agent masks icon as required Safe Zone Windows iOS Android
21. Self publishing Developer publishes the App in the Microsoft Store under his own name Auto indexing (beta) High-quality PWAs are automatically discovered, reviewed and published in the store by Bing PWAs & Microsoft Store An Overview Progressive Web Apps for .NET Developers
22. Benefits PWAs & Microsoft Store An Overview Progressive Web Apps for .NET Developers • Analytics (usage duration, installs/uninstalls, crashes etc.) • No storage quotas • Access to UWP APIs • Monetization • Ratings • Featured apps
23. Progressive Web Apps for .NET Developers An Overview PWAs & Microsoft Store
24. Web App Manifest PWA: Web app and installed app are one and the same, so the web app can be directly added to the home screen instead The appearance of the home screen/ programs list icon is defined by the Web App Manifest Installable An Overview Progressive Web Apps for .NET Developers
25. An Overview Progressive Web Apps for .NET Developers
26. manifest.json { "short_name": "PWA Demo", "name": "PWA Demo", "icons": [ { "src": "assets/icon-144x144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone" } Installable An Overview Progressive Web Apps for .NET Developers
27. Web Apps that feel natively Native functionality with HTML5 technologies • Playing audio and video • Hardware accelerated 2D/3D graphics • Gamepad • Touch input • Location-based services • Access to camera • … Progressive Web Apps for .NET Developers An Overview App-like
28. Web Apps that feel natively Progressive Web Apps for .NET Developers An Overview App-like
29. Offline capability Challenge: Connection strength varies a lot (especially en route) Lie-Fi: Connection strength of a public WiFi is weak or even completely offline Goal: App works offline or with a weak connection at least within the possibilities (e.g. OneNote) Hence: Local data storage is needed—synchronization/conflict management required (Web Background Synchronization) Progressive Web Apps for .NET Developers An Overview Connectivity Independent
30. Service Worker as a controller/proxy/interceptor Progressive Web Apps for .NET Developers An Overview Connectivity Independent Service Worker Internet Website HTML/JS Cache fetch
31. 1. Cache only 2. Network only 3. Cache falling back to network 4. Cache & network race 5. Network falling back to cache 6. Cache then network 7. Generic fallback 8. ServiceWorker-side templating Progressive Web Apps for .NET Developers An Overview Caching Strategies
32. IndexedDB Indexed Database (IndexedDB) is a database in the browser capable of storing structured data in tables with keys and value Data is stored permanently (survives browser restarts) Service Worker and website share access to the same IndexedDB database (e.g. for synchronization purposes) IndexedDB can help when storing client data, whereas Service Worker helps caching server data Progressive Web Apps for .NET Developers An Overview Connectivity Independent
33. IndexedDB Progressive Web Apps for .NET Developers An Overview Connectivity Independent
34. SwUpdate The Service Worker caches a specific version of your application. If the user is online, you want to deliver the latest version of your app. When new versions become available, you might want to notify the user to update the application. Progressive Web Apps for .NET Developers An Overview Fresh
35. PWAs Require HTTPS! Service workers are very powerful • Can answer representatively for the server • Runs outside of the tab’s/window’s lifecycle Installation of service workers is only allowed via a secure connection Exception: localhost (for development purposes) PWAs can only be delivered via HTTPS Problem: TLS certificates are required (costs/renewal) Safe An Overview Progressive Web Apps for .NET Developers
36. HTTP sites are “Not Secure” in Chrome 68+ Progressive Web Apps for .NET Developers An Overview Safe
37. Free with automatic renewal Initiative of the Linux Foundation Automatic domain validation (Class 1) Website/Webservice has to be public available Period of validity: Comparatively short (90 days) Usage of TLS/SSL as easy as possible Plugins are available for IIS, Apache, Microsoft Azure, Plesk, … free! Let’s Encrypt An Overview Progressive Web Apps for .NET Developers
38. Get the user back with notifications Idea: Push the users to use the app again Known from social networks or games, etc. Combination of two technologies: • Web Notifications • Push API Progressive Web Apps for .NET Developers An Overview Re-Engageable
39. Sending Push Notifications Progressive Web Apps for .NET Developers An Overview Re-Engageable Push Service Server 4. Send Message to Push Service endpoint 5. Response (success/fail) 1. Register for push 2. Send push information to client 6. Push to client Client(s) 3. Send push endpoint
40. Advance with Progressive Enhancement Idea: Use available interfaces and functions of a system Users with modern, feature-rich browsers are getting better experience Apps are available on older browsers but with limited functionality Concept: Browser feature support grows over time—thereby more users can enjoy an increasing number of app features Progressive Web Apps for .NET Developers An Overview Progressive
41. Progressive Web Apps for .NET Developers An Overview Web Capabilities/Project Fugu Shape Detection API Wake Lock API Badging API Writable Files API 9
42. Motivation - Communicate updates without distracting the user (in constrast to push notifications) - Typically displays a badge on the home screen, task bar or dock - Appearance varies from platform to platform Progressive Web Apps for .NET Developers An Overview Badging API
43. https://appsco.pe/ Reference Apps An Overview Progressive Web Apps for .NET Developers
44. twitter.com Reference Apps An Overview Progressive Web Apps for .NET Developers
45. Spotify Web Player Reference Apps An Overview Progressive Web Apps for .NET Developers
46. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com