Dall'archivio script > ASP.NET Core

Installazione di una PWA Blazor

di Morgan PizziniMorgan Pizzini, in ASP.NET Core,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi