Inizia a utilizzare l'API Notifications

In questo codelab, utilizzerai le funzionalità di base del API Notifications per:

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

Supporto dei browser

  • Chrome: 20.
  • Edge: 14.
  • Firefox: 22.
  • Safari: 7.

Origine

Le notifiche vengono bloccate automaticamente dall'app Glitch incorporata, quindi non potrai visualizzare l'anteprima dell'app in questa pagina. Ecco invece cosa fare:

  1. Fai clic su Remixa per modificare per rendere modificabile il progetto.
  2. Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi Schermo intero schermo intero.

Il Glitch dovrebbe aprirsi in una nuova scheda di Chrome:

Screenshot che mostra l'app live remixata in una nuova scheda

Mentre lavori in questo codelab, apporta modifiche al codice nel Glitch incorporato in questa pagina. Aggiorna la nuova scheda con la tua app pubblicata per vedere le modifiche.

Acquisisci familiarità con l'app iniziale e il relativo codice

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

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

    Nella console dovresti vedere il seguente messaggio:

    Notification permission is default
    

    Se non sai cosa significa, non preoccuparti: e presto sarà tutto svelato.

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

    Nella console viene visualizzato "TODO" messaggi da un paio di stub di funzione: requestPermission e sendNotification. Queste sono le funzioni che implementerai in questo codelab.

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

  • La funzione showPermission utilizza l'API Notifications per ricevere lo stato di autorizzazione corrente del sito e registralo 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 di autorizzazione corrente nella console e nella pagina:

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

Richiedere l'autorizzazione per l'invio di notifiche

In questo passaggio aggiungerai funzionalità per richiedere l'autorizzazione dell'utente a inviare notifiche.

Utilizzerai il metodo Notification.requestPermission() per attivare un popup che chiede all'utente di consentire o bloccare le notifiche dal 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 l'app in diretta.

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

L'utente può rispondere a una delle tre seguenti domande al popup di autorizzazione.

Risposta degli utenti Stato dell'autorizzazione alle notifiche
L'utente seleziona Consenti granted
L'utente seleziona Blocca. denied
L'utente chiude il popup senza effettuare una selezione default

Se l'utente fa clic su Consenti:

  • Notification.permission impostata su granted.

  • Il sito potrà mostrare le notifiche.

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

Se l'utente fa clic su Blocca:

  • Notification.permission impostata su denied.

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

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

Se l'utente chiude il popup:

  • Notification.permission rimane default.

  • Il sito non potrà mostrare notifiche agli utenti.

  • Le chiamate successive a Notification.requestPermission produrranno più popup.

    Tuttavia, se l'utente continua a chiudere i popup, il browser potrebbe bloccare il sito impostando Notification.permission su denied. Non è quindi possibile mostrare all'utente né popup di richiesta di autorizzazione né notifiche.

    Al momento della stesura di questo documento, il comportamento del browser in risposta ai popup di autorizzazione per le notifiche ignorate è ancora soggetto a modifiche. Il modo migliore per gestire questo problema è richiedere sempre l'autorizzazione alle notifiche in risposta ad alcune interazioni avviate dall'utente, in modo che si aspettino l'evento e sappiano cosa sta succedendo.

di Gemini Advanced.

Invia una notifica

In questo passaggio, invierai una notifica all'utente.

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

  1. Sostituisci la 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 richiede due parametri: title e options. options è un oggetto con proprietà che rappresentano impostazioni visive e 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 l'app live e fai clic sul pulsante Invia notifica. Dovrebbe essere 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 consentono di vedere cosa succede. quando tenti di visualizzare una notifica senza l'autorizzazione dell'utente.

  • In public/index.js, al termine della funzione sendNotification, definisci il gestore di eventi onerror della nuova 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 relativo all'autorizzazione alle notifiche:

  1. Fai clic sull'icona lucchetto accanto alla barra dell'URL di Chrome e ripristina il valore predefinito per l'impostazione relativa all'autorizzazione alle notifiche del sito.

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

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

Se vuoi, 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

Hai appreso 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 notifiche.

Ora puoi provare le numerose opzioni visive e relative ai dati disponibili quando crei una notifica. Di seguito è riportata la serie completa di opzioni disponibili. Per ulteriori informazioni su queste opzioni, consulta la documentazione relativa alle notifiche su MDN.

Tieni presente che i browser e i dispositivi implementano queste opzioni in modo diverso. quindi vale la pena 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 altre idee, vedi il generatore di notifiche di Peter Beverloo.

Se non riesci a procedere, ecco il codice completo per questo codelab: glitch.com/edit/#!/codelab-notifications-get-started-completed

Per scoprire di più, dai un'occhiata al prossimo codelab di questa serie, Gestire le notifiche con un service worker.