Módulo 4: Tecnologías web avanzadas

4.3.1 Introducción al proceso push web y a las notificaciones

Si en una habitación llena de desarrolladores preguntas qué características de dispositivos móviles faltan en la Web, las notificaciones push siempre encabezarán la lista.

Gracias a las notificaciones push web, los usuarios pueden activar actualizaciones oportunas de los sitios web que más les gustan y tú puedes volver a captar su atención con contenido personalizado relevante.

La API de push y la API de notificaciones ofrecen todo un nuevo repertorio de posibilidades para volver a despertar el interés de los usuarios.

Dos tecnologías

El proceso push y la notificación utilizan API distintas, pero complementarias: el proceso push se invoca cuando un servidor proporciona información a un service worker. Por otra parte, una notificación es la acción de un service worker o secuencia de comandos de página web de mostrar información a un usuario.

¿Están implicados los service workers?

Sí. El proceso push se basa en service workers porque estos funcionan en segundo plano. Es decir, solo se ejecuta un código de tiempo para una notificación push (en otras palabras, solo se usa la batería) cuando el usuario interactúa con una notificación haciendo clic en ella o cerrándola.

Si no estás familiarizado con los service workers, lee esta introducción. Utilizaremos el código del service worker en secciones posteriores, cuando te mostremos cómo implementar pushes y notificaciones.

Breve análisis de las notificaciones

En la siguiente sección podrás ver varias imágenes. No obstante, en este apartado hablaremos del código. Utiliza un registro de service worker para convocar a showNotification en un objeto de registro.

serviceWorkerRegistration.showNotification(title, options);

El argumento de título aparece como un encabezado en la notificación, mientras que el de opciones es un objeto literal que establece el resto de las propiedades de una notificación. Un objeto de opciones típico tiene un aspecto parecido a este:

{
  "body": "Did you make a $1,000,000 purchase at Dr. Evil...",
  "icon": "images/ccard.png",
  "vibrate": [200, 100, 200, 100, 200, 100, 400],
  "tag": "request",
  "actions": [
    { "action": "yes", "title": "Yes", "icon": "images/yes.png" },
    { "action": "no", "title": "No", "icon": "images/no.png" }
  ]
}

Este código produce una notificación como la de la imagen. Por lo general, ofrece las mismas prestaciones que una aplicación nativa. Sin embargo, antes de entrar en detalles sobre su implementación, te mostraremos cómo usarlas de manera efectiva. Vamos a describir la mecánica de la implementación de las notificaciones push, incluida la gestión de permisos y suscripciones, el envío de mensajes y las respuestas a los mismos.

¿Cuáles son las características de una buena notificación?

No molestes a los usuarios o no podrás volver a dirigirte a ellos. ¿Eso es todo? No, porque es más fácil decirlo que hacerlo.

Las notificaciones push son una de las funciones más valiosas de las aplicaciones nativas y ya están disponibles en la Web. Para aprovecharlas al máximo, es necesario que sean oportunas, precisas y relevantes.

  1. Oportuna: una notificación oportuna es aquella que aparece cuando los usuarios quieren y cuando tiene importancia para ellos.
  2. Precisa: una notificación precisa es aquella que tiene información específica que se puede utilizar de inmediato.
  3. Relevante: un mensaje relevante es el que trata de personas o temas que importan al usuario.

Instrucciones para probar las notificaciones

Hay varias maneras de jugar con las características antes de entender completamente cómo funcionan o de tener que implementarlas. En primer lugar, echa un vistazo a nuestro propio ejemplo. También puedes usar el generador de notificaciones de Peter Beverloo. 

¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?

¿Necesitas más ayuda?

Inicia sesión si quieres ver otras opciones de asistencia para solucionar tu problema.