Notificaciones push
Solicite permiso, suscríbase a push con la Push API, reciba mensajes en el Service Worker y muestre notificaciones con showNotification.
Notificaciones push es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Por qué usar notificaciones push?
Las notificaciones push vuelven a atraer a los usuarios cuando la aplicación no está abierta: alertas de mensajes, novedades y recordatorios de carritos abandonados. Funcionan gracias al Service Worker, por lo que siguen funcionando aunque la página esté cerrada.
Push API + Notifications API
Dos API del navegador trabajan conjuntamente. La Push API recibe mensajes de un servidor mediante una suscripción push. La Notifications API muestra el mensaje al usuario.
Solicitar permiso
Solicite permiso al usuario antes de suscribirse. Hágalo únicamente como respuesta a una acción clara del usuario (un clic en un botón), no al cargar la página.
async function enableNotifications() {
const permission = await Notification.requestPermission();
if (permission !== 'granted') {
alert('Notifications denied');
return;
}
// proceed to subscribe...
}Suscripción push
Suscríbase mediante el registro activo del service worker. La clave pública VAPID del servidor autentica la suscripción.
async function subscribeToPush() {
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.subscribe({
userVisibleOnly: true, // required: every push must show a notification
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});
// Send sub to your server:
await fetch('/api/save-subscription', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(sub)
});
}Claves VAPID
Las claves VAPID (Voluntary Application Server Identification) identifican su servidor ante los servicios push (FCM, Mozilla, etc.). Genere las claves una vez y almacene la privada en su servidor.
# Generate VAPID keys with web-push CLI:
npx web-push generate-vapid-keys
# Output:
# Public Key: BJ...
# Private Key: ka...Push desde el servidor
Use la biblioteca npm web-push para enviar un push a una suscripción almacenada.
import webpush from 'web-push';
webpush.setVapidDetails(
'mailto:you@example.com',
process.env.VAPID_PUBLIC,
process.env.VAPID_PRIVATE
);
await webpush.sendNotification(savedSubscription, JSON.stringify({
title: 'New message',
body: 'Alice sent you a message',
url: '/inbox/123'
}));Gestionar push en el Service Worker
El SW recibe el evento push y muestra una notificación.
// sw.js
self.addEventListener('push', (event) => {
const data = event.data ? event.data.json() : {};
event.waitUntil(
self.registration.showNotification(data.title || 'Notification', {
body: data.body,
icon: '/icons/192.png',
badge: '/icons/badge.png',
data: { url: data.url }
})
);
});Controlador de clic de notificación
Abra la aplicación o póngala en primer plano cuando el usuario haga clic en una notificación.
self.addEventListener('notificationclick', (event) => {
event.notification.close();
const url = event.notification.data.url || '/';
event.waitUntil(
clients.matchAll({ type: 'window' }).then(clientList => {
for (const client of clientList) {
if (client.url.endsWith(url) && 'focus' in client) return client.focus();
}
return clients.openWindow(url);
})
);
});Opciones de notificación
Personalice: icon, badge (icono pequeño del área de notificaciones), image (imagen grande), actions (botones), tag (sustituye las notificaciones anteriores con el mismo tag), requireInteraction (permanece hasta que se descarte) y silent.
self.registration.showNotification('Message', {
body: 'Alice sent you a photo',
icon: '/icons/192.png',
image: '/images/alice-photo.jpg',
actions: [
{ action: 'view', title: 'View' },
{ action: 'reply', title: 'Reply' }
],
tag: 'message-from-alice', // replaces earlier 'message-from-alice'
requireInteraction: false
});Cancelar la suscripción
Permita que los usuarios dejen de recibir notificaciones: llame a pushSubscription.unsubscribe() y elimine la suscripción de su servidor.
async function disablePush() {
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.getSubscription();
if (sub) {
await sub.unsubscribe();
await fetch('/api/delete-subscription', {
method: 'POST',
body: JSON.stringify({ endpoint: sub.endpoint })
});
}
}Compatibilidad con iOS
iOS 16.4+ admite Web Push, pero solo en PWA instaladas en la pantalla de inicio. Los dispositivos anteriores a iOS 16.4 y Safari en la web del iPhone no admiten web push en absoluto.
Buenas prácticas
1) Solicite permiso únicamente después de una acción clara del usuario. 2) Envíe notificaciones útiles y poco frecuentes. 3) Muestre siempre una notificación en un evento push (los navegadores pueden revocar el permiso si no lo hace). 4) Proporcione una forma sencilla de cancelar la suscripción. 5) Pruebe con los tres servicios push (FCM, Mozilla y WindowsPush).
Errores habituales
El push falla silenciosamente si: userVisibleOnly es false (Chrome exige true), las claves VAPID no coinciden, la suscripción ha caducado (vuelva a suscribirse) o no se muestra ninguna notificación en el evento push (el navegador revoca el permiso).
Comprobación rápida
¿Por qué cada mensaje push debe producir una notificación visible (con userVisibleOnly: true)?
Resumen: notificaciones push
Solicite permiso únicamente mediante una acción del usuario. Suscríbase mediante reg.pushManager.subscribe con la clave pública VAPID. El servidor utiliza la biblioteca web-push para enviar los mensajes. El evento push del SW llama a showNotification. notificationclick abre la aplicación o la pone en primer plano. Personalice icon, badge, image, actions y tag. Muestre siempre una notificación (userVisibleOnly: true es obligatorio). iOS 16.4+ lo admite, pero solo en PWA instaladas.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 41
- Lecciones
- 163
Preguntas frecuentes
¿La lección «Notificaciones push» es gratis?
Sí — el texto completo de «Notificaciones push» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Notificaciones push»?
Solicite permiso, suscríbase a push con la Push API, reciba mensajes en el Service Worker y muestre notificaciones con showNotification. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Notificaciones push»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El manifiesto de la aplicación web
- Registro y ciclo de vida de un Service Worker
- Estrategias de caché sin conexión: CacheFirst y NetworkFirst
- Notificaciones push