Utilizzo dell'API Notifications

Ernest Delgado

Avviso: questo articolo è obsoleto e fa riferimento a un'API ritirata. Per una copertura moderna dell'API Notifications (supportata da Chrome, Firefox e Safari), leggi la documentazione MDN su Notification. Notify.js offre anche una buona astrazione per l'API.

Introduzione

L'API Notifications ti consente di mostrare all'utente notifiche per determinati eventi, sia passivamente (nuove email, tweet o eventi di calendario) sia in base alle interazioni dell'utente, indipendentemente dalla scheda attiva. Esiste una bozza di specifica, ma al momento non è inclusa in alcuno standard.

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

Passaggio 1: controlla il supporto dell'API Notifications

Verifichiamo se webkitNotifications è supportato. Tieni presente che il nome di webkitNotifications è dovuto al fatto che fa parte di una bozza di specifica. 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: chiedi all'utente di concedere le autorizzazioni a un sito web per mostrare le notifiche

Uno qualsiasi dei costruttori che abbiamo menzionato genererà 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 anche il metodo checkPermission.

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 informativa:

La barra informativa dell'autorizzazione delle notifiche in Google Chrome.

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 le barre informative non richieste. In questo caso, l'azione dell'utente è il clic sul pulsante con ID "show_button". Lo snippet precedente 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: allega 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 una tua classe di notifiche per mantenere il codice più pulito, anche se questo va oltre l'ambito di questo tutorial.