Nel contesto delle moderne applicazioni web, l’interazione con l’utente non si limita più alla semplice visualizzazione di contenuti all’interno della pagina. Sempre più spesso è necessario comunicare eventi rilevanti anche quando l’utente non sta attivamente navigando il sito. È proprio in questo scenario che entra in gioco la JavaScript Notification API.
Questa API consente alle applicazioni web di mostrare notifiche a livello di sistema operativo, simili a quelle delle applicazioni native, permettendo di raggiungere l’utente anche quando il browser è in background o la scheda non è in primo piano.
Cos’è la Notification API
La Notification API è una specifica Web che permette a JavaScript di interagire direttamente con il sistema di notifiche del dispositivo dell’utente. A differenza di un alert o di un messaggio HTML, la notifica non fa parte del DOM della pagina ma viene gestita dal sistema operativo.
Dal punto di vista ingegneristico, questo approccio consente di separare il livello di presentazione dell’applicazione web dal canale di comunicazione asincrono verso l’utente, migliorando visibilità ed efficacia dei messaggi.
Per motivi di sicurezza, l’uso della Notification API è generalmente consentito solo su connessioni HTTPS, fatta eccezione per localhost durante la fase di sviluppo.
Un’API basata sul consenso dell’utente
La Notification API è basata su un modello permission-based. Prima di poter mostrare una notifica, l’applicazione deve ottenere il consenso esplicito dell’utente, che può essere concesso, negato oppure lasciato nello stato predefinito.
Verifica del supporto nel browser
Prima di utilizzare la Notification API è buona prassi verificare che il browser la supporti:
if (!("Notification" in window)) {
console.log("Questo browser non supporta le notifiche di sistema.");
}Richiesta del permesso e gestione asincrona
La richiesta del permesso avviene in modo asincrono e non blocca il thread principale. È consigliabile richiederlo solo dopo un’azione esplicita dell’utente, come il click su un pulsante.
async function richiediPermessoNotifiche() {
if (!("Notification" in window)) {
console.log("Notifiche non supportate da questo browser.");
return;
}
const permesso = await Notification.requestPermission();
if (permesso === "granted") {
console.log("Permesso notifiche concesso.");
} else if (permesso === "denied") {
console.log("Permesso notifiche negato dall’utente.");
} else {
console.log("Permesso notifiche non ancora deciso.");
}
}Creare e visualizzare una notifica
Una volta ottenuto il consenso, è possibile creare e visualizzare una notifica personalizzando titolo, messaggio e icona.
function mostraNotifica(titolo, messaggio) {
if (Notification.permission !== "granted") return;
const notifica = new Notification(titolo, {
body: messaggio,
icon: "/img/notifica.png"
});
notifica.onclick = () => {
window.focus();
window.location.href = "/articoli/dettaglio";
};
}Limiti e buone pratiche
L’abuso delle notifiche porta quasi sempre l’utente a negare il permesso. È fondamentale utilizzare questo strumento solo per eventi realmente rilevanti e coerenti con le aspettative dell’utente.
Inoltre, la Notification API da sola non consente l’invio di notifiche con browser completamente chiuso. Per questo scenario è necessario introdurre Service Worker e Push API.
Conclusioni
La JavaScript Notification API rappresenta un ponte tra il mondo delle applicazioni web e quello delle applicazioni native. Se utilizzata correttamente, migliora l’esperienza utente e abilita flussi di comunicazione asincroni efficaci e moderni.