Paso 3: Agrega alarmas y notificaciones

En este paso, aprenderás lo siguiente:

  • Cómo activar tu app en intervalos específicos para ejecutar tareas en segundo plano
  • Cómo usar las notificaciones en pantalla para llamar la atención sobre algo importante

Tiempo estimado para completar este paso: 20 minutos Para obtener una vista previa de lo que completarás en este paso, ve a la parte inferior de esta página ↓.

Mejora tu app de tareas pendientes con recordatorios

Mejora la app de Tareas pendientes agregando funcionalidad que le recuerde al usuario si tiene tareas pendientes abiertas, incluso cuando se cierra la app.

Primero, debes agregar una forma para que la app verifique regularmente si hay tareas pendientes sin completar. A continuación, la app necesita mostrar un mensaje al usuario, incluso si la ventana de la app de Todo está cerrada. Para lograrlo, debes comprender cómo funcionan las alarmas y las notificaciones en las Apps de Chrome.

Agregar alarmas

Usa chrome.alarms para establecer un intervalo de activación. Mientras Chrome esté funcionando, el receptor de la alarma se llama aproximadamente en el intervalo establecido.

Actualiza los permisos de la app

En manifest.json, solicita el permiso "alarms":

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

Actualiza secuencias de comandos en segundo plano

En background.js, agrega un objeto de escucha onAlarm. Por ahora, la función de devolución de llamada solo registrará Un mensaje a la consola cada vez que hay una tarea pendiente:

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

Actualizar vista HTML

En index.html, agrega un botón Activar alarma:

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

Ahora debes escribir el controlador de eventos de JavaScript para este nuevo botón. Recuerda que, en el Paso 2, Uno de los incumplimientos más comunes de la CSP se debe a JavaScript intercalado. En index.html, agrega lo siguiente: línea para importar un nuevo archivo alarms.js que crearás en el siguiente paso:

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

Crear guion de alarmas

Crea un archivo nuevo en la carpeta js llamado alarms.js.

Usa el siguiente código para agregar checkAlarm(), createAlarm(), cancelAlarm() y toggleAlarm() junto con un controlador de eventos de clic para activar o desactivar la alarma cuando el botón Activar alarma se hizo clic.

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

Vuelve a cargar la app y pasa unos minutos activando (y desactivando) la alarma.

Inspecciona los mensajes de la página en segundo plano

Cuando tengas la alarma activada, deberías ver los mensajes de registro que se imprimen en la consola cada vez que la alarma "suena":

Mensajes de alarma que se imprimen en la consola

Deberías notar lo siguiente:

  • Incluso cuando cierres la ventana de la app de Todo, las alarmas seguirán sonando.
  • En plataformas que no sean ChromeOS, si cierras por completo todas las instancias del navegador Chrome, se activarán las alarmas no se activará.

Analicemos algunas de las partes de alarms.js que usan los métodos chrome.alarms uno por uno.

Cómo crear alarmas

En createAlarm(), usa la API de chrome.alarms.create() para crear una alarma cuando la opción Activar alarma activada.

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

El primer parámetro es una cadena opcional que identifica un nombre único para la alarma, por ejemplo, remindme (Nota: Debes establecer un nombre para la alarma para poder cancelarla por nombre).

El segundo parámetro es un objeto alarmInfo. Las propiedades válidas de alarmInfo incluyen when, o bien delayInMinutes y periodInMinutes. Para reducir la carga en la máquina del usuario, Chrome limita las alarmas a una vez por minuto. Aquí estamos usando valores pequeños (0.1 de un minuto) para la demostración con fines de seguridad.

Borrar alarmas

En cancelAlarm(), usa la API de chrome.alarms.clear() para cancelar una alarma cuando Cancele. alarma activada.

chrome.alarms.clear(alarmName);

El primer parámetro debe ser la cadena de identificación que usaste como nombre de la alarma en chrome.alarms.create()

El segundo parámetro (opcional) es una función de devolución de llamada que debe adoptar el siguiente formato:

function(boolean wasCleared) {...};

Recibe alarmas

En checkAlarm(), usa la API de chrome.alarms.getAll() para obtener un array de todas las alarmas creadas. para actualizar el estado de la IU del botón de activación.

getAll() acepta una función de devolución de llamada que pasa un array de objetos Alarm. Para ver qué hay en un Alarm, puedes inspeccionar las alarmas en ejecución en la consola de Herramientas para desarrolladores de la siguiente manera:

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

Se mostrará un objeto como {name: "remindme", periodInMinutes: 0.1, scheduledTime: 1397587981166.858}, como se muestra a continuación:

Usa getAll() para inspeccionar las alarmas en ejecución.

Prepárate para la próxima sección

Ahora que se implementaron alarmas para sondear la app a intervalos regulares, úsalas como base para agregar notificaciones visuales.

Agregar notificaciones

Cambiemos la notificación de la alarma por una que el usuario pueda notar fácilmente. Usa chrome.notifications para mostrar una notificación de escritorio como la que se muestra a continuación:

Notificación de nuestra app de tareas pendientes

Cuando el usuario hace clic en la notificación, debería aparecer la ventana de la app de Todo.

Actualiza los permisos de la app

En manifest.json, solicita el permiso "notifications":

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

Actualiza secuencias de comandos en segundo plano

En background.js, refactoriza la devolución de llamada chrome.app.window.create() en un método independiente. para que puedas reutilizarlo:

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

Actualiza el objeto de escucha de alarmas

En la parte superior de background.js, agrega una variable para un nombre de base de datos que se utiliza en la alarma objeto de escucha:

var dbName = 'todos-vanillajs';

El valor de dbName es el mismo nombre de base de datos que se estableció en la línea 17 de js/app.js:

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

Cómo crear una notificación

En lugar de solo registrar una alarma nueva en la consola, actualiza el objeto de escucha onAlarm para almacenarlo datos a través de chrome.storage.local.get() y llama a un método showNotification():

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

Agrega este método 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() buscará elementos pendientes (sin completar) de tareas pendientes. Si hay al menos uno abierto elemento de tareas pendientes, crea una notificación emergente a través de chrome.notifications.create().

El primer parámetro es un nombre de notificación que identifica de manera inequívoca. Debes tener un ID establecido para para borrar o manejar interacciones con esa notificación en particular. Si el ID coincide con un ID existente, notificación, create() primero la borra antes de crear una nueva.

El segundo parámetro es un objeto NotificationOptions. Existen muchas opciones de procesamiento la ventana emergente de la notificación. Aquí usamos una consulta "básica" notificación con un ícono, un título y un mensaje. Otros tipos de notificaciones incluyen imágenes, indicadores de progreso y listas. Puedes volver a consultarlo cuando termines el paso 3 y experimenta con otras funciones de notificación.

El tercer parámetro (opcional) es un método de devolución de llamada que debe adoptar el siguiente formato:

function(string notificationId) {...};

Cómo controlar las interacciones de notificaciones

Abre la app de Tareas pendientes cuando el usuario haga clic en la notificación. Al final de background.js, crea un Controlador del evento chrome.notifications.onClicked:

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

La devolución de llamada del controlador de eventos simplemente llama al método launch(). chrome.app.window.create() ya sea Crea una nueva ventana de la app de Chrome si aún no existe o si se enfoca Abrir ventana que tiene el ID de ventana main

Inicia tu app de tareas pendientes terminada

Has completado el paso 3. Vuelve a cargar ahora tu app de Tareas pendientes con recordatorios.

Verifica que estos comportamientos funcionen según lo esperado:

  • Si no tienes elementos de tareas pendientes sin completar, no verás notificaciones emergentes.
  • Si haces clic en la notificación cuando se cierra la app, se abrirá o entrará en no te enfocas en eso.

Soluciona problemas

Tu archivo final background.js debería verse así. Si no aparecen las notificaciones, confirma que tu versión de Chrome sea 28 o posterior. Si siguen sin aparecer las notificaciones, comprueba si hay mensajes de error en la consola de Herramientas para desarrolladores, en la ventana principal (haz clic con el botón derecho > Inspeccionar elemento) y la página de fondo (haz clic con el botón derecho > Inspect Background Page).

Más información

Para obtener información más detallada sobre algunas de las APIs presentadas en este paso, consulta:

¿Todo listo para continuar con el siguiente paso? Ve al Paso 4: Abre vínculos externos con WebView »