Come il titolo ci fa intendere, lo scopo di questo script è riuscire ad installare una PWA Blazor. Perché sì, per ottenere una PWA è sufficiente una spunta all'interno di una check-box al momento della creazione del progetto, ma per riuscire a mostrare all'utente la possibilità di installazione, abbiamo bisogno di scrivere vari passaggi: partendo dall'intercettazione dell'evento di installazione, alla proposizione all'utente, fino al salvataggio della risposta alla domanda "Vuoi installare l'applicazione?".
La condizione di partenza è un progetto PWA ready: con Visual Studio all'interno del wizard di creazione si può spuntare la casella appropriata, oppure da linea di comando è necessario aggiungere l'argomento --pwa
dotnet new blazorwasm -o mia-app --pwa
L'applicazione Blazor avrà dunque un file manifest.json, contenente il nome, descrizione, metadati e il rifiremento alle icone; ed un service worker: un insieme di processi gestiti direttamente dal browser, che gestiscono, tra le altre, notifiche, cache e i processi di installazione della PWA sul dispositivo.
Mettiamo ora mano al codice, partendo dal javascript, sottoscrivendoci all'emissione di un evento che informa riguardo la possibilità di installazione, che salveremo all'inteno di una variabile, per poterlo poi utilizzare in un secondo momento, quando l'utente avrà confermato la volontà di installare l'applicazione.
if ('serviceWorker' in navigator) { window.addEventListener('beforeinstallprompt', function (e) { e.preventDefault(); window.PWADeferredPrompt = e; // il timeout è necessario per poter dare a Blazor il tempo necessario per l'inizializzazione setTimeout(function () { if (localStorage.getItem('skipInstall') != "true") { DotNet.invokeMethod("MiaApplicazione.Blazor", "BlazorInstallHandler"); } }, 3000); }); } window.BlazorPWA = (function () { return { dismissInstallPWA: function () { localStorage.setItem('skipInstall', "true"); }, installPWA: function () { localStorage.setItem('skipInstall', "true"); if (window.PWADeferredPrompt) { // Use the stashed event to continue the install process window.PWADeferredPrompt.prompt(); window.PWADeferredPrompt.userChoice .then(function (choiceResult) { window.PWADeferredPrompt = null; }); } } } })();
La funzione BlazorInstallHandler, per poter essere chiamata tramite JSInterop, deve essere statica, il che può essere un problema, dato che a seguito dell'esecuzione dovremo modificare lo stato dell'interfaccia. Per questo motivo, in MainLayout.razor, creiamo e configuriamo una Action, che ci permetterà di chiamare funzioni non statiche del componente.
@inject IJSRuntime jsRuntime <div class="page @CurrentTheme"> <div class="sidebar"> <NavMenu /> </div> <main> <div class="top-row px-4"> <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a> </div> @if (showInstallButton) { <button class="btn btn-primary" @onclick="@(() => HideInstallButton(true))">Si</button> <button class="btn btn-primary" @onclick="@(() => HideInstallButton(false))">No</button> } <article class="content px-4"> @Body </article> </main> </div> @code{ bool showInstallButton = false; private static Action action; protected override async Task OnInitializedAsync() { // associazione action action = ShowInstallModal; await base.OnInitializedAsync(); } [JSInvokable] public static Task BlazorInstallHandler() { action.Invoke(); return Task.CompletedTask; } public void ShowInstallModal() { showInstallButton = true; // richiediamo il refresh del componente this.StateHasChanged(); } private async Task HideInstallButton(bool choice) { if (choice) { await jsRuntime.InvokeVoidAsync("BlazorPWA.installPWA"); } else { await jsRuntime.InvokeVoidAsync("BlazorPWA.dismissInstallPWA"); } showInstallButton = false; } }
A seconda del bottone premuto chiameremo nuovamente il codice javascript che attiverà l'evento o salverà la volontà dell'utente di non voler installare l'applicazione, in modo che al refresh della pagina non riapparirà nuovamente la scelta.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Semplificare il deployment di siti statici con Azure Static Web App
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Utilizzare le collection expression in C#
Implementare il throttling in ASP.NET Core
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
Evitare la command injection in un workflow di GitHub
Migrare una service connection a workload identity federation in Azure DevOps
Evitare la script injection nelle GitHub Actions
Short-circuiting della Pipeline in ASP.NET Core
Generare file PDF da Blazor WebAssembly con iText