Inizia a utilizzare l'API Notifications

In questo codelab utilizzerai le funzionalità di base dell'API Notifications per:

• Richiedere l'autorizzazione per inviare notifiche
• Invia notifiche
• Sperimenta le opzioni di notifica

Familiarizzare con l'app iniziale e il relativo codice

Inizia controllando l'app live nella nuova scheda di Chrome:

1. Premi "Control+Maiusc+J" (o "Command+Opzione+J" su Mac) per aprire DevTools. Fai clic sulla scheda Console.

   Dovresti vedere il seguente messaggio nella console:

   Notification permission is default
   

   Se non sai cosa significa, non preoccuparti: lo scoprirai presto.

2. Fai clic sui pulsanti nell'app live: Richiedi l'autorizzazione per inviare notifiche e Invia una notifica.

   La console stampa i messaggi "TODO" da un paio di stub di funzioni: requestPermission e sendNotification. Queste sono le funzioni che implementerai in questo codelab.

Ora diamo un'occhiata al codice dell'app di esempio. Apri public/index.js e dai un'occhiata ad alcune parti importanti del codice esistente:

• La funzione showPermission utilizza l'API Notifications per ottenere lo stato attuale dell'autorizzazione del sito e registrarlo nella console:

  // Print current permission state to console;
  // update onscreen message.
  function showPermission() {
    let permission = Notification.permission;
    console.log('Notification permission is ' + permission);
    let p = document.getElementById('permission');
    p.textContent = 'Notification permission is ' + permission;
  }
  

  Prima di richiedere l'autorizzazione, lo stato dell'autorizzazione è default. Nello stato di autorizzazione default, un sito deve richiedere e ottenere l'autorizzazione prima di poter inviare notifiche.

• La funzione requestPermission è uno stub:

  // Use the Notification API to request permission to send notifications.
  function requestPermission() {
    console.log('TODO: Implement requestPermission()');
  }
  

  Implementerai questa funzione nel passaggio successivo.

• La funzione sendNotification è uno stub:

  // Use the Notification constructor to create and send a new Notification.
  function sendNotification() {
    console.log('TODO: Implement sendNotification()');
  }
  

  Implementerai questa funzione dopo aver implementato requestPermission.

• Il listener di eventi window.onload chiama la funzione showPermission al caricamento della pagina, visualizzando lo stato attuale dell'autorizzazione nella console e nella pagina:

  window.onload = () => { showPermission(); };
  

Richiedere l'autorizzazione a inviare notifiche

In questo passaggio, aggiungerai la funzionalità per richiedere l'autorizzazione dell'utente per l'invio di notifiche.

Utilizzerai il metodo Notification.requestPermission() per attivare un popup che chiede all'utente di consentire o bloccare le notifiche del tuo sito.

1. Sostituisci lo stub della funzione requestPermission in public/index.js con il seguente codice:

   // Use the Notification API to request permission to send notifications.
   function requestPermission() {
     Notification.requestPermission()
       .then((permission) => {
         console.log('Promise resolved: ' + permission);
         showPermission();
       })
       .catch((error) => {
         console.log('Promise was rejected');
         console.log(error);
       });
   }
   

2. Ricarica la scheda di Chrome in cui stai visualizzando la tua app live.

3. Nell'interfaccia dell'app live, fai clic su Richiedi l'autorizzazione per inviare notifiche. Viene visualizzato un popup.

L'utente può dare una delle tre risposte al popup dell'autorizzazione.

Se l'utente fa clic su Consenti:

• Notification.permission è impostato su granted.

• Il sito potrà visualizzare le notifiche.

• Le chiamate successive a Notification.requestPermission verranno risolte in granted senza un popup.

Se l'utente fa clic su Blocca:

• Notification.permission è impostato su denied.

• Il sito non potrà mostrare notifiche all'utente.

• Le chiamate successive a Notification.requestPermission verranno risolte in denied senza un popup.

Se l'utente chiude il popup:

• Notification.permission rimanenti di default.

• Il sito non potrà mostrare notifiche all'utente.

• Le chiamate successive a Notification.requestPermission produrranno altri popup.

  Tuttavia, se l'utente continua a chiudere i popup, il browser potrebbe bloccare il sito, impostando Notification.permission su denied. All'utente non vengono mostrati né popup di richiesta di autorizzazione né notifiche.

  Al momento della stesura, il comportamento del browser in risposta ai popup di autorizzazione delle notifiche ignorati è ancora soggetto a modifiche. Il modo migliore per gestire questa situazione è richiedere sempre l'autorizzazione per le notifiche in risposta a un'interazione avviata dall'utente, in modo che si aspetti la richiesta e sappia cosa sta succedendo.

Invia una notifica

In questo passaggio, invierai una notifica all'utente.

Utilizzerai il costruttore Notification per creare una nuova notifica e tentare di visualizzarla. Se lo stato dell'autorizzazione è granted, la notifica verrà visualizzata.

1. Sostituisci lo stub della funzione sendNotification in index.js con il seguente codice:

   // Use the Notification constructor to create and send a new Notification.
   function sendNotification() {
     let title = 'Test';
     let options = {
       body: 'Test body',
       // Other options can go here
     };
     console.log('Creating new notification');
     let notification = new Notification(title, options);
   }
   

   Il costruttore Notification accetta due parametri: title e options. options è un oggetto con proprietà che rappresentano le impostazioni visive e i dati che puoi includere in una notifica. Per ulteriori informazioni, consulta la documentazione MDN sui parametri di notifica.

2. Aggiorna la scheda di Chrome in cui stai visualizzando la tua app live e fai clic sul pulsante Invia notifica. Viene visualizzata una notifica con il testo Test body.

Cosa succede quando invii notifiche senza autorizzazione?

In questo passaggio, aggiungerai un paio di righe di codice che ti consentiranno di vedere cosa succede quando tenti di visualizzare una notifica senza l'autorizzazione dell'utente.

• In public/index.js, alla fine della funzione sendNotification, definisci il nuovo gestore eventi onerror della notifica:

// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title = 'Test';
  let options = {
    body: 'Test body',
    // Other options can go here
  };
  console.log('Creating new notification');
  let notification = new Notification(title, options);
  notification.onerror = (event) => {
    console.log('Could not send notification');
    console.log(event);
  };
}

Per osservare un errore di autorizzazione alle notifiche:

1. Fai clic sull'icona a forma di lucchetto accanto alla barra degli URL di Chrome e reimposta l'impostazione dell'autorizzazione delle notifiche del sito al valore predefinito.

2. Fai clic su Richiedi autorizzazione per inviare notifiche e questa volta seleziona Blocca dal popup.

3. Fai clic su Invia notifica e vedi cosa succede. Il testo dell'errore (Could not send notification) e l'oggetto evento vengono registrati nella console.

(Facoltativo) Reimposta di nuovo le autorizzazioni alle notifiche del sito. Puoi provare a richiedere l'autorizzazione e chiudere il popup più volte per vedere cosa succede.

Sperimenta le opzioni di notifica

Ora hai esaminato le nozioni di base su come richiedere l'autorizzazione e inviare notifiche. Hai anche visto l'impatto delle risposte degli utenti sulla capacità della tua app di mostrare le notifiche.

Ora puoi sperimentare le numerose opzioni visive e di dati disponibili durante la creazione di una notifica. Di seguito è riportato l'elenco completo delle opzioni disponibili. Per ulteriori informazioni su queste opzioni, consulta la documentazione sulle notifiche su MDN.

Tieni presente che browser e dispositivi implementano queste opzioni in modo diverso, quindi ti consigliamo di testare le notifiche su piattaforme diverse per vedere come appaiono.

let options = {
  dir: 'auto',              // Text direction
  lang: 'en-US',            // A language tag
  badge: '/orange-cat.png', // Display when insufficient room
  body: 'Hello World',      // Body text
  tag: 'mytag',             // Tag for categorization
  icon: '/line-cat.png',    // To display in the notification
  image: '/orange-cat.png', // To display in the notification
  data: {                   // Arbitrary data; any data type
    cheese: 'I like cheese',
    pizza: 'Excellent cheese delivery mechanism',
    arbitrary: {
      faveNumber: 42,
      myBool: true
    }},
  vibrate: [200, 100, 200], // Vibration pattern for hardware
  renotify: false,          // Notify if replaced? Default false
  requireInteraction: false,// Active until click? Default false
  /*
    actions:   // Array of NotificationActions
               // Only usable with a service worker
    [{
      action: 'shop',
      title: 'Shop!',
      icon: '/bags.png'
    },],
  */
}

Per altri suggerimenti, consulta il generatore di notifiche di Peter Beverloo.

Dai un'occhiata al prossimo codelab di questa serie, Gestire le notifiche con un service worker, per saperne di più.