clase79.md

Máster en Programación FullStack con JavaScript y Node.js

JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing

Clase 79

HTML5 Push notifications

• Las notificaciones deben funcionar ne un segundo plano, por eso usaremso service workers
• Usamos Push API] para mandar información desde el servirdor al service worker
• Usamos Notifications API para renderrizar la notificación desde el web worker

Esquema

Documentación

• MDN | Notifications API
• MDN | Push API
• IETF | Web Push Protocol

recursos

• Push Notifications on the Open Web
• Web Push Notifications: Timely, Relevant, and Precise
• How can I do push notifications in an HTML5 Web application?
• MDN | PushManager
• MDN | Push API
• Web Push Notifications: Timely, Relevant, and Precise
• ScaleDrone/html5-javascript-push-notifications
• Sending Desktop HTML5 Notifications for Web Browsers

HTML5 Push Notifications: Configurando el Cliente

Notas

• Debemos pedir permisos al navegador (usuario final)
• Generar los detalles de PushSubscription y mandarlos al backend
• PushSubscription tiene un formato standard

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh" :
"BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth"   : "tBHItJI5svbpez7KI4CCXg=="
  }
}

HTML5 Push Notifications: Enviar una notificación Push al cliente

Notas

• El servidor envia el mensaje al dispositivo
• En el mensaje se definen varios parámetros
  • Tiempo de duración del mensaje. Define la expiración para ser eliminado de la cola
  • Urgencia del mensaje. Define la importancia, que se vincula con estaos de ahorro de bateria, etc...
  • Asunto del mensaje. Define un asunto que luego podremos usar para filtrar

HTML5 Push Notifications: Gestionar una notificación Push en cliente

Notas

• Cuando el dispositvo se conecta, el mensaje es enviado
• Cuando el mensaje caduca, si no pudo ser enviado se eliminará de la cola

HTML5 Push Notifications: En la práctica

Documentación

• Sucribiendo a un usuario
• Gestión de permisos
• Enviar mensajes
• El protocolo web push
• Gestión de eventos push
• Mostrar notificaciones
• El comportamiento de las notificaciones
• Patrones de comportamiento en las notificaciones
• F.A.Q

Firebase Cloud Messaging

NOTA: El SDK de FCM solo funciona en HTTPS

Documentación

• Web Oficial
• Acerca de los mensajes de FCM
• Configura una app cliente de Firebase Cloud Messaging en JavaScript
• Envía tu primer mensaje a una app en segundo plano
• Envía mensajes a varios dispositivos
• Recibe mensajes en un cliente de JavaScript
• Mensajes por temas en Web/JavaScript
• Casos de éxito: Firebase Cloud Messaging para Web (JavaScript)

FCM vs GCM

Arquitectura

Ejemplo

• How to add push notifications to a web app with Firebase 🔔+🔥
• Ejemplo en Github

Recursos

• Firebase Cloud Messaging
• Push Notifications with Firebase Cloud Messaging
• GoogleChrome/samples/push-messaging-and-notifications/

Ejercicios

1 - Haz el codelab Adding Push Notifications to a Web App