Erstellen einer progressiven Web-App, die auf jedem Client installiert und ausgeführt werden kann

Umwelt

Visual Studio

• Visual Studio 2019

.NET

• .NET 5.0

Was ist eine Progressive Web App (PWA)?

Einfach ausgedrückt, ist es eine Anwendung, mit der Sie Webanwendungen auf jedem Gerät wie einem Windows-PC, iPhone oder Android installieren und verwenden können.

Die Realität von Blazor WebAssembly ist eine standardisierte WebAssembly selbst, so dass die obige Implementierung möglich ist. Es ist im Grunde genommen webanwendungsbasiert, aber Sie können auch native Funktionen wie Push-Benachrichtigungen in Plus Alpha verwenden.

Die Installationsprozedur für den Benutzer ist auch sehr einfach, da es nur notwendig ist, die Zielseite zu besuchen und den Installationsknopf zu drücken.

Erstellen eines Blazor WebAssembly PWA-Projekts

Es ist im Grunde das gleiche wie das Erstellen eines Blazor WebAssembly-Projekts.

Erstellen Sie das Projekt einfach wie gewohnt, und wenn Sie zum Bildschirm "Zusätzliche Informationen" unten kommen, aktivieren Sie einfach "Progressive Web Application".

Abgesehen von PWA-spezifischen Funktionen ist die Blazor WebAssembly-Entwicklung im Wesentlichen die gleiche wie das PWA-freie Muster.

Unterschiede zu Nicht-PWA-Projekten

Wenn Sie ein Projekt in PWA erstellen, erhalten Sie einige weitere Dateien.

Außerdem wird beim Öffnenindex.html von Code hinzugefügt, der auf diese Dateien verweist.

Versuchen Sie es mit einer PWA

Führen Sie das Projekt zum Debuggen aus.

Das Ausführungsbeispiel ist genau das gleiche wie das Muster ohne PWA, aber wenn Sie es mit PWA ausführen, können Sie sehen, dass dem Webbrowser eine Installationsschaltfläche hinzugefügt wurde.

Wenn Sie darauf klicken, wird eine Bestätigung für die Installation angezeigt, sodass ich versuchen werde, die Installation durchzuführen.

Dadurch öffnet sich ein separates Fenster, in dem Sie die Blazor-App ausführen können. Es fungiert als Client-App, nicht als Webbrowser, sodass Sie auch betriebssystembezogene Einstellungen konfigurieren können, wie in der Abbildung dargestellt.

Da es installiert ist, wird es so im Startmenü registriert und Sie können es starten.

Da es sich bei dem Inhalt jedoch um eine Web-App handelt, kann er nur verwendet werden, wenn ein Server vorhanden ist, der den Inhalt herunterladen kann. Wenn Sie es beispielsweise während eines Debuglaufs installieren, können Sie die installierte App nur verwenden, wenn Sie IIS Express zum Debuggen gestartet haben. Beachten Sie auch, dass PWAs ohne eine https-Verbindung nicht installiert werden können.

Deinstallieren

Die Deinstallationsprozedur ist die gleiche wie bei einer regulär installierten App. Die Betriebsmethode hängt von der Zielplattform der Installation ab.

Änderungsprotokoll

2022/7/13

• Erklärung hinzugefügt, dass https für die Installation von PWA erforderlich ist.

2022/3/30

• Erstausgabe