Utilizzo dell'API Notifications

Ernest Delgado

Introduzione

L'API Notifications ti consente di mostrare all'utente notifiche per determinati eventi, sia in modo passivo (nuove email, tweet o eventi nel calendario) sia in base alle interazioni dell'utente, indipendentemente dalla scheda attiva. Esiste una specifica in versione preliminare, ma al momento non è presente in nessun standard.

Per implementare le notifiche in pochi minuti, segui questi semplici passaggi:

Passaggio 1: verifica il supporto dell'API Notifications

Controlliamo se webkitNotifications è supportato. Tieni presente che il nome webkitNotifications è dovuto al fatto che fa parte di una bozza di specifiche. Le specifiche finali avranno invece una funzione notifications().

// check for notifications support
// you can omit the 'window' keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}

Passaggio 2: consenti all'utente di concedere le autorizzazioni a un sito web per la visualizzazione di notifiche

Qualsiasi dei costruttori che abbiamo menzionato genera un errore di sicurezza se l'utente non ha concesso manualmente le autorizzazioni al sito web per mostrare le notifiche. Per gestire l'eccezione, puoi utilizzare un'istruzione try-catch, ma puoi anche utilizzare il metodo checkPermission per lo stesso scopo.

document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
window.webkitNotifications.createNotification(
    'icon.png', 'Notification Title', 'Notification content...');
} else {
window.webkitNotifications.requestPermission();
}
}, false);

Se l'applicazione web non dispone delle autorizzazioni per mostrare le notifiche, il metodo requestPermission mostrerà una barra delle informazioni:

Tuttavia, è molto importante ricordare che il metodo requestPermission funziona solo nei gestori eventi attivati da un'azione dell'utente, come eventi del mouse o della tastiera, per evitare barre di informazioni non richieste. In questo caso, l'azione utente è il clic sul pulsante con ID "show_button". Lo snippet riportato sopra non funzionerà mai se l'utente non ha fatto clic esplicitamente su un pulsante o un link che attiva requestPermission a un certo punto.

Passaggio 3: collega gli ascoltatori e altre azioni

document.querySelector('#show_button').addEventListener('click', function() {
  if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
    // function defined in step 2
    notification_test = window.webkitNotifications.createNotification(
      'icon.png', 'Notification Title', 'Notification content...');
    notification_test.ondisplay = function() { ... do something ... };
    notification_test.onclose = function() { ... do something else ... };
    notification_test.show();
  } else {
    window.webkitNotifications.requestPermission();
  }
}, false);

A questo punto, ti consigliamo di incapsulare tutti questi eventi e azioni creando la tua classe Notification per mantenere il codice più pulito, anche se questo non rientra nell'ambito di questo tutorial.