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>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Scrivere CSS Media Query utilizzando una range syntax
Monitorare metriche delle risorse Azure con Load Testing
Utilizzare l'attributo autofill del CSS
Centrare elementi in HTML tramite CSS
Sfruttare il portale Azure per creare script di automazione
Installazione di una PWA Blazor
Le novità di .NET 7 e C# 11
Impostare un default custom per i metodi LINQ che tornano il valore di default
Commentare una issue associata ad una pull request tramite un workflow di GitHub
Definire le impostazioni di cache a livello di controller in ASP.NET Core 7
Filtrare le chiamate HTTP ad un App Service in base al servizio Azure
Controllare se un branch esiste nel remote con un workflow di GitHub