Étape 3: Ajoutez des alarmes et des notifications

Au cours de cette étape, vous allez découvrir:

• Comment activer votre application à des intervalles spécifiés pour exécuter des tâches en arrière-plan
• Comment utiliser les notifications à l'écran pour attirer l'attention sur quelque chose d'important.

Temps estimé pour terminer cette étape: 20 minutes. Pour prévisualiser ce que vous allez réaliser au cours de cette étape, accédez au bas de cette page ↓.

Améliorer votre application Todo avec des rappels

Améliorez l'application Todo en ajoutant une fonctionnalité permettant de rappeler à l'utilisateur s'il a des tâches ouvertes, même lorsque l'application est fermée.

Tout d'abord, vous devez ajouter un moyen pour l'application de vérifier régulièrement les tâches non terminées. Ensuite, l'application doit afficher un message, même si la fenêtre de l'application Todo est fermée. Pour ce faire, vous devez comprendre le fonctionnement des alarmes et des notifications dans les applications Chrome.

Ajouter des alarmes

Utilisez chrome.alarms pour définir un intervalle de réveil. Tant que Chrome est en cours d'exécution, l'écouteur d'alarmes est appelé à peu près à l'intervalle défini.

Mettre à jour les autorisations des applications

Dans le fichier manifest.json, demandez l'autorisation "alarms":

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

Mettre à jour les scripts d'arrière-plan

Dans background.js, ajoutez un écouteur onAlarm. Pour l'instant, la fonction de rappel consigne simplement un message dans la console chaque fois qu'une tâche est identifiée:

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);
});

Mettre à jour l'affichage HTML

Dans le fichier index.html, ajoutez un bouton Activer l'alarme:

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

Vous devez maintenant écrire le gestionnaire d'événements JavaScript pour ce nouveau bouton. Comme nous l'avons vu à l'étape 2, l'une des non-conformités les plus courantes avec CSP est causée par le code JavaScript intégré. Dans le fichier index.html, ajoutez cette ligne pour importer un fichier alarms.js que vous allez créer à l'étape suivante:

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

Créer un script d'alarmes

Dans votre dossier js, créez un fichier intitulé alarms.js.

Utilisez le code ci-dessous pour ajouter les méthodes checkAlarm(), createAlarm(), cancelAlarm() et toggleAlarm(), ainsi qu'un gestionnaire d'événements de clic pour activer/désactiver l'alarme lorsque l'utilisateur clique sur le bouton Activer l'alarme.

(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();
})();

Actualisez votre application et activez (et désactivez) l'alarme pendant quelques instants.

Chaque fois que l'alarme est activée, des messages de journal devraient s'afficher dans la console chaque fois que l'alarme "se déclenche":

Voici ce que vous devez remarquer:

• Même lorsque vous fermez la fenêtre de l'application Todo, les alarmes continuent de retentir.
• Sur les plates-formes autres que ChromeOS, les alarmes ne se déclencheront pas si vous fermez complètement toutes les instances du navigateur Chrome.

Examinons un par un certains éléments de alarms.js qui utilisent les méthodes chrome.alarms.

Créer des alarmes

Dans createAlarm(), utilisez l'API chrome.alarms.create() pour créer une alarme lorsque l'option Activer l'alarme est activée.

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

Le premier paramètre est une chaîne facultative identifiant un nom unique pour votre alarme, par exemple remindme. (Remarque: Vous devez donner un nom à l'alarme pour pouvoir l'annuler en indiquant son nom.)

Le deuxième paramètre est un objet alarmInfo. Les propriétés valides pour alarmInfo incluent when, delayInMinutes et periodInMinutes. Afin de réduire la charge sur l'ordinateur de l'utilisateur, Chrome limite les alarmes à une fois par minute. Nous utilisons ici des valeurs faibles (0,1 de minute) à des fins de démonstration uniquement.

Supprimer les alarmes

Dans cancelAlarm(), utilisez l'API chrome.alarms.clear() pour annuler une alarme lorsque l'option Annuler l'alarme est activée.

chrome.alarms.clear(alarmName);

Le premier paramètre doit être la chaîne d'identification que vous avez utilisée comme nom d'alarme dans chrome.alarms.create().

Le deuxième paramètre (facultatif) est une fonction de rappel qui doit adopter le format suivant:

function(boolean wasCleared) {...};

Obtenir des alarmes

Dans checkAlarm(), utilisez l'API chrome.alarms.getAll() pour obtenir un tableau de toutes les alarmes créées afin de mettre à jour l'état de l'UI du bouton d'activation.

getAll() accepte une fonction de rappel qui transmet un tableau d'objets Alarm. Pour voir le contenu d'un Alarm, vous pouvez inspecter les alarmes en cours d'exécution dans la console des outils de développement comme suit:

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

Vous obtiendrez un objet tel que {name: "remindme", periodInMinutes: 0.1, scheduledTime: 1397587981166.858}, comme illustré ci-dessous:

Préparez-vous pour la section suivante

Maintenant que les alarmes sont en place pour interroger l'application à intervalles réguliers, utilisez-les comme base pour ajouter des notifications visuelles.

Ajouter des notifications

Remplaçons la notification d'alarme par quelque chose que l'utilisateur peut facilement remarquer. Utilisez chrome.notifications pour afficher une notification sur le bureau semblable à celle-ci:

Lorsque l'utilisateur clique sur la notification, la fenêtre de l'application Liste de tâches doit s'afficher.

Mettre à jour les autorisations des applications

Dans le fichier manifest.json, demandez l'autorisation "notifications":

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

Mettre à jour les scripts d'arrière-plan

Dans background.js, refactorisez le rappel chrome.app.window.create() dans une méthode autonome afin de pouvoir le réutiliser:

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);
...

Mettre à jour l'écouteur d'alarmes

En haut du fichier background.js, ajoutez une variable pour un nom de base de données utilisé dans l'écouteur d'alarmes:

var dbName = 'todos-vanillajs';

La valeur de dbName correspond au nom de base de données défini à la ligne 17 de js/app.js:

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

Créer une notification

Au lieu de simplement consigner une nouvelle alarme dans la console, mettez à jour l'écouteur onAlarm pour obtenir les données stockées via chrome.storage.local.get() et appelez une méthode showNotification():

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

Ajoutez cette méthode showNotification() à 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() vérifiera les tâches ouvertes (non terminées). S'il y a au moins une tâche ouverte, créez un pop-up de notification via chrome.notifications.create().

Le premier paramètre est un nom de notification permettant d'identifier de manière unique la notification. Vous devez disposer d'un identifiant pour effacer ou gérer les interactions avec cette notification particulière. Si l'ID correspond à une notification existante, create() efface d'abord cette notification avant d'en envoyer une nouvelle.

Le deuxième paramètre est un objet NotificationOptions. Il existe de nombreuses options pour afficher le pop-up de notification. Ici, nous utilisons une notification "de base" avec une icône, un titre et un message. Les autres types de notifications incluent les images, les listes et les indicateurs de progression. N'hésitez pas à revenir à cette section lorsque vous aurez terminé l'étape 3 et expérimenter d'autres fonctionnalités de notification.

Le troisième paramètre (facultatif) est une méthode de rappel qui doit adopter le format suivant:

function(string notificationId) {...};

Gérer les interactions avec les notifications

Ouvrez l'application Liste de tâches lorsque l'utilisateur clique sur la notification. À la fin de background.js, créez un gestionnaire d'événements chrome.notifications.onClicked:

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

Le rappel du gestionnaire d'événements appelle simplement la méthode launch(). chrome.app.window.create() crée une fenêtre d'application Chrome s'il n'en existe pas déjà une, ou met en avant la fenêtre actuellement ouverte dont l'ID est main.

Lancer votre application Todo terminée

Vous avez terminé l'étape 3 ! Actualisez votre application Todo avec les rappels.

Vérifiez que ces comportements fonctionnent comme prévu:

• Si aucune tâche n'est en cours, aucune notification ne s'affiche dans une fenêtre pop-up.
• Si vous cliquez sur la notification lorsque votre application est fermée, l'application Todo s'ouvre ou s'affiche au premier plan.

Dépannage

Votre fichier background.js final doit se présenter comme suit . Si les notifications ne s'affichent pas, vérifiez que vous utilisez Chrome 28 ou une version ultérieure. Si les notifications ne s'affichent toujours pas, recherchez les messages d'erreur dans la console DevTools, à la fois dans la fenêtre principale (clic droit > Inspecter l'élément) et sur la page d'arrière-plan (clic droit > Inspecter la page en arrière-plan).

Pour en savoir plus

Pour plus d'informations sur certaines des API présentées à cette étape, reportez-vous à:

• Déclarer des autorisations ↑
• chrome.alarms ↑
• chrome.alarms.onAlarm ↑
• chrome.alarms.create() ↑
• chrome.alarms.clear() ↑
• chrome.alarms.getAll() ↑
• chrome.notifications ↑
• chrome.notifications.create() ↑
• NotificationOptions ↑
• chrome.notifications.onClicked ↑

Prêt à passer à l'étape suivante ? Passez à l'Étape 4 : Ouvrir des liens externes avec une WebView »