Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Superkräfte für Blazor-Apps dank Project Fugu

Superkräfte für Blazor-Apps dank Project Fugu

Project Fugu ist eine gemeinsame Initiative von Microsoft, Google und weiteren Unternehmen, um das Web noch leistungsfähiger zu machen.

So kamen über die letzten Jahre etwa der Zugriff auf das Dateisystem oder die Zwischenablage ins Web. Natürlich kommen diese neuen Schnittstellen allen Webentwicklern zugute: Auch, wenn ihr Blazor WebAssembly einsetzt. Da die APIs aber JavaScript basiert sind, braucht es zur einfachen Verwendung in der C#-Welt Wrapper.

Genau die haben Patrick Jahr und Christian Liebel von Thinktecture sowie weitere Mitglieder der Community geschrieben. Patrick und Christian zeigen euch, wie ihr die Wrapper-Pakete einsetzt und auch eure Blazor-App mit Superkräften ausstattet.

Patrick Jahr

March 24, 2023
Tweet

More Decks by Patrick Jahr

Other Decks in Programming

Transcript

  1. 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 ❌ ✅ ❌ Superkräfte für Blazor-Apps dank Project Fugu One Blazor in three flavors
  2. 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 Superkräfte für Blazor-Apps dank Project Fugu
  3. 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 Superkräfte für Blazor-Apps dank Project Fugu
  4. 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) Superkräfte für Blazor-Apps dank Project Fugu
  5. Blazor Support The Blazor PWA template adds a web app

    manifest and service worker support Superkräfte für Blazor-Apps dank Project Fugu PWA
  6. 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 Superkräfte für Blazor-Apps dank Project Fugu
  7. 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 Superkräfte für Blazor-Apps dank Project Fugu
  8. Service Worker PWA Service Worker Internet Website HTML/JS Cache fetch

    Superkräfte für Blazor-Apps dank Project Fugu
  9. 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 Superkräfte für Blazor-Apps dank Project Fugu
  10. 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 Superkräfte für Blazor-Apps dank Project Fugu PWA
  11. Project Fugu Capabilities »Let’s bring the web back – API

    by API« Thomas Steiner, Google Superkräfte für Blazor-Apps dank Project Fugu
  12. …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# Superkräfte für Blazor-Apps dank Project Fugu Capabilities
  13. 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 Superkräfte für Blazor-Apps dank Project Fugu Capabilities
  14. 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 Superkräfte für Blazor-Apps dank Project Fugu
  15. Async Clipboard API var clipboardItem = new ClipboardItem( new Dictionary<string,IJSObjectReference>

    { { "image/png", imagePromise } }); await _asyncClipboardService.WriteAsync( new[] { clipboardItem } ); Capabilities Superkräfte für Blazor-Apps dank Project Fugu
  16. 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 Superkräfte für Blazor-Apps dank Project Fugu
  17. Web Share API var data = new WebShareDataModel { Files

    = new[] { fileReference } }; await _shareService.ShareAsync(data); Capabilities Superkräfte für Blazor-Apps dank Project Fugu
  18. 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 Superkräfte für Blazor-Apps dank Project Fugu
  19. File System Access API try { var fileHandles = await

    _fileSystemAccessService .ShowOpenFilePickerAsync (_filePickerOptions); _fileHandle = fileHandles.Single(); } catch (JSException ex) { Console.WriteLine(ex); } Capabilities Superkräfte für Blazor-Apps dank Project Fugu
  20. 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 Superkräfte für Blazor-Apps dank Project Fugu
  21. File System Handling API "file_handlers": [{ "action": "./", "accept": {

    "text/plain": [".txt"] } }] Capabilities Superkräfte für Blazor-Apps dank Project Fugu
  22. 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 Superkräfte für Blazor-Apps dank Project Fugu
  23. 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 Superkräfte für Blazor-Apps dank Project Fugu Capabilities
  24. 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 Superkräfte für Blazor-Apps dank Project Fugu
  25. 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 Superkräfte für Blazor-Apps dank Project Fugu
  26. 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 Superkräfte für Blazor-Apps dank Project Fugu
  27. Deployment Electron/Capacitor JS HTML CSS .ipa .exe .app ELF .apk

    .appx Single-Page Application Capacitor/Cordova Electron/Tauri Superkräfte für Blazor-Apps dank Project Fugu
  28. – Productivity apps – IDEs, code editors – Video editors

    – Image editors – Office applications – Document editors – Presentation apps – Enterprise applications Superkräfte für Blazor-Apps dank Project Fugu Use Cases
  29. 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 Superkräfte für Blazor-Apps dank Project Fugu Limitations
  30. 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 Superkräfte für Blazor-Apps dank Project Fugu Limitations
  31. 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 Superkräfte für Blazor-Apps dank Project Fugu Success Stories
  32. 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 Superkräfte für Blazor-Apps dank Project Fugu