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
Usare una container image come runner di GitHub Actions
Utilizzare ChatGPT con Azure OpenAI
Miglioramenti nell'accessibilità con Angular CDK
Reactive form tipizzati con FormBuilder in Angular
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Utilizzare Model as a Service su Microsoft Azure
Gestire i null nelle reactive form tipizzate di Angular
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Effettuare delete massive con Entity Framework Core 7
Utilizzare Tailwind CSS all'interno di React: installazione
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8