Blazor WebAssembly: So nutzen Sie PWA-Schnittstellen in C#

Progressive Web Apps (PWA) sind ein webbasiertes Anwendungsmodell. Einmal implementiert lassen sie sich überall dort ausführen, wo ein halbwegs moderner Webbrowser zur Verfügung steht – Offlinebetrieb sowie Icon auf dem Homescreen oder in der Taskleiste inklusive.

Dazu passend brachten Initiativen wie Project Fugu in der Vergangenheit weitere Web-Plattform-Schnittstellen ins Web. Dazu zählen etwa die File System Access API zum Zugriff auf das lokale Dateisystem, die Async Clipboard API zum Verwenden der Zwischenablage oder die Web Share API zur Integration in die Funktionalität des Betriebssystems zum Teilen von Inhalten. Diese Schnittstellen stehen allen Webanwendungen zur Verfügung.

Andere APIs setzen voraus, dass die Webanwendung auf dem System des Users installiert ist. Das gilt beispielsweise für die Badging API, die eine kleine Plakette auf dem Symbol der PWA darstellt, oder die File Handling API, die eine PWA bei Installation als Bearbeitungsprogramm für bestimmte Dateierweiterungen registriert.

Web-Plattform-APIs sind für alle da

Auch Microsofts Single-Page-App-Framework Blazor WebAssembly eignet sich zum Implementieren von PWAs. In der Projektvorlage für Blazor-WebAssembly-Projekte können Entwickler und Entwicklerinnen einfach ein Kontrollkästchen setzen, um die PWA-Unterstützung zu aktivieren.

Blazor WebAssembly wird gerne von .NET-Entwicklern gewählt, die ihre Webanwendung in C# schreiben möchten. Natürlich kommen die Web-Plattform-Schnittstellen sämtlichen Webentwicklerinnen zugute, auch Nutzern von Blazor WebAssembly. Da die APIs in der Regel aber JavaScript-basiert sind, braucht es zur einfachen Nutzung in der C#-Welt geeignete Wrapper.

Viele Wrapper-Pakete sind bereits verfügbar

Glücklicherweise stehen für viele interessante APIs bereits quelloffene Wrapper zur Verfügung, die sich via NuGet in das Blazor-WebAssembly-Projekt installieren lassen. Hinweise zum Verwenden der NuGet-Pakete und zum Browser-Support der Schnittstellen finden sich jeweils in Klammern verlinkt:

• Die Async Clipboard API (NuGet-Paket: Thinktecture.Blazor.AsyncClipboard) gewährt Zugriff auf die Zwischenablage des Systems.
• Die Badging API (NuGet-Paket: Thinktecture.Blazor.Badging) stellt eine Zahlenplakette auf dem Icon der installierten Anwendung dar.
• Die File System API (NuGet-Paket: KristofferStrube.Blazor.FileSystem) ist eine Basisschnittstelle zum Zugriff auf Dateisysteme.
• Die File System Access API (NuGet-Paket: KristofferStrube.Blazor.FileSystemAccess) nutzt die File System API und erlaubt darüber Zugriff auf das lokale Dateisystem des Anwenders. Dateien und Verzeichnisse können gelesen und geschrieben werden.
• Die File Handling API (NuGet-Paket: Thinktecture.Blazor.FileHandling) baut auf der File System Access API auf und registriert eine PWA bei Installation als Bearbeitungsprogramm für bestimmte Dateierweiterungen.
• Die Web Share API (NuGet-Paket: Thinktecture.Blazor.WebShare) aktiviert die Teilen-Funktion des Betriebssystems, um Informationen oder Dateien an andere Anwendungen oder Geräte in der Nähe zu teilen.

Badging API aus Blazor WebAssembly heraus nutzen

Nachstehend wird das NuGet-Paket Thinktecture.Blazor.Badging vorgestellt. Die Badging API eignet sich etwa für Todo-Listen-Apps oder E-Mail-Clients, die darüber die Liste zu erledigender Todos oder ungelesener E-Mails darstellen. Ein prominenter Verwender der API ist die Twitter-PWA.

Die API wird von Chromium-basierten Browsern seit Version 81 auf macOS und Windows unterstützt. In der aktuellen Beta-Version 1 von iOS und iPadOS 16.4 liefert auch Apple die Unterstützung für die Schnittstelle mit.

Zunächst muss das NuGet-Paket ins Blazor-WebAssembly-Projekt aufgenommen werden:

dotnet add package Thinktecture.Blazor.Badging

Als Nächstes muss der BadgingService bei der IServiceCollection registriert werden. Dies geschieht üblicherweise in der Datei Program.cs:

builder.Services.AddBadgingService();

Auf das Fehlen der API einstellen

Nicht alle APIs werden auf jedem Browser und jedem Betriebssystem unterstützt. So zeigen App-Badges unter Android etwa die Anzahl der Notifications dieser App an, weswegen die Schnittstelle hier nicht anwendbar ist. Auch steht die Schnittstelle nur dann zur Verfügung, wenn die App installiert wurde.

Daher sollten Entwickler innen und Entwickler immer das Prinzip des Progressive Enhancement nutzen: Nur wenn eine Schnittstelle verfügbar ist, sollte man sie auch nutzen. Andernfalls könnte es zur Laufzeit zu einem Fehler kommen.

Ist eine Schnittstelle nicht verfügbar, sollte die Funktion in der App versteckt oder ausgegraut werden. Manchmal stehen auch Fallback-Ansätze zur Verfügung, auf die Entwicklerinnen zurückgreifen können. Im Falle der Badging API könnte etwa der Fenstertitel angepasst werden, indem die Anzahl der Mitteilungen dem Anwendungstitel in Klammern vorangestellt wird: "(3) My Cool App".

Um eine Unterscheidung zu ermöglichen, bieten die Pakete in der Regel die Methode IsSupportedAsync() an, mit der Entwickler das Vorhandensein der API prüfen können:

var isSupported = await badgingService.IsSupportedAsync();
if (isSupported)
{
    // enable badging feature
}
else
{
    // use alternative implementation
}

Steht die API zur Verfügung, lässt sich das Badge über die Methode SetAppBadgeAsync() setzen. Diese Methode nimmt eine Zahl entgegen, die auf dem Badge dargestellt werden sollen. Alternativ kann auch "null" übergeben werden, in diesem Fall wird eine generische Plakette dargestellt.

await badgingService.SetAppBadgeAsync(3);

Und so erscheint dann das gewünschte Badge auf dem App-Icon:

Fazit: Leistungsfähige Blazor-WebAssembly-Apps auf bequeme Art

Über die vergangenen Jahre ist das Web immer leistungsfähiger geworden: Microsoft hat dank der File System Access API seinen Codeeditor Visual Studio Code in den Browser bringen können (vscode.dev). Adobe nutzt die File System API in seiner Webversion von Photoshop. Gleich mehrere APIs vereinigt der webbasierte Microsoft-Paint-Klon paint.js.org (paint.js.org) in sich.

Dank der Wrapper-Pakete können auch Blazor-WebAssembly-Anwendungen bequem auf die neuen, leistungsfähigen Web-Plattform-APIs zugreifen. Die Schnittstellen integrieren sich meistens nahtlos in die C#-Welt. Und damit können auch .NET-Entwickler komplexe Produktivitätsanwendungen direkt für den Browser schreiben.

(map)