Notifications API e gestione dei permessi

Notification.permission è una stringa statica che riflette lo stato attuale dell'autorizzazione. Può essere "granted" (l'utente ha consentito), "denied" (l'utente ha bloccato) oppure "default" (non è mai stata richiesta). Verifichi questa proprietà prima di provare a mostrare notifiche, per evitare errori non necessari.

Notification.requestPermission() restituisce una Promise che si risolve con la nuova stringa di autorizzazione. La chiami solo in risposta a un'azione chiara dell'utente, non al caricamento della pagina. I browser ignorano o sopprimono le richieste di autorizzazione mostrate immediatamente al caricamento e gli utenti le trovano fastidiose quando compaiono senza contesto.

Il modello più efficace consiste nel mostrare una richiesta nell'app che spieghi il vantaggio, quindi permettere all'utente di fare clic su "Abilita notifiche" prima di chiamare requestPermission(). In questo modo fornisce il contesto, aumenta il tasso di accettazione ed evita che il browser consideri il sito fonte di spam. Non richieda mai l'autorizzazione al caricamento della pagina.

new Notification(title, options) crea e mostra una notifica di sistema. Il primo argomento è la stringa del titolo. L'oggetto options è il secondo argomento e accetta proprietà come body (testo del sottotitolo), icon (URL dell'immagine) e tag per evitare duplicati. Funziona solo se l'autorizzazione è "granted".

Tra le principali opzioni delle notifiche vi sono: body per il testo descrittivo sotto il titolo, icon per una piccola immagine, badge per la piccola icona monocromatica mostrata nell'area delle notifiche del sistema operativo, image per un'immagine grande incorporata, tag per sostituire una notifica precedente con lo stesso tag e requireInteraction: true per mantenere la notifica finché l'utente non esegue un'azione.

L'istanza Notification genera diversi eventi: onclick viene generato quando l'utente fa clic sulla notifica (lo utilizzi per portare la finestra in primo piano e navigare), onclose viene generato quando la notifica viene chiusa e onerror viene generato se si verifica un problema durante la sua creazione. Colleghi i gestori all'istanza restituita dopo aver chiamato new Notification().

Memorizzi in una variabile l'istanza Notification restituita e chiami notification.close() per chiuderla programmaticamente. È utile per le notifiche legate al tempo, che diventano irrilevanti dopo un certo periodo. Combini questa tecnica con setTimeout per chiudere automaticamente la notifica dopo alcuni secondi.

La Notifications API richiede un contesto sicuro. Nelle pagine HTTP, typeof Notification === 'undefined' oppure l'API viene completamente disabilitata, a seconda del browser. Si tratta di una misura di sicurezza per impedire ai siti dannosi di inondare gli utenti con falsi messaggi di sistema. Verifichi sempre la disponibilità prima di utilizzarla.

Un hook useNotifications può esporre due metodi: requestPermission() e showNotification(title, options). Internamente tiene traccia dello stato attuale dell'autorizzazione e lo aggiorna dopo la richiesta. I componenti chiamano showNotification senza doversi occupare dei controlli sull'autorizzazione, perché l'hook li gestisce internamente.

La Page Visibility API espone document.hidden e l'evento visibilitychange. Le notifiche sono più utili quando l'utente non sta già visualizzando la scheda. Verifichi document.hidden === true prima di mostrare una notifica, per evitare avvisi ridondanti quando la pagina è già in primo piano.

La Notifications API mostrata qui serve per le notifiche attivate localmente dalla pagina stessa. Per le notifiche push che arrivano anche quando la pagina è chiusa, è necessario usare la Push API insieme a un service worker. Il service worker riceve l'evento push e chiama self.registration.showNotification() in background.

Quale dei seguenti NON è un valore valido per Notification.permission?

Notification.permission può avere il valore granted, denied oppure default. Richieda sempre l'autorizzazione dopo un'azione dell'utente, non al caricamento della pagina. Utilizzi new Notification(title, options) per creare notifiche e gestisca onclick per portare la finestra in primo piano. Combini questa API con la Visibility API per mostrare le notifiche solo quando la scheda è nascosta.