Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Unsere Website enthält Cookies von Drittanbietern wie Matomo und Wordpress. Durch die Nutzung der Website stimmen Sie der Verwendung von Cookies zu. Weitere Informationen zu Cookies erhalten Sie in unserer Datenschutzerklärung.

Blazor – Vom Web auf den Desktop: mit Progressive Web App und Blazor Hybrid

Blazor – Vom Web auf den Desktop: mit Progressive Web App und Blazor Hybrid

In diesem Artikel werden Möglichkeiten vorgestellt, eine ASP .NET Core Blazor Anwendung als Offline- bzw. Desktop-Anwendung zur Verfügung zu stellen. Hierbei werden sowohl die Blazor Progressive Web App, als auch die Blazor Hybrid App beschrieben und die jeweiligen Vor- und Nachteile diskutiert.

Einführung

In meinem früheren Artikel "Analyse und Technologieauswahl bei der Software Migration" habe ich analysiert, welche Technologien in Frage kommen, um eine alte Windows Forms Anwendung für das Web zu migrieren. In dem Fall hat sich ergeben, dass eine Migration mit Microsoft Blazor vielversprechend ist. Wer diesen Artikel gelesen hat, wundert sich eventuell: warum erst der ganze Aufwand, wenn wir diese Webanwendung wieder auf den Desktop zurück migrieren wollen? Ohne Frage haben Webanwendungen einige Vorteile. Aber ein großer Nachteil besteht darin, dass diese nicht ohne weiteres offline verfügbar sind und um es vorweg zu nehmen: es soll nicht erneut migriert werden.

In dem folgenden Artikel wird beschrieben, welche Möglichkeiten es gibt, eine Blazor-Webanwendung auch offline verfügbar zu machen. Wenn gerade keine Netzwerkverbindung besteht, soll diese Webanwendung trotzdem genutzt werden können. Durch eine gemeinsame Code-Basis soll damit der Vorteil beider Welten (die der Desktop-Anwendung und die der Webanwendung) genutzt werden.

Während wir im umgekehrten Fall der Softwaremigration der WinForms-Anwendung zu Blazor-Web die UI neu entwickeln mussten, wollen wir nicht erneut die Benutzeroberfläche erstellen. Sowohl Logik als auch die UI soll so belassen und weiter genutzt werden.

In Zusammenhang mit Blazor bieten sich hierfür zwei Möglichkeiten an: die Progressive Web App (PWA) oder die ASP.NET Core Blazor Hybrid Anwendung. Beide Varianten bieten Vor- und Nachteile. Zunächst soll die Blazor PWA vorgestellt werden.

Progressive Web App (PWA) mit Blazor

Was sind Progressive Web Apps?

Zunächst soll der Begriff der Progressive Web App, abgekürzt PWA, näher betrachtet werden. Hierbei handelt es sich zunächst um eine Webanwendung, die im Gegensatz zu einer traditionellen Webanwendung oder Single Page Application (SPA), separat auf dem Betriebssystem installiert und anschließend aus dem jeweiligen Startmenü gestartet werden kann. Dabei wird die Anwendung in einem eigenen App-Fenster dargestellt und nicht mehr im Browserfenster (dass es sich rein technisch noch um eine Komponente des Browsers handelt, lassen wir einmal außer Acht). Aus Anwendersicht fühlt es sich dann wie eine eigene unabhängige Anwendung an. Weiterhin können diese Anwendungen Push-Benachrichtigungen empfangen und unabhängig von der Netzwerkverbindung kann die PWA auch offline betrieben werden. Dadurch ergibt sich der Vorteil von mehr Performance: einer deutlich schnelleren Ladezeit.

Während die Progressive Web App offline ist, übernimmt ein Service Worker [1] die Aufgabe eines Proxys zwischen Webanwendung und Browser bzw. Netzwerk. Damit stellt der Worker sicher, dass Netzwerkanfragen abgefangen werden und entsprechend behandelt werden.

Ein großer Nachteil ist, dass Progressive Web Apps nicht ohne weiteres in den jeweiligen AppStores angeboten werden können. Über Umwege, wie das Verpacken über Bubblewrap oder PwaBuilder, können die Apps aber doch wieder in die AppStores gelangen [2] [3] [4]. Damit können auch User, die in erster Linie hier nach neuen Anwendungen suchen, diese Progressive Web Apps finden und installieren.

Eine weitere Einschränkung ist der fehlende Zugriff auf Systembibliotheken. Auch wenn HTML und JavaScript inzwischen viele Möglichkeiten bieten, ist der Umfang, was beispielsweise den Zugriff auf das Dateisystem, Drucker oder etwaigen Sensoren betrifft, der Möglichkeiten von HTML beschränkt.

Wie wird die Progressive Web App installiert und genutzt?

Einstiegspunkt für die User ist weiterhin der Browser. Auch wenn die Webanwendung offline genutzt werden kann, ist für die Installation ein Browser mit Internetverbindung notwendig. Eine Offline-Installation ohne Internetverbindung ist von Haus aus nicht vorgesehen.

Das bedeutet: Der Anwender wechselt zunächst auf die gewünschte Webseite, welche PWA unterstützt. Hat sich der Anwender entschieden, diese zu installieren, klickt er auf das entsprechende Icon. Die Progressive Web App wird dann anschließend auf dem Betriebssystem installiert und ein Icon im Startmenü oder auf dem Desktop erstellt.

Für den weniger geübten User geht jedoch beim Besuch einer Webseite schnell die Info verloren, dass es sich um eine Progressive Web App handelt. Im untenstehenden Screenshot ist das Installations-Icon mit einem Pfeil markiert. Es kann also als Entwickler nicht schaden, diese Information den Anwendern anderweitig mitzuteilen.

Nachdem der Anwender auf die gewünschte Webseite wechselt, welche PWA unterstützt, muss er zum Installieren dieser auf das entsprechende Icon klicken. Die Progressive Web App wird dann anschließend auf dem Betriebssystem installiert und ein Icon im Startmenü oder auf dem Desktop erstellt.

Aktuell werden PWAs von den drei großen Browsern Chrome, Edge und Safari nativ unterstützt. Firefox hat die Unterstützung für die Desktop-Version inzwischen wieder beendet [5], sodass hierfür eine extra Erweiterung notwendig ist. Dabei ist die Installation der PWA nicht auf die klassischen Desktop-Betriebssysteme wie Windows oder macOS beschränkt, sondern kann auch auf Android und iPhone-Smartphones installiert werden.

Wie wird eine Blazor PWA entwickelt?

Die Erstellung einer Blazor PWA gestaltet sich erstaunlich unspektakulär, wenn man im Voraus bereits weiß, dass die angestrebte Anwendung Progressive Web App unterstützen soll.

Bei der Erstellung über das .NET Core CLI ist nur ein zusätzlicher Parameter zu ergänzen.

dotnet new blazorwasm -o MyNewBlazorAppWithPwa --pwa 

Wer Visual Studio bevorzugt, muss beim Erstellen des Projekts nur ein Häkchen mehr setzen.

In Visual Studio muss beim Erstellen des Projekts ein Häkchen für Progressive Webanwendungen gesetzt werden.

Steht die Entscheidung erst später fest, aus einer vorhandenen Blazor WebAssembly App eine Progressive Web App zu erstellen, ist dies mit etwas Mehraufwand immer noch möglich. Eine ausführliche Anleitung hierzu findet sich unter folgendem Link [6].

Der entscheidende technische Unterschied zwischen einer regulären Blazor App oder der Blazor PWA besteht darin, dass eine Blazor Progressive Web App ein zusätzliches JavaScript enthält, welches die entsprechenden Dateien kopiert. Zu den zu kopierenden Dateien gehören sowohl alle erforderlichen Assemblys, als auch die Dateien aus dem „wwwroot“ Ordner des Projekts. Weiterhin ist eine Manifestdatei enthalten, in der der Name und das Icon der zu erstellenden Programmverknüpfung im Startmenü definiert sind.

Wer die Blazor Progressive Web App während der Entwicklung testet, darf sich nicht irritieren lassen, dass der Offline-Modus erstmal nicht funktioniert. Grund ist, dass sich der Debugger während der Entwicklung auch im vermeintlichen Offline-Modus verbinden möchte. Scheitert diese Verbindung, funktioniert die gesamte Anwendung nicht. Ist die Progressive Web App erst einmal veröffentlicht, funktioniert auch der Offline Modus korrekt.

Die zweite Variante, eine Blazor Anwendung auf den Desktop zu bringen, ist die ASP.NET Core Blazor Hybrid App, welche im folgenden Abschnitt vorgestellt wird.

ASP.NET Core Blazor Hybrid App

Was steht hier dem Prinzip der Hybrid App?

Das Prinzip der Blazor Hybrid App ist einfach. In eine native App werden in einem eingebetteten Web-View-Steuerelement die Razor-Komponenten gerendert. (Razor ist der Name der Komponenten von Blazor) [7]. Dabei ist kein separater Browser oder WebAssembly mehr notwendig. Die Ausführung findet direkt nativ in der Anwendung statt. Vorteil ist, dass die Komponenten Zugriff auf die Gerätefunktionen, wie beispielsweise das Dateisystem oder Sensoren, erhalten können. Entwickelt werden können Blazor Hybrid Apps mit .NET MAUI. Dabei stehen als Zielplattformen sowohl Desktop- als auch Mobilgeräte zur Verfügung.

Hybrid App als Unterstützter für zukunftssichere Software

Es ist weiterhin auch möglich, Blazor in eine Windows Presentation Foundation (WPF) oder Windows Forms Anwendung zu integrieren. Während zumindest letzterer Anwendungsfall für neue Anwendungen eher unwahrscheinlich sein wird, bietet sich hier insbesondere für ältere WinForms Anwendungen die Möglichkeit, eine bestehende Anwendung unkompliziert um neue Funktionen zu erweitern. Vorteil ist, dass nicht mehr groß in die eventuell schon abzulösende WinForms Anwendung investiert werden muss. Dadurch können neue Funktionen bereits für ein neues System entwickelt und parallel dem alten System zur Verfügung gestellt werden. Dieses Vorgehen kann vor allem dann interessant sein, wenn bereits ein neues System in der Entwicklung ist, aber ein altes weiterhin gepflegt werden muss. Damit kann diese Lösung einen wertvollen Beitrag zu einer zukunftssicheren Software liefern.

Wie kann eine Blazor Hybrid App erstellt werden?

Für das Erstellen einer Blazor Hybrid App mit MAUI gibt es in Visual Studio 2022 bereits eine Projektvorlage, wie im folgenden Bild dargestellt.

In Visual Studio 2022 gibt es bereits eine Projektvorlage für das Erstellen einer Blazor Hybrid App mit MAUI.
Das erstellte Projekt enthält bereits alle Daten für die unterschiedlichen Zielplattformen.

Da es unter [8] bereits ein ausführliches Tutorial gibt, soll hier nicht weiter darauf eingegangen werden. Beachtenswert ist, dass am Ende eine Solution mit nur einem Projekt herauskommt. Dieses Projekt enthält bereits alle Daten, wie Ressourcen oder Manifestdateien, für die unterschiedlichen Zielplattformen. Entsprechend umfangreich sind dann auch die Projekteigenschaften. Für die Entwicklung der jeweiligen Zielplattform ist Grundlagenwissen notwendig.

Fazit

Mit beiden Varianten lässt sich relativ unkompliziert und mit wenig Entwicklungsaufwand aus einer reinen Blazor Webanwendung eine installierbare Offline Variante erstellen. Beide Lösungen bieten eine verbesserte Performance, wie geringere Ladezeiten. Gleichzeitig bieten sie die Möglichkeit, die Anwendung auf unterschiedlichen Plattformen wie Windows, iOS, macOS und Android zu starten. Trotzdem unterscheiden sich die beiden Varianten was die Vorteile, aber auch die Nachteile betrifft, wie in folgender Tabelle dargestellt wird.

Blazor PWAASP .NET Core Blazor App (MAUI)
Vorteile
  • Für Endanwender installierbar, auch ohne durch den AppStore Aufnahmeprozess zu müssen
  • Praktisch kein Mehraufwand gegenüber einer gewöhnlichen Webanwendung
  • Keine Detailkenntnisse über die Zielplattform notwendig
  • Kann in den AppStores zur Verfügung gestellt werden
  • Zugriff in den MAUI Apps auf die diversen Gerätefunktionen möglich
Nachteile
  • Kann nur über Umwege in den jeweiligen AppStores verfügbar gemacht werden
  • Bibliotheken sind auf die Möglichkeiten von HTML und JavaScript beschränkt, eingeschränkter Zugriff auf Dateisystem, Sensoren etc.
  • Für User praktisch nur installierbar, wenn diese den Aufnahmeprozess der jeweiligen AppStores durchlaufen haben
  • Etwas mehr Aufwand, da für jede Zielplattform eine eigene, wenn auch kleine Anwendung erstellt und gewartet werden muss
  • Zumindest Grundlagenwissen für die Zielplattformen ist erforderlich
  • Derzeit keine Nutzung von WebRTC Funktionen möglich.
Übersicht der Vor- und Nachteile von Blazor Progressive Web Apps und ASP .NET Core Blazor Apps.

[1] Service Worker API

[2] Adding Your Progressive Web App to Google Play

[3] GoogleChromeLabs Bubblewrap

[4] PWA builder

[5] Firefox beendet PWA-Support für den Desktop

[6] ASP.NET Core Blazor-basierte progressive Web-Apps (PWAs)

[7] ASP.NET Core Blazor Hybrid

[8] Erstellen einer .NET MAUIBlazor-App

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Zeitüberschreitung. Bitte CAPTCHA neu laden.