Nell'articolo precedente abbiamo analizzato come strutturare un'applicazione asp.net core grazie alla quale si riesca a sottoscriversi e inviare notifiche ai client tramite il protocollo web push notification.

Andremo ora ad integrare la parte di back-end e sviluppare un client che possa intercettare e gestire le notifiche inviate.

Angular PWA

Attraverso il framework di Angular e alle funzionalità fornite dalla CLI è possibile creare con poche istruzioni un'applicazione.

Con i seguenti comandi inizializzeremo un'applicazione Angular e integreremo le funzionalità richieste per una PWA.

$ ng new myNotificationApp

$ cd myNotificationApp

$ ng add @angular/pwa

Aggiungendo il pacchetto @angular/pwa all'applicazione verranno aggiunti diversi file e righe di codice, i più degni di nota sono:

• file manifest.json, che consentirà a sistemi operativi come iOs/Android di installarla come se fosse un'app nativa.
• file ngsw-config.json, che gestirà le modalità con cui il service worker, un insieme di funzionalità che gireranno in background nel browser, inserisce in cache i file o gli url che serviranno all'applicazione.
• modifica dell'app.module.ts, nella quale verrà importato il modulo ServiceWorkerModule.

Invio richiesta sottoscrizione alle Web Push Notification

Il pacchetto @angular/pwa fornisce una serie di classi e servizi che ci consentiranno di ottenere tutto il necessario per inviare al nostro servizio web il contratto di sottoscrizione.

All'interno dell'app.component - o in qualunque componente in cui si voglia proporre la sottoscrizione - si può richiedere un'instanza del servizio SwPush come argomento nel costruttore.

private swPush: SwPush

Dato che la sottoscrizione non dovrebbe mai essere automatica, ma sempre subordinata ad una scelta dell'utente, creeremo un bottone che al click scatenerà un metodo che interagirà con il servizio swPush

subscribeToNotifications() {
    // recupero l'oggetto per sottoscrizione
    this.swPush.requestSubscription({
        serverPublicKey: environment.VAPID_PUBLIC_KEY
    })
    .then(sub => {
        this.httpClient.post(environment.ApiUrl + 'Subscription/SubscribeClient', sub)
            .subscribe(data => {
                // tutto ok
                // nascondo il bottone
                this.promptSubscription = false;
            }, (err) => {
                // rollback a causa di errore
                sub.unsubscribe();
                // visualizzo il bottone
                this.promptSubscription = false;
            });
    })
    .catch(err =>
        // errore generico
        console.log(err)
    );
}

Come si può notare abbiamo inserito negli environments la chiave pubblica VAPID, che utilizziamo nelle Web.API, e il base url delle stesse. - per praticità e condensazione del codice della demo, non andremo a creare servizi angular -.

Nel codice presentato è importante notare come la sottoscrizione, lato client, è effettuata chiamando requestSubscription, per tale ragione sarà necessario eseguire l'unsubscribe nel caso in cui la registrazione alle nostre Web.API vada in errore.

Verifica stato sottoscrizione

Le applicazioni web, come ben sappiamo, non mantengono lo stato, e quindi quando andremo ad aggiornare la pagina sarà ancora possibile eseguire la sottoscrizione anche se il client è già stato correttamente sottoscritto. Per ovviare a questo problema si può richiedere, sempre al servizio SwPush, informazioni riguardo la sottoscrizione del client all'interno del metodo ngOnInit

// verifico stato sottoscrizione
this.swPush.subscription.pipe(
    take(1)
).subscribe(pushSubscription => {
    // se il client non è sottoscritto
    if (!pushSubscription) {
        this.promptSubscription = true;
    }
});

Il bottone avrà conseguentemente questa struttura

<button *ngIf="promptSubscription" (click)="subscribeToNotifications()">Subscribe</button>