Passaggio 3: aggiungi sveglie e notifiche

In questo passaggio, scoprirai:

• Come riattivare la tua 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 la tua app delle cose da fare con i promemoria

Migliora l'app Da fare aggiungendo funzionalità per ricordare all'utente se ha attività da svolgere, anche quando l'app è chiusa.

Innanzitutto, devi aggiungere un modo per consentire all'app di controllare regolarmente le attività non completate. Quindi, l'app deve mostrare un messaggio all'utente, anche se la finestra dell'app Da fare è chiusa. A questo scopo, devi capire come funzionano sveglie e notifiche nelle app di Chrome.

Aggiungi sveglie

Usa chrome.alarms per impostare un intervallo di sveglia. Finché Chrome è in esecuzione, il listener di sveglie viene chiamato all'incirca 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 il momento, la funzione di callback registra un messaggio alla console ogni volta che è presente un'attività:

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. Come ricorderai dal Passaggio 2, una delle più comuni non conformità a CSP è causata da JavaScript incorporato. In index.html, aggiungi questo elemento 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 per le sveglie

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

Usa il codice qui sotto per aggiungere checkAlarm(), createAlarm(), cancelAlarm() e toggleAlarm() e un gestore di eventi clic per attivare/disattivare la sveglia quando il pulsante Attiva allarme è selezionato.

(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) l'allarme.

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

Tieni presente che:

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

Esaminiamo uno alla volta alcuni dei pezzi di alarms.js che utilizzano i metodi chrome.alarms.

Crea sveglie

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

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 utilizziamo valori piccoli (0,1 di un minuto) a scopo dimostrativo ai soli scopi.

Cancella sveglie

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

chrome.alarms.clear(alarmName);

Il primo parametro deve essere la stringa di identificazione utilizzata come nome della sveglia chrome.alarms.create().

Il secondo parametro (facoltativo) è una funzione di callback che dovrebbe assumere il formato:

function(boolean wasCleared) {...};

Attiva sveglie

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

getAll() accetta una funzione di callback che passa in un array di oggetti Alarm. Per vedere cosa c'è dentro Alarm, puoi controllare 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 impostate per eseguire il polling dell'app a intervalli regolari, usali come base per aggiungere notifiche visive.

Aggiungi notifiche

Modifica la notifica della sveglia in modo che l'utente possa riconoscerla facilmente. Utilizza le funzionalità di chrome.notifications per visualizzare una notifica desktop come quella riportata di seguito:

Quando l'utente fa clic sulla notifica, dovrebbe essere visualizzata la finestra dell'app Da fare.

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, esegui il refactoring del callback chrome.app.window.create() in un metodo autonomo per 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 di sveglie

Nella parte superiore di background.js, aggiungi una variabile per il nome di un database che viene utilizzato nella sveglia. listener:

var dbName = 'todos-vanillajs';

Il valore di dbName corrisponde al nome del database impostato nella riga 17 di js/app.js:

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

Crea una notifica

Invece di registrare semplicemente una nuova sveglia nella console, aggiorna il listener onAlarm per fare in modo che venga memorizzata 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 dell'attività aperti (non completati). Se almeno uno è aperto attività, crea un popup di notifica tramite chrome.notifications.create().

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

Il secondo parametro è un oggetto NotificationOptions. Esistono molte opzioni per il rendering il popup di notifica. In questo caso utilizziamo uno schema "di base" una notifica con un'icona, un titolo e un messaggio. Altri tipi di notifiche includono immagini, elenchi e indicatori di avanzamento. Torna a questa pagina al termine del Passaggio 3 e sperimentare altre funzioni di notifica.

Il terzo parametro (facoltativo) è un metodo di callback che dovrebbe assumere il formato:

function(string notificationId) {...};

Gestire le interazioni di notifica

Apri l'app Da fare quando l'utente fa clic sulla notifica. Alla fine di background.js, crea un'istanza 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() o crea una nuova finestra dell'app Chrome se non ne esiste già una o mette in evidenza le apri la finestra con ID finestra main.

Lancia l'app delle cose da fare completata

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

Verifica che questi comportamenti funzionino come previsto:

• Se non hai voci di attività non completate, non ci sono notifiche popup.
• Se fai clic sulla notifica quando l'app è chiusa, l'app si aprirà o verrà visualizzata il focus.

Risoluzione dei problemi

Il file background.js finale dovrebbe avere un aspetto simile a questo. Se le notifiche non vengono visualizzate, verifica che Chrome abbia la versione 28 o successive. Se le notifiche continuano a non essere visualizzate, controlla se nella console DevTools su entrambe le finestre principali (clic con il tasto destro del mouse > Ispeziona elemento) e la pagina di sfondo (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 andare al passaggio successivo? Vai al passaggio 4: apri link esterni con una WebView »