Maak een progressieve web-app die kan worden geïnstalleerd en uitgevoerd op elke client

milieu

Visual Studio

• Visual Studio 2019

.NET

• .NET 5,0

Wat is een Progressive Web App (PWA)?

Simpel gezegd, het is een applicatie waarmee u webtoepassingen op elk apparaat kunt installeren en gebruiken, zoals een Windows-pc, iPhone of Android.

De realiteit van Blazor WebAssembly is een gestandaardiseerd WebAssembly zelf, dus de bovenstaande implementatie is mogelijk. Het is in principe gebaseerd op webapplicaties, maar u kunt ook native functies gebruiken, zoals pushmeldingen in Plus Alpha.

De installatieprocedure voor de gebruiker is ook heel eenvoudig, omdat het alleen nodig is om de doelpagina te bezoeken en op de installatieknop te drukken.

Een Blazor WebAssembly PWA-project maken

Het is eigenlijk hetzelfde als het maken van een Blazor WebAssembly-project.

Maak gewoon het project zoals u normaal zou doen, en wanneer u naar het onderstaande scherm "Aanvullende informatie" komt, vinkt u gewoon "Progressive Web Application" aan.

Afgezien van PWA-specifieke functies, is de ontwikkeling van Blazor WebAssembly in wezen hetzelfde als het PWA-vrije patroon.

Verschillen met niet-PWA-projecten

Wanneer u een project maakt in PWA, krijgt u nog een paar bestanden.

Wanneer u opent, wordt erindex.html ook code toegevoegd die naar deze bestanden verwijst.

Probeer een PWA

Voer het project uit voor foutopsporing.

Het uitvoeringsvoorbeeld is precies hetzelfde als het patroon zonder PWA, maar wanneer het wordt uitgevoerd met PWA, kunt u zien dat er een installatieknop aan de webbrowser is toegevoegd.

Wanneer u erop klikt, wordt een bevestiging om te installeren weergegeven, dus ik zal proberen te installeren.

Dit opent een apart venster waarin u de Blazor-app kunt uitvoeren. Het fungeert als een client-app, niet als een webbrowser, dus u kunt ook os-gerelateerde instellingen configureren zoals weergegeven in de afbeelding.

Omdat het is geïnstalleerd, wordt het op deze manier geregistreerd in het startmenu en kunt u het starten.

Omdat de inhoud echter een web-app is, kan deze alleen worden gebruikt als er een server is die de inhoud kan downloaden. Als u het bijvoorbeeld installeert tijdens het uitvoeren van fouten, kunt u de geïnstalleerde app alleen gebruiken als u IIS Express hebt gestart voor foutopsporing. Houd er ook rekening mee dat PWA's niet kunnen worden geïnstalleerd zonder een https-verbinding.

verwijderen

De verwijderingsprocedure is hetzelfde als voor een gewone geïnstalleerde app. De werkwijze is afhankelijk van het doelplatform van de installatie.

Changelog

2022/7/13

• Uitleg toegevoegd dat https nodig is om PWA te installeren.

2022/3/30

• eerste editie