Étape 3: Ajoutez des alarmes et des notifications

Au cours de cette étape, vous allez apprendre à:

• 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 effectuer cette étape: 20 minutes Pour afficher un aperçu de cette étape, accédez au bas de la page ↓.

Améliorez votre application Todo grâce aux rappels

Améliorez l'application Todo en ajoutant des fonctionnalités pour rappeler à l'utilisateur s'il a des tâches en cours, même quand l'application est fermée.

Tout d'abord, vous devez ajouter un moyen pour que l'application vérifie régulièrement les tâches non terminées. Ensuite, l’application doit afficher un message pour l'utilisateur, 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'alarme 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 en arrière-plan

Dans background.js, ajoutez un écouteur onAlarm. Pour l'instant, la fonction de rappel consigne simplement un message à la console chaque fois qu'il y a une tâche:

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. Souvenez-vous de l'étape 2 : L'un des problèmes de non-conformité les plus courants des CSP est dû au code JavaScript intégré. Dans le fichier index.html, ajoutez ceci pour importer un nouveau fichier alarms.js, que vous créerez à l'étape suivante:

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

Créer un script d'alarmes

Dans le dossier js, créez un fichier nommé alarms.js.

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

(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 passez quelques instants à activer (et désactiver) l'alarme.

Chaque fois que l'alarme est activée, des messages de journal doivent s'afficher dans la console. à chaque fois que l'alarme sonne :

Vous devriez noter les points suivants:

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

Examinons certains éléments de alarms.js qui utilisent des méthodes chrome.alarms une par une.

Créer des alarmes

Dans createAlarm(), utilisez l'API chrome.alarms.create() pour créer une alarme lorsque 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 qui identifie un nom unique pour votre alarme, par exemple, remindme (Remarque: vous devez donner un nom à l'alarme pour pouvoir l'annuler.)

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

Effacer les alarmes

Dans cancelAlarm(), utilisez l'API chrome.alarms.clear() pour annuler une alarme lorsque Cancel 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) {...};

Recevoir 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 du bouton d'activation dans l'interface utilisateur.

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

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

Vous obtenez ainsi 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 cette 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 comme celle présentée ci-dessous:

Lorsque l'utilisateur clique sur la notification, la fenêtre de l'application Todo 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 en arrière-plan

Dans background.js, refactorisez le rappel chrome.app.window.create() en une méthode autonome. pour 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 correspondant à un nom de base de données utilisé dans l'alarme. écouteur:

var dbName = 'todos-vanillajs';

La valeur de dbName correspond au nom de base de données défini à la ligne 17 du fichier 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 qu'il soit stocké des donné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() recherchera les tâches ouvertes (non terminées). S'il y a au moins un élément ouvert une tâche, créez un pop-up de notification via chrome.notifications.create().

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

Le deuxième paramètre est un objet NotificationOptions. Il existe de nombreuses options d'affichage le pop-up de notification. Ici, nous utilisons un modèle "de base" avec une icône, un titre et un message. Les autres types de notifications comprennent les images, les listes et les indicateurs de progression. N'hésitez pas à revenir à cette à l'étape 3 et testez 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 Todo 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() soit crée une fenêtre de l'application Chrome s'il n'en existe pas déjà une ou met en évidence la fenêtre actuelle fenêtre ouverte dont l'ID est main

Lancer l'application Todo terminée

Vous avez terminé l'étape 3. Rechargez votre application Todo dès maintenant avec des rappels.

Vérifiez que les comportements suivants fonctionnent comme prévu:

• Si vous n'avez aucune tâche non terminée, aucune notification pop-up ne s'affiche.
• Si vous cliquez sur la notification lorsque votre application est fermée, l'application Liste de tâches s'ouvrira ou s'ouvrira le focus.

Dépannage

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

Pour en savoir plus

Pour en savoir plus sur certaines des API présentées lors de cette étape, consultez les pages suivantes:

• 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 ? Accédez à l'étape 4 : Ouvrir des liens externes avec un WebView »