Skapa en progressiv webbapp som kan installeras och köras på varje klient

miljö

Visual Studio

• Visual Studio 2019

.NET

• .NET 5.0

Vad är en progressiv webbapp (PWA)?

Enkelt uttryckt är det ett program som låter dig installera och använda webbapplikationer på varje enhet som en Windows-dator, iPhone eller Android.

Verkligheten i Blazor WebAssembly är en standardiserad WebAssembly själv, så ovanstående implementering är möjlig. Det är i grunden webbapplikationsbaserat, men du kan också använda inbyggda funktioner som push-meddelanden i Plus Alpha.

Installationsproceduren för användaren är också mycket enkel, eftersom det bara är nödvändigt att besöka målsidan och trycka på installationsknappen.

Skapa ett Blazor WebAssembly PWA-projekt

Det är i princip detsamma som att skapa ett Blazor WebAssembly-projekt.

Skapa bara projektet som vanligt, och när du kommer till skärmen "Ytterligare information" nedan, kolla bara "Progressiv webbapplikation".

Bortsett från PWA-specifika funktioner är Blazor WebAssembly-utvecklingen i huvudsak densamma som det PWA-fria mönstret.

Skillnader från icke-PWA-projekt

När du skapar ett projekt i PWA får du några fler filer.

När du öppnar läggs ocksåindex.html en del kod till som refererar till dessa filer.

Prova en PWA

Kör projektet för felsökning.

Körningsprovet är exakt detsamma som mönstret utan PWA, men när det körs med PWA kan du se att en installationsknapp har lagts till i webbläsaren.

När du klickar på den visas en bekräftelse att installera, så jag ska försöka installera.

Detta öppnar ett separat fönster där du kan köra Blazor-appen. Den fungerar som en klientapp, inte en webbläsare, så du kan också konfigurera OS-relaterade inställningar enligt bilden.

Eftersom den är installerad kommer den att registreras i startmenyn så här och du kommer att kunna starta den.

Men eftersom innehållet är en webbapp kan den inte användas om det inte finns en server som kan ladda ner innehållet. Om du till exempel installerar den under en felsökningskörning kan du inte använda den installerade appen om du inte har startat IIS Express för felsökning. Observera också att PWA inte kan installeras utan en https-anslutning.

avinstallera

Avinstallationsproceduren är densamma som för en vanlig installerad app. Driftsmetoden beror på installationens målplattform.

Ändringslogg

2022/7/13

• Förklaring har lagts till att https krävs för att installera PWA.

2022/3/30

• första upplagan