Introduzione alle Notifications in Javascript

Oggi vediamo uno snippet di codice per capire le basi delle Notifications Javascript.

Premetto il comportamento è diverso tra i vvari browsers.

Ad esempio in Chrome compare un messaggio che ci chiede se vogliamo accettarl; in Firefox no, compare solo una icona di chat vicino alla barra degli url.

In tutti i casi, prima di visualizzare una notifica dobbiamo accertarci che il browser le supporti, che l'utente dia il permesso.

Inoltre le possiamo usare solo in ambito sicuro (HTTPS).

Detto ciò, ecco un snippet di esempio:

if (window.Notification || Notification.permission !== 'denied') {
    Notification.requestPermission().then(status => {
        if (status === 'granted') {
            const notification = new Notification('Questa è una notifica!');
            setTimeout(() => notification.close(), 2000);
        }
    });
}

Come vedete prima controlliamo che l'oggetto Notification sia disponibile e sia autorizzato.

In caso creiamo un nuovo oggetto Notification con un messaggio.

Poi impostiamo un timeout per cancellarlo dopo 2 secondi.

Nel caso specifico non facciamo nulla se l'utente non da l'autorizzazione, ma ovviamente è una cosa implementabile (dipende un pò dal contesto e da quello che dovete fare).

Enjoy!