Progressive Web Apps mit Blazor: Einsatzgebiete, Erfolgsgeschichten, Einschränkungen

Stellen Sie sich vor, Sie schreiben Ihre moderne Businessanwendung genau einmal – und sie läuft auf Windows, macOS, Linux, Android, iOS und im Browser. Diese Anwendungen werden per Fingertippen aus dem Browser auf dem Gerät installiert und funktionieren auch dann, wenn das WiFi im Zug gerade mal wieder nicht funktioniert. Das klingt fantastisch? Dank Progressive Web Apps (PWA) wird all das Wirklichkeit. Mit Hilfe moderner Webtechnologien wird aus einer Webanwendung eine App, die plattformspezifischen Apps in nichts mehr nachsteht. PWAs spielen mit allen Webframeworks zusammen – so auch mit Microsofts Single-Page-App-Framework Blazor. Christian Liebel von Thinktecture gibt Ihnen in dieser Session aktuelle Einblicke, wie Sie Progressive Web Apps mit C# bauen können, für welche Einsatzgebiete sich diese Anwendungen eignen und wo Stärken und Schwächen des PWA-Ansatzes liegen.

Transcript

1. Progressive Web Apps mit Blazor Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Christian Liebel @christianliebel Consultant
2. Blazor WebAssembly Blazor Server Blazor Hybrid Calling arbitrary platform-specific interfaces ❌ (only when packaged) ✅ (server only) ✅ Support for offline capability ✅ ❌ ✅ Executable in browsers ✅ ✅ ❌ Packageable for mobile/desktop plattorms ✅ ❌ ✅ Code can be kept secret ❌ ✅ ❌ Progressive Web Apps mit Blazor Einsatzgebiete, Erfolgsgeschichten, Einschränkungen One Blazor in three flavors
3. SPA Model Progressive Web Apps mit Blazor Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Blazor WebAssembly
4. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
5. https://paint.js.org – Productivity app – Draw images – Lots of actions & tools – Installable – Read/save files – Copy/paste images from/to clipboard – Share files to other apps – Register for file extensions Demo Use Case Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
6. Web App Manifest Service Worker Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
7. Web App Manifest Distinguishes Web Apps from Websites JSON-based file containing metadata for apps only Apps can be identified by search engines, app store providers, etc. PWA Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
8. manifest.webmanifest { "short_name": "Paint", "name": "Paint Workshop", "theme_color": "white", "icons": [{ "src": "icon.png", "sizes": "512x512" }], "start_url": "./", "display": "standalone", "shortcuts": [/* … */] } PWA Names Icons Display Mode Shortcuts Start URL Theme color (status bar/window bar) Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
9. Blazor Support The Blazor PWA template adds a web app manifest and service worker support Progressive Web Apps mit Blazor Einsatzgebiete, Erfolgsgeschichten, Einschränkungen PWA
10. Web App Manifest – Installability Criteria Web App is not already installed User clicked the page at least once and had it open for at least 30 seconds (at any time) Includes a Web App Manifest that has short_name or name, at least a 192px and 512px icon, a start_url and a display mode of fullscreen, standalone or minimal-ui Served over HTTPS Registers a service worker with a fetch event handler (will change!) https://web.dev/install-criteria/#criteria PWA Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
11. Service Worker JavaScript snippet executed in an own thread, registered by the website Acts as a controller, proxy, or interceptor Has a cache to store responses (for offline availability and performance) Can wake up even when the website is closed and perform background tasks (e.g., push notifications or sync) PWA Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
12. Service Worker PWA Service Worker Internet Website HTML/JS Cache fetch Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
13. Blazor Service Worker The Blazor PWA template includes a custom service worker implementation All Blazor assets are precached by default Service Worker behavior can be modified (e.g., for push) à maximum flexibility PWA Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
14. Push Notifications Just as native apps, PWAs can receive push notifications Combination of two technologies: Web Notifications and Push API Supported by Chrome, Edge, Firefox, Safari (on macOS) Support coming to iOS and iPadOS in version 16.4 Progressive Web Apps mit Blazor Einsatzgebiete, Erfolgsgeschichten, Einschränkungen PWA
15. Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
16. Project Fugu Capabilities »Let’s bring the web back – API by API« Thomas Steiner, Google Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
17. Capabilities Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
18. Capabilities https://goo.gle/fugu-api-tracker Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
19. Browser Capabilities navigator.share({ url: 'http://example.com' }); ShareIntent DataTransferManager … NSSharingServicePicker Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
20. …and Blazor But: Most Fugu APIs are JavaScript-based Accessing JavaScript APIs from Blazor is relatively hard Solution: Wrapper packages that make JavaScript APIs accessible in C# Progressive Web Apps mit Blazor Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Capabilities
21. Open-source NuGet packages API NuGet Package Async Clipboard API Thinktecture.Blazor.AsyncClipboard Badging API Thinktecture.Blazor.Badging File System API KristofferStrube.Blazor.FileSystem File System Access API KristofferStrube.Blazor.FileSystemAccess File Handling API Thinktecture.Blazor.FileHandling Web Share API Thinktecture.Blazor.WebShare Progressive Web Apps mit Blazor Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Capabilities
22. Async Clipboard API Allows reading from/writing to the clipboard in an asynchronous manner (UI won’t freeze during long-running operations) Reading from the clipboard requires user consent first (privacy!) Supported by Chromium- based browsers and Safari Capabilities Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
23. Async Clipboard API var clipboardItem = new ClipboardItem( new Dictionary<string,IJSObjectReference> { { "image/png", imagePromise } }); await _asyncClipboardService.WriteAsync( new[] { clipboardItem } ); Capabilities Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
24. Web Share API Allows sharing a title, URL, text, or files API can only be invoked as a result of a user action (i.e. a click or keypress) Supported by Chrome on Windows and Chrome OS, Edge, Safari Capabilities Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
25. Web Share API var data = new WebShareDataModel { Files = new[] { fileReference } }; await _shareService.ShareAsync(data); Capabilities Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
26. File System Access API Some applications heavily rely on working with files (e.g. Visual Studio Code, Adobe Photoshop, …) File System Access API allows you to open, save and override files and directories Supported by Chromium- based browsers on desktop Capabilities Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
27. File System Access API try { var fileHandles = await _fileSystemAccessService .ShowOpenFilePickerAsync (_filePickerOptions); _fileHandle = fileHandles.Single(); } catch (JSException ex) { Console.WriteLine(ex); } Capabilities Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
28. File System Handling API Register your PWA as a handler for file extensions Requires installing the application first Declare supported extensions in Web App Manifest and add imperative code to your application logic Capabilities Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
29. File System Handling API "file_handlers": [{ "action": "./", "accept": { "text/plain": [".txt"] } }] Capabilities Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
30. File System Handling API await _fileHandlingService.SetConsumerAsync(async (launchParams) => { foreach (var fileSystemHandle in launchParams.Files) { if (fileSystemHandle is FileSystemFileHandle fileSystemFileHandle) { var file = await fileSystemFileHandle.GetFileAsync(); var text = await file.TextAsync(); Console.WriteLine(text); } } }); Capabilities Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
31. Badging API Displays a badge on the installed application’s icon as a less obtrusive alternative to notification banners Well known from applications like email clients, instant messengers, or to-do apps Requires your application to be installed Progressive Web Apps mit Blazor Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Capabilities
32. Badging API await badgingService.SetAppBadgeAsync(3); Progressive Web Apps mit Blazor Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Capabilities
33. Overview Use available interfaces and functions of a system (opposite of Graceful Degradation) Users with modern, feature-rich browsers get a better experience Apps are available on older browsers, but with limited functionality Concept: Browser feature support should grow over time—thereby more users can enjoy an increasing number of features Progressive Enhancement Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
34. Overview if (await _fileSystemAccessService.IsSupported()) { // use API } else { // use fallback or disable feature } Check whether an API/feature is available. If yes—use it! Otherwise: 1. Disable/hide the functionality 2. Fall back to an alternative API (if available) Progressive Enhancement Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
35. Disabling unsupported features <button @onclick="Copy" disabled="@(!_clipboardApiSupported)"> Copy </button> <button @onclick="Paste" disabled="@(!_clipboardApiSupported)"> Paste </button> <button @onclick="Share" disabled="@(!_shareApiSupported)"> Share </button> Progressive Enhancement Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
36. Providing an alternative implementation await _imageService.DownloadAsync(await _canvas!.ToDataURLAsync()); Progressive Enhancement Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
37. Deployment Electron/Capacitor JS HTML CSS .ipa .exe .app ELF .apk .appx Single-Page Application Capacitor/Cordova Electron/Tauri Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
38. – Productivity apps – IDEs, code editors – Video editors – Image editors – Office applications – Document editors – Presentation apps – Enterprise applications Progressive Web Apps mit Blazor Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Use Cases
39. Spotify Progressive Web Apps mit Blazor Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Use Cases https://open.spotify.com/
40. VS Code Progressive Web Apps mit Blazor Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Use Cases https://vscode.dev/
41. Photoshop Progressive Web Apps mit Blazor Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Use Cases https://creativecloud.adobe.com/cc/photoshop
42. PWA – Installation may not be obvious – Only web platform APIs can be called – Antivirus software or cloud sync agents can’t be implemented – Some APIs may not be available on all browsers and OS’s Progressive Web Apps mit Blazor Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Limitations
43. Blazor – C#, but knowledge of HTML, CSS and JS will still be required – Rider support is not great – Caching can lead to confusion while testing – Very large bundles = high initial loading time (mobile users!) – Blazor WebAssembly: 2 MB (without culture info) – Angular: 50 kB – Firewalls may block the transfer of DLL files – Summary: Maybe not the best solution for B2C apps where the environment cannot be controlled Progressive Web Apps mit Blazor Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Limitations
44. PWA – Write once, run anywhere becomes reality – Web apps continue to become more powerful, on all platforms Blazor – Blazor is interesting for teams with C# and .NET knowledge – Data models may be shared between client and server – Existing (legacy) code may be transferred to the web Progressive Web Apps mit Blazor Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Success Stories
45. Blazor: Reuse your existing C# and .NET knowledge and implement great applications that run just fine in the browser and all relevant OS’s PWA: Improve the experience by allowing users to install your app and run it offline Fugu: Add capabilities for an even deeper integration with the OS using C#-based NuGet packages Progressive Enhancement: Ensure that users of older or less powerful browsers can still use the app Let’s build great apps for the web! Summary Einsatzgebiete, Erfolgsgeschichten, Einschränkungen Progressive Web Apps mit Blazor
46. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com https://www.thinktecture.com/ueber-uns/karriere/