Passaggio 3: aggiungi sveglie e notifiche

In questo passaggio, imparerai:

• Come riattivare l'app a intervalli specificati per eseguire attività in background.
• Come utilizzare le notifiche sullo schermo per attirare l'attenzione su qualcosa di importante.

Tempo stimato per completare questo passaggio: 20 minuti. Per visualizzare l'anteprima di ciò che completerai in questo passaggio, vai alla fine di questa pagina ↓.

Migliora l'app Attività con i promemoria

Migliora l'app Attività aggiungendo funzionalità che ricordano all'utente se ha attività da svolgere aperte, anche quando l'app è chiusa.

Innanzitutto, devi aggiungere un modo in cui l'app possa controllare regolarmente la presenza di attività non completate. Successivamente, l'app deve mostrare un messaggio all'utente, anche se la finestra dell'app Da fare è chiusa. Per farlo, devi comprendere il funzionamento di sveglie e notifiche nelle app di Chrome.

Aggiungi sveglie

Usa chrome.alarms per impostare un intervallo di riattivazione. Quando Chrome è in esecuzione, il listener della sveglia viene chiamato approssimativamente all'intervallo impostato.

Aggiornamento delle autorizzazioni per le app

In manifest.json, richiedi l'autorizzazione "alarms":

"permissions": ["storage", "alarms"],

Aggiorna gli script in background

In background.js, aggiungi un listener onAlarm. Per ora, la funzione callback registra un messaggio nella console ogni volta che è presente una voce di promemoria:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
});
chrome.alarms.onAlarm.addListener(function( alarm ) {
  console.log("Got an alarm!", alarm);
});

Aggiorna visualizzazione HTML

In index.html, aggiungi un pulsante Attiva sveglia:

<footer id="info">
  <button id="toggleAlarm">Activate alarm</button>
  ...
</footer>

Ora devi scrivere il gestore di eventi JavaScript per questo nuovo pulsante. Ricorda, dal Passaggio 2, che una delle non conformità ai CSP più comuni è causata da JavaScript incorporato. In index.html, aggiungi questa riga per importare un nuovo file alarms.js, che creerai nel seguente passaggio:

  </footer>
  ...
  <script src="js/app.js"></script>
  <script src="js/alarms.js"></script>
</body>

Crea script delle sveglie

Crea un nuovo file nella cartella js denominato alarms.js.

Utilizza il codice riportato di seguito per aggiungere i metodi checkAlarm(), createAlarm(), cancelAlarm() e toggleAlarm(), insieme a un gestore di eventi di clic per attivare/disattivare la sveglia quando viene fatto clic sul pulsante Attiva sveglia.

(function () {
  'use strict';
   var alarmName = 'remindme';
   function checkAlarm(callback) {
     chrome.alarms.getAll(function(alarms) {
       var hasAlarm = alarms.some(function(a) {
         return a.name == alarmName;
       });
       var newLabel;
       if (hasAlarm) {
         newLabel = 'Cancel alarm';
       } else {
         newLabel = 'Activate alarm';
       }
       document.getElementById('toggleAlarm').innerText = newLabel;
       if (callback) callback(hasAlarm);
     })
   }
   function createAlarm() {
     chrome.alarms.create(alarmName, {
       delayInMinutes: 0.1, periodInMinutes: 0.1});
   }
   function cancelAlarm() {
     chrome.alarms.clear(alarmName);
   }
   function doToggleAlarm() {
     checkAlarm( function(hasAlarm) {
       if (hasAlarm) {
         cancelAlarm();
       } else {
         createAlarm();
       }
       checkAlarm();
     });
   }
  $$('#toggleAlarm').addEventListener('click', doToggleAlarm);
  checkAlarm();
})();

Ricarica l'app e dedica qualche istante ad attivare (e disattivare) la sveglia.

Ogni volta che la sveglia è attivata, dovresti vedere i messaggi di log stampati nella console ogni volta che suona l'allarme:

Dovresti notare che:

• Anche quando chiudi la finestra dell'app Attività, le sveglie continueranno ad attivarsi.
• Su piattaforme diverse da ChromeOS, se chiudi completamente tutte le istanze del browser Chrome, gli allarmi non si attivano.

Esaminiamo alcuni passaggi in alarms.js che utilizzano i metodi chrome.alarms uno per uno.

Crea sveglie

In createAlarm(), utilizza l'API chrome.alarms.create() per creare una sveglia quando viene attivata l'opzione Attiva sveglia.

chrome.alarms.create(alarmName, {delayInMinutes: 0.1, periodInMinutes: 0.1});

Il primo parametro è una stringa facoltativa che identifica un nome univoco per la sveglia, ad esempio remindme. Nota: devi impostare il nome di una sveglia per annullarla per nome.

Il secondo parametro è un oggetto alarmInfo. Le proprietà valide per alarmInfo includono when o delayInMinutes e periodInMinutes. Per ridurre il carico sul computer dell'utente, Chrome limita le sveglie a una volta al minuto. Qui stiamo usando piccoli valori (0,1 di un minuto) solo a scopo dimostrativo.

Cancella sveglie

In cancelAlarm(), utilizza l'API chrome.alarms.clear() per annullare una sveglia quando viene attivata l'opzione Annulla sveglia.

chrome.alarms.clear(alarmName);

Il primo parametro deve essere la stringa identificativa utilizzata come nome di allarme in chrome.alarms.create().

Il secondo parametro (facoltativo) è una funzione di callback che deve avere il formato:

function(boolean wasCleared) {...};

Attiva le sveglie

In checkAlarm(), utilizza l'API chrome.alarms.getAll() per ottenere un array di tutti gli allarmi creati e aggiornare lo stato dell'interfaccia utente del pulsante di attivazione/disattivazione.

getAll() accetta una funzione di callback che trasmette un array di oggetti Alarm. Per vedere cosa c'è in Alarm, puoi ispezionare gli allarmi in esecuzione nella console DevTools in questo modo:

chrome.alarms.getAll(function(alarms) {
  console.log(alarms);
  console.log(alarms[0]);
});

Verrà restituito un oggetto come {name: "remindme", periodInMinutes: 0.1, scheduledTime: 1397587981166.858}, come mostrato di seguito:

Preparati per la prossima sezione

Ora che le sveglie sono attive per far controllare l'app a intervalli regolari, usa questa funzione come base per aggiungere notifiche visive.

Aggiungere notifiche

Cambiamo la notifica della sveglia impostandola su qualcosa che l'utente può notare facilmente. Utilizza chrome.notifications per mostrare una notifica desktop come la seguente:

Quando l'utente fa clic sulla notifica, dovrebbe venire visualizzata la finestra dell'app Attività.

Aggiornamento delle autorizzazioni per le app

In manifest.json, richiedi l'autorizzazione "notifications":

"permissions": ["storage", "alarms", "notifications"],

Aggiorna gli script in background

In background.js, rifattorizza il callback chrome.app.window.create() in un metodo autonomo in modo da poterlo riutilizzare:

chrome.app.runtime.onLaunched.addListener(function() {
function launch() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
}
});
chrome.app.runtime.onLaunched.addListener(launch);
...

Aggiorna listener della sveglia

Nella parte superiore di background.js, aggiungi una variabile per il nome di un database che viene utilizzata nell'ascolto di allarmi:

var dbName = 'todos-vanillajs';

Il valore di dbName è lo stesso nome del database impostato nella riga 17 di js/app.js:

var todo = new Todo('todos-vanillajs');

Crea una notifica

Anziché registrare una nuova sveglia nella console, aggiorna il listener onAlarm per ottenere i dati archiviati tramite chrome.storage.local.get() e chiama un metodo showNotification():

chrome.alarms.onAlarm.addListener(function( alarm ) {
  console.log("Got an alarm!", alarm);
  chrome.storage.local.get(dbName, showNotification);
});

Aggiungi questo metodo showNotification() a background.js:

function launch(){
  ...
}

function showNotification(storedData) {
  var openTodos = 0;
  if ( storedData[dbName].todos ) {
    storedData[dbName].todos.forEach(function(todo) {
      if ( !todo.completed ) {
        openTodos++;
      }
    });
  }
  if (openTodos>0) {
    // Now create the notification
    chrome.notifications.create('reminder', {
        type: 'basic',
        iconUrl: 'icon_128.png',
        title: 'Don\'t forget!',
        message: 'You have '+openTodos+' things to do. Wake up, dude!'
     }, function(notificationId) {});
  }
}

chrome.app.runtime.onLaunched.addListener(launch);
...

showNotification() verificherà la presenza di elementi di promemoria aperti (non completati). Se c'è almeno un elemento da fare aperto, crea una notifica popup tramite chrome.notifications.create().

Il primo parametro è un nome di notifica che identifica in modo univoco. Devi avere impostato un ID per cancellare o gestire le interazioni con quella notifica. Se l'ID corrisponde a una notifica esistente, create() la cancella prima di creare una nuova notifica.

Il secondo parametro è un oggetto NotificationOptions. Ci sono molte opzioni per visualizzare il popup di notifica. Qui stiamo utilizzando una notifica "di base" con un'icona, un titolo e un messaggio. Altri tipi di notifiche includono immagini, elenchi e indicatori di avanzamento. Non esitare a tornare a questa sezione una volta completato il passaggio 3 e a sperimentare le altre funzionalità di notifica.

Il terzo parametro (facoltativo) è un metodo di callback che deve avere il formato:

function(string notificationId) {...};

Gestire le interazioni con le notifiche

Apri l'app Attività quando l'utente fa clic sulla notifica. Alla fine di background.js, crea un gestore di eventi chrome.notifications.onClicked:

chrome.notifications.onClicked.addListener(function() {
  launch();
});

Il callback del gestore di eventi chiama semplicemente il metodo launch(). chrome.app.window.create() crea una nuova finestra dell'app Chrome se non ne esiste già una oppure mette in stato attivo la finestra attualmente aperta con ID finestra main.

Avvia l'app Attività completata

Hai completato il passaggio 3. Ricarica subito l'app Attività con i promemoria.

Verifica che questi comportamenti funzionino come previsto:

• Se non hai elementi di promemoria non completati, non vengono visualizzate notifiche popup.
• Se fai clic sulla notifica quando l'app è chiusa, l'app Attività si aprirà o diventerà attiva.

Risolvere i problemi

Il file background.js finale dovrebbe essere simile a questo. Se le notifiche non vengono visualizzate, verifica che Chrome sia in versione 28 o successiva. Se le notifiche continuano a non essere visualizzate, controlla se ci sono messaggi di errore nella console DevTools sia nella finestra principale (clic con il tasto destro del mouse > Ispeziona elemento) che nella pagina in background (fai clic con il tasto destro del mouse > Ispeziona pagina in background).

Per maggiori informazioni

Per informazioni più dettagliate su alcune delle API introdotte in questo passaggio, fai riferimento a:

• Dichiarare le autorizzazioni ↑
• chrome.alarms ↑
• chrome.alarms.onAlarm ↑
• chrome.alarms.create() ↑
• chrome.alarms.clear() ↑
• chrome.alarms.getAll() ↑
• chrome.notifications ↑
• chrome.notifications.create() ↑
• NotificationOptions ↑
• chrome.notifications.onClicked ↑

Vuoi continuare con il passaggio successivo? Vai al Passaggio 4: apri i link esterni con un componente WebView »