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
   

   View Slide

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
   

   View Slide

3. SPA Model
   Progressive Web Apps mit Blazor
   Einsatzgebiete, Erfolgsgeschichten, Einschränkungen
   Blazor WebAssembly
   

   View Slide

4. Responsive Linkable Discoverable Installable App-like
   Connectivity
   Independent
   Fresh Safe Re-engageable Progressive
   Einsatzgebiete, Erfolgsgeschichten, Einschränkungen
   Progressive Web Apps mit Blazor
   

   View Slide

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
   

   View Slide

6. Web App
   Manifest
   Service
   Worker
   Einsatzgebiete, Erfolgsgeschichten, Einschränkungen
   Progressive Web Apps mit Blazor
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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
    

    View Slide

12. Service Worker
    PWA
    Service
    Worker
    Internet
    Website
    HTML/JS
    Cache
    fetch
    Einsatzgebiete, Erfolgsgeschichten, Einschränkungen
    Progressive Web Apps mit Blazor
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. Einsatzgebiete, Erfolgsgeschichten, Einschränkungen
    Progressive Web Apps mit Blazor
    

    View Slide

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
    

    View Slide

17. Capabilities
    Einsatzgebiete, Erfolgsgeschichten, Einschränkungen
    Progressive Web Apps mit Blazor
    

    View Slide

18. Capabilities
    https://goo.gle/fugu-api-tracker
    Einsatzgebiete, Erfolgsgeschichten, Einschränkungen
    Progressive Web Apps mit Blazor
    

    View Slide

19. Browser
    Capabilities
    navigator.share({ url: 'http://example.com' });
    ShareIntent DataTransferManager
    …
    NSSharingServicePicker
    Einsatzgebiete, Erfolgsgeschichten, Einschränkungen
    Progressive Web Apps mit Blazor
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

23. Async Clipboard API
    var clipboardItem = new ClipboardItem(
    new Dictionary
    {
    { "image/png", imagePromise }
    });
    await _asyncClipboardService.WriteAsync(
    new[] { clipboardItem }
    );
    Capabilities
    Einsatzgebiete, Erfolgsgeschichten, Einschränkungen
    Progressive Web Apps mit Blazor
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

29. File System Handling API
    "file_handlers": [{
    "action": "./",
    "accept": {
    "text/plain": [".txt"]
    }
    }]
    Capabilities
    Einsatzgebiete, Erfolgsgeschichten, Einschränkungen
    Progressive Web Apps mit Blazor
    

    View Slide

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
    

    View Slide

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
    

    View Slide

32. Badging API
    await badgingService.SetAppBadgeAsync(3);
    Progressive Web Apps mit Blazor
    Einsatzgebiete, Erfolgsgeschichten, Einschränkungen
    Capabilities
    

    View Slide

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
    

    View Slide

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
    

    View Slide

35. Disabling unsupported features
    
    Copy
    
    
    Paste
    
    
    Share
    
    Progressive Enhancement
    Einsatzgebiete, Erfolgsgeschichten, Einschränkungen
    Progressive Web Apps mit Blazor
    

    View Slide

36. Providing an alternative implementation
    await _imageService.DownloadAsync(await _canvas!.ToDataURLAsync());
    Progressive Enhancement
    Einsatzgebiete, Erfolgsgeschichten, Einschränkungen
    Progressive Web Apps mit Blazor
    

    View Slide

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
    

    View Slide

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
    

    View Slide

39. Spotify
    Progressive Web Apps mit Blazor
    Einsatzgebiete, Erfolgsgeschichten, Einschränkungen
    Use Cases
    https://open.spotify.com/
    

    View Slide

40. VS Code
    Progressive Web Apps mit Blazor
    Einsatzgebiete, Erfolgsgeschichten, Einschränkungen
    Use Cases
    https://vscode.dev/
    

    View Slide

41. Photoshop
    Progressive Web Apps mit Blazor
    Einsatzgebiete, Erfolgsgeschichten, Einschränkungen
    Use Cases
    https://creativecloud.adobe.com/cc/photoshop
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

46. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    christian.liebel@thinktecture.com
    https://www.thinktecture.com/ueber-uns/karriere/
    

    View Slide