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. Christian Liebel Patrick Jahr
    @christianliebel @jahr_patrick
    Consultant Developer Consultant
    Superkräfte für Blazor-Apps
    dank Project Fugu

    View full-size slide

  2. Hello again :)

    View full-size slide

  3. 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

    View full-size slide

  4. SPA Model
    Superkräfte für Blazor-Apps dank Project Fugu
    Blazor WebAssembly

    View full-size slide

  5. Responsive Linkable Discoverable Installable App-like
    Connectivity
    Independent
    Fresh Safe Re-engageable Progressive
    Superkräfte für Blazor-Apps dank Project Fugu

    View full-size slide

  6. 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

    View full-size slide

  7. Web App
    Manifest
    Service
    Worker
    Superkräfte für Blazor-Apps dank Project Fugu

    View full-size slide

  8. 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

    View full-size slide

  9. 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

    View full-size slide

  10. 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

    View full-size slide

  11. 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

    View full-size slide

  12. 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

    View full-size slide

  13. Service Worker
    PWA
    Service Worker
    Internet
    Website
    HTML/JS
    Cache
    fetch
    Superkräfte für Blazor-Apps dank Project Fugu

    View full-size slide

  14. 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

    View full-size slide

  15. 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

    View full-size slide

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

    View full-size slide

  17. Project Fugu
    Capabilities
    »Let’s bring the web
    back – API by API«
    Thomas Steiner, Google
    Superkräfte für Blazor-Apps dank Project Fugu

    View full-size slide

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

    View full-size slide

  19. Capabilities
    https://goo.gle/fugu-api-tracker
    Superkräfte für Blazor-Apps dank Project Fugu

    View full-size slide

  20. Browser
    Capabilities
    navigator.share({ url: 'http://example.com' });
    ShareIntent DataTransferManager

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

    View full-size slide

  21. …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

    View full-size slide

  22. 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

    View full-size slide

  23. 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

    View full-size slide

  24. Async Clipboard API
    var clipboardItem = new ClipboardItem(
    new Dictionary
    {
    { "image/png", imagePromise }
    });
    await _asyncClipboardService.WriteAsync(
    new[] { clipboardItem }
    );
    Capabilities
    Superkräfte für Blazor-Apps dank Project Fugu

    View full-size slide

  25. 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

    View full-size slide

  26. Web Share API
    var data = new WebShareDataModel
    {
    Files = new[] { fileReference }
    };
    await _shareService.ShareAsync(data);
    Capabilities
    Superkräfte für Blazor-Apps dank Project Fugu

    View full-size slide

  27. 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

    View full-size slide

  28. 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

    View full-size slide

  29. 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

    View full-size slide

  30. File System Handling API
    "file_handlers": [{
    "action": "./",
    "accept": {
    "text/plain": [".txt"]
    }
    }]
    Capabilities
    Superkräfte für Blazor-Apps dank Project Fugu

    View full-size slide

  31. 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

    View full-size slide

  32. 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

    View full-size slide

  33. Badging API
    await badgingService.SetAppBadgeAsync(3);
    Superkräfte für Blazor-Apps dank Project Fugu
    Capabilities

    View full-size slide

  34. 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

    View full-size slide

  35. 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

    View full-size slide

  36. Disabling unsupported features

    Copy


    Paste


    Share

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

    View full-size slide

  37. Providing an alternative implementation
    await _imageService.DownloadAsync(await _canvas!.ToDataURLAsync());
    Progressive Enhancement
    Superkräfte für Blazor-Apps dank Project Fugu

    View full-size slide

  38. 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

    View full-size slide

  39. – 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

    View full-size slide

  40. Spotify
    Superkräfte für Blazor-Apps dank Project Fugu
    Use Cases
    https://open.spotify.com/

    View full-size slide

  41. VS Code
    Superkräfte für Blazor-Apps dank Project Fugu
    Use Cases
    https://vscode.dev/

    View full-size slide

  42. Photoshop
    Superkräfte für Blazor-Apps dank Project Fugu
    Use Cases
    https://creativecloud.adobe.com/cc/photoshop

    View full-size slide

  43. 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

    View full-size slide

  44. 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

    View full-size slide

  45. 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

    View full-size slide

  46. 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

    View full-size slide

  47. Thank you
    for your kind attention!
    Christian Liebel Patrick Jahr
    @christianliebel @jahr_patrick
    [email protected] [email protected]

    View full-size slide