Qué son las notificaciones push en la web, las tres APIs del navegador que las hacen posibles, la regla de la pantalla de inicio del iPhone y una demo de permisos que puedes probar en tu navegador.
Una notificación push es un mensaje corto que un sitio web o una app envía a tu dispositivo y que aparece aunque el sitio esté cerrado. En la web necesita tres funciones del navegador: un service worker que se ejecuta en segundo plano, la Push API para recibir el mensaje y la Notifications API para mostrarlo, una vez que el visitante da su permiso.
Las piezas del web push
El push es la forma en que una tienda avisa a un cliente de que su pedido ha salido, o un sitio de reservas recuerda a alguien la cita de mañana, sin email. Bien hecho se agradece; pedido demasiado pronto, se bloquea para siempre. La demo de abajo muestra los estados del permiso solo con una notificación local.
Sí, desde iOS y iPadOS 16.4, para web apps añadidas a la pantalla de inicio. WebKit indica que una app así puede pedir permiso, y la solicitud debe venir de una acción directa del usuario, como pulsar un botón.
No. MDN describe la Push API como la que permite a una web app recibir mensajes tanto si está en primer plano como si no, o incluso sin estar cargada. El service worker se encarga del mensaje.
granted (el visitante lo permitió), denied (lo bloqueó) y default (sin decidir). En el estado default el navegador actúa como si estuviera denegado.
Sí. MDN indica que la solicitud de permiso de notificaciones solo está disponible en contextos seguros, y que los service workers también solo están disponibles en contextos seguros (http://localhost cuenta mientras desarrollas).
Una opción de pushManager.subscribe() que promete que cada push producirá algo que el usuario puede ver. MDN señala que Chrome y Edge rechazan la suscripción si no se establece en true.
Solo se ejecuta cuando el visitante pulsa tu botón. La clave pública viene del par de claves VAPID de tu servidor.
El service worker se activa con un evento push y debe mostrar una notificación por cada uno.
Esto comprueba qué admite tu navegador y te permite mostrarte una notificación local. No se crea ninguna suscripción ni interviene ningún servidor.
Lo que admite este navegador
Notifications API
Service workers
Push API (PushManager)
Página segura (HTTPS)
Sí
No
Permiso de notificaciones ahora mismo:
Aún no se ha pedido (default)
Permitido (granted)
Bloqueado (denied)
No compatible con este navegador
Pedir permiso
Mostrar una notificación de prueba
Tu pedido está listo
Esta es una prueba local de la guía de we.inc. No la ha enviado ningún servidor.
Enviada a tu sistema. Si no apareció nada, revisa los ajustes de notificaciones de tu dispositivo.
Este navegador no quiso mostrar una notificación de página. En muchos teléfonos, las notificaciones solo llegan a través de un service worker.
Has bloqueado las notificaciones de este sitio. Solo tú puedes deshacerlo, desde los ajustes del sitio junto a la barra de direcciones.
¿Quieres un aviso cuando se envíe tu pedido?
Solo enviamos avisos de envío. Desactívalos cuando quieras.
Sí, avísame
Ahora no
No se mostró ningún aviso del navegador, así que puedes volver a preguntar más tarde sin quedar bloqueado.
Empieza gratis · Sin tarjeta de crédito