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
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Generare token per autenicarsi sulle API di GitHub
Usare una container image come runner di GitHub Actions
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Eseguire operazioni sui blob con Azure Storage Actions
Creare gruppi di client per Event Grid MQTT
Eseguire una GroupBy per entity in Entity Framework
Ottimizzazione dei block template in Angular 17
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Reactive form tipizzati con modellazione del FormBuilder in Angular
Elencare le container images installate in un cluster di Kubernetes
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- Definire stili a livello di libreria in Angular
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)