Web Push llega a Firefox 44

31 marzo, 2016 4:30 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por Sergio Carlavilla Delgado.

¿Alguna vez has deseado que un sitio web pudiera notificarte cuando algo importante suceda, incluso si no lo tienes abierto? Tal vez tienes una llamada WebRTC entrante, un mensaje instantáneo, o una actualización financiera. Quizás tu propia ciudad acaba de declarar un horario de emergencia de retirada de la nieve.

A veces solo quieres saber cuándo algo sucede.

Eso es lo que hace Web Push. Ya está disponible en Firefox 44.

¿Cómo se ve Web Push?

Siempre y cuando tu navegador se esté ejecutando, puede recibir notificaciones de los sitios web, aún cuando el sitio web no está abierto. Esto significa que puedes cerrar la pestaña de tu correo electrónico y todavía enterarte cuando llega un nuevo mensaje. Es una enorme victoria para el uso de memoria, el rendimiento y la duración de la batería.

Las notificaciones de los sitios web no son distinguibles de las notificaciones nativas, y el Mozilla Service Worker Cookbook tiene varias demostraciones en vivo donde puedes verlo por ti mismo.

Notificación

Al igual que con la geolocalización o el acceso a la cámara web, Web Push requiere explícitamente permiso revocable antes que un sitio web pueda mostrar notificaciones al usuario.

Permiso de notificaciones

¿Qué pasa con la privacidad?

Web Push funciona manteniendo una conexión persistente con un servicio Push que actúa como una central de retransmisión para los mensajes. Cada distribuidor de navegadores web ejecuta su propio servicio Push, y está diseñado para salvaguardar tu privacidad:

  1. Para prevenir las correlaciones entre sitios, cada sitio web recibe un identificador anónimo de Web Push diferente para tu navegador.
  2. Para frustrar el espionaje, la información está encriptada con un par de llaves público / privada disponible solo por tu navegador.
  3. Firefox solo conecta al servicio Push si tienes una suscripción activa a Web Push. Esta puede ser un sitio web, o una característica del navegador como Firefox Hello o Firefox Sync.

Siempre tienes el control: las notificaciones Push son opcionales, y tú puedes anular los permisos de cualquier sitio web en cualquier momento, ya sea desde el panel de información de la página o desde la sección de “Notificaciones” en Preferencias -> Contenido.

¿Cómo funciona Web Push?

Hasta hoy, las personas tenían que depender de apps, correos electrónicos o mensajes de texto para las notificaciones oportunas. Ahora, la web puede hacerlo.

Web Push es una extensión del estándar Service Worker, lo cual significa que puedes encontrar unas demos excelentes y comentadas de Web Push en el Service Worker Cookbook de Mozilla. MDN también tiene buena documentación sobre Web Push, y si necesitas ir derecho a la fuente, el borrador más actualizado de las especificaciones se encuentra en GitHub.

Anteriormente, Chris Mills escribió una excelente introducción de Web Push, que explica el ciclo de vida del Service Worker y cómo se relaciona con Push. Para resumir:

  1. Un sitio web registra un Service Worker con el navegador. Los Service Workers son pequeños programas JavaScript con superpoderes como interceptar las solicitudes de red o mantenerse en ejecución aún cuando su sitio web padre está cerrado.
  2. El objeto de registro del Service Worker expone una propiedad pushManager.
  3. El sitio web usa el pushManager ya sea para obtener una suscripción existente o crear una nueva.
  4. El objeto de suscripción expone metadatos acerca de la suscripción, incluyendo una URL de endpoint única en el Push Service tu distribuidor de navegador.

Cuando el sitio web hace POST a ese endpoint, el Servicio Push encamina el mensaje a tu navegador, donde el Service Worker apropiado recive un evento push. El Service Worker puede mostrar una notificación o tomar otras acciones.

El POST HTTP al endpoint debe incluir un encabezado “TTL”, asignado con el número de segundos que el mensaje se debe retener en caso que el usuario no esté en línea. Una vez que el TTL ha pasado, los mensajes sin enviar expiran y no serán enviados. Hay más información técnica sobre este encabezado en el blog de Mozilla Services.

En el código, el Service Worker que recibe el mensaje podría tener este aspecto:

self.addEventListener('push', function(event) {
  event.waitUntil(
    self.registration.showNotification('Notificación de ejemplo', {
      body: '¡Hola, mundo!',
    })
  );
})

Mientras tanto, registrar el Service Worker y obtener permisos para mostrar notificaciones podría parecerse un poco al código de abajo.

Nota: Este código de ejemplo utiliza la sintaxis async/await del borrador ES7. Para usarlo en producción, consulta el equivalente en JavaScript plano.

async function registerForPush() {
  // Registra el Service Worker
  let registration = await navigator.serviceWorker.register('service-worker.js');
  
  // Comprueba si ya tenemos una subscripción
  let subscription = await registration.pushManager.getSubscription();
  
  // Si no, prueba a subscribirla
  if (!subscription) {
    subscription = await registration.pushManager.subscribe();
  }
  
  // Guarda los datos de nuestra subscripción en el backed de nuestro sitio web
  await fetch('/save-push-endpoint', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(subscription)
  });
  
  // ¡Hecho! Ahora nuestro backend puede enviar mensajes push haciendo POST a 
  // subscription.endpoint
}

De nuevo, hay un puñado de demos en vivo con código comentado en el Service Worker CookBook. Si estás confundido, empieza por leerlos.

Otras cuestiones

¿En algún momento puede cambiar la URL del endpoint?

El punto final puede cambiar en cualquier momento. En la práctica, esto debería ser raro, pero siempre deberías estar preparado para controlar un evento pushsubscriptionchange, y deberías comprobar si hay un nuevo endpoint cuando uses getSubscription() o subscribe().

¿Cúal es el estado del soporte en los navegadores?

En el momento de escribirlo, Push funciona en Firefox para escritorio y tiene soporte parcial en Chrome. Push para Chrome además necesita realizar alguna configuración adicional. El equipo de Microsoft Edge cataloga a Push como bajo consideración. Más información en Can I Use (¿puedo usarlo?).

¿Cómo dejar que un usuario se dé de baja de Push?

Utiliza el método subscription.unsubscribe(). No te olvides también de actualizar tu backend para que deje de enviar notificaciones al antiguo endpoint.

¿Puedo comprobar si subscribe() se alertará al usuario, antes de que suceda?

¡Sí! Invocando pushManager.permissionState() devuelve un objeto Promise que resuelve el estado de los permisos: "granted" (dado), "denied" (rechazado), o "prompt" (alertar).

Asegúrate de hacernos saber qué piensas acerca de la API Push en los comentarios. Damos la bienvenida a todos los comentarios incluyendo sugerencias, cuestiones y reporte de errores.

The following two tabs change content below.

jorgev

AMO Product Manager at Mozilla
Jorge trabaja para el equipo de complementos de Mozilla, y se dedica a Mozilla Hispano y Mozilla Costa Rica en su tiempo libre. Actualmente está encargado del blog de Mozilla Hispano Labs.

Compartir artículo:

Empezar la discusión en foro.mozilla-hispano.org

cc-by-sa