Creare un'app Web progressiva che può essere installata ed eseguita su ogni client

ambiente

Visual Studio

• Visual Studio 2019

.NET

• .NET 5.0

Che cos'è una Progressive Web App (PWA)?

In poche parole, è un'applicazione che consente di installare e utilizzare applicazioni Web su ciascun dispositivo come un PC Windows, iPhone o Android.

La realtà di Blazor WebAssembly è un WebAssembly standardizzato stesso, quindi l'implementazione di cui sopra è possibile. È fondamentalmente basato su applicazioni Web, ma puoi anche utilizzare funzionalità native come le notifiche push in Plus Alpha.

Anche la procedura di installazione per l'utente è molto semplice, in quanto è sufficiente visitare la pagina di destinazione e premere il pulsante di installazione.

Creazione di un progetto PWA Blazor WebAssembly

È fondamentalmente lo stesso che creare un progetto Blazor WebAssembly.

Basta creare il progetto come faresti normalmente, e quando arrivi alla schermata "Informazioni aggiuntive" qui sotto, seleziona semplicemente "Applicazione Web progressiva".

A parte le funzionalità specifiche di PWA, lo sviluppo di Blazor WebAssembly è essenzialmente lo stesso del modello senza PWA.

Differenze rispetto ai progetti non PWA

Quando si crea un progetto in PWA, si ottengono alcuni file in più.

Inoltre, quando si apre ,index.html viene aggiunto del codice che fa riferimento a questi file.

Prova una PWA

Eseguire il progetto per il debug.

L'esempio di esecuzione è esattamente lo stesso del modello senza PWA, ma quando viene eseguito con PWA, è possibile vedere che è stato aggiunto un pulsante di installazione al browser Web.

Quando si fa clic su di esso, viene visualizzata una conferma per l'installazione, quindi proverò a installare.

Si aprirà una finestra separata in cui è possibile eseguire l'app Blazor. Funge da app client, non da browser Web, quindi è anche possibile configurare le impostazioni relative al sistema operativo come mostrato nella figura.

Poiché è installato, verrà registrato nel menu di avvio in questo modo e sarai in grado di avviarlo.

Tuttavia, poiché il contenuto è un'app Web, non può essere utilizzato a meno che non vi sia un server in grado di scaricare il contenuto. Ad esempio, se la si installa durante un'esecuzione di debug, non è possibile utilizzare l'app installata a meno che non sia stato avviato IIS Express per il debug. Si noti inoltre che le PWA non possono essere installate senza una connessione https.

disinstallare

La procedura di disinstallazione è la stessa di una normale app installata. Il metodo operativo dipende dalla piattaforma di destinazione dell'installazione.

Changelog

2022/7/13

• Aggiunta la spiegazione che https è necessario per installare PWA.

2022/3/30

• prima edizione