Utilizzo dell'API Notifications

Ernest Delgado

Twitter

introduzione

L'API Notifications consente di mostrare all'utente notifiche relative a determinati eventi, sia in modo passivo (nuove email, tweet o eventi di calendario) sia durante le interazioni degli utenti, indipendentemente dalla scheda attiva. Esiste una bozza di specifiche, ma al momento non è presente in nessuno standard.

Puoi seguire questi semplici passaggi per implementare le notifiche in pochi minuti:

Passaggio 1: verifica se è supportato l'API Notifications

Verifichiamo se il servizio webkitNotifications è supportato. Tieni presente che il nome di webkitNotifications è dovuto al fatto che fa parte di una specifica di bozza. La specifica finale avrà 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 a un sito web le autorizzazioni per la visualizzazione delle notifiche

Uno qualsiasi dei costruttori citati genererà un errore di sicurezza se l'utente non ha concesso manualmente al sito web le autorizzazioni per mostrare le notifiche. Per gestire l'eccezione, puoi utilizzare un'istruzione proof-catch, ma puoi anche usare 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 di informazioni:

Tuttavia, è molto importante ricordare che il metodo requestPermission funziona solo nei gestori di 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 dell'utente è il clic sul pulsante con ID "show_button". Lo snippet riportato sopra non funziona mai se l'utente non ha fatto clic in modo esplicito su un pulsante o un link che attiva requestPermission.

Passaggio 3: associa listener 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, potresti voler incapsulare tutti questi eventi e azioni creando la tua classe di notifica per mantenere il codice più pulito, anche se questo non rientra nell'ambito di questo tutorial.