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
Utilizzare gli snapshot con Azure File shares
Utilizzare i primary constructor in C#
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Ottimizzazione dei block template in Angular 17
Utilizzare Tailwind CSS all'interno di React: primi componenti
Usare il versioning con i controller di ASP.NET Core Web API
Come migrare da una form non tipizzata a una form tipizzata in Angular
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Creare form tipizzati con Angular
Utilizzare Model as a Service su Microsoft Azure
Miglioramenti nell'accessibilità con Angular CDK
Definire stili a livello di libreria in Angular