Prueba de notificaciones web
MultimediaTodo se ejecuta en tu navegador: no se sube nada
⚠️ En las plataformas que no los admiten, estos ajustes **no producen ningún error**; simplemente no tienen efecto. De ahí la lista detallada: «lo configuré y no pasó nada» es mucho más difícil de diagnosticar que un error.
- Texto del cuerpo (body)Compatible en todas partes
Compatible en todas partes, pero el número de líneas varía: en escritorio suelen verse dos o tres y en móvil se recorta mucho antes. El texto largo se trunca.
- Icono (icon)Según la plataforma, ver la nota
⚠️ En Windows este icono **no** se muestra como la imagen de la notificación; en su lugar se usa el icono de la aplicación que la envía. macOS y la mayoría de los escritorios Linux sí lo usan. Así que «puse un icono y no lo veo» suele ser el comportamiento de la plataforma, no un error.
- Etiqueta (tag)Compatible en todas partes
Una notificación nueva con la misma etiqueta **reemplaza** a la anterior en lugar de apilarse a su lado. Una etiqueta vacía también cuenta como etiqueta, así que las notificaciones sin etiqueta se reemplazan entre sí; asigna una etiqueta distinta a cada una si quieres mantener varias en pantalla.
- Silencio (silent)Compatible en todas partes
Hace que esta notificación no suene ni vibre. Está bien soportado, pero solo anula esta notificación: el modo No molestar del sistema la sigue silenciando por completo.
- Persistente (requireInteraction)Según la plataforma, ver la nota
⚠️ Pide que la notificación no se cierre sola y espere a que el usuario actúe. Chrome y Edge de escritorio lo respetan; **la mayoría de los móviles y Safari lo ignoran**, así que la notificación se va igualmente a los pocos segundos. Y aunque funcione, un ajuste del usuario puede anularlo.
- Botones (actions)Según la plataforma, ver la nota
⚠️ Es la diferencia más grande de todas: Chrome y Edge de escritorio lo admiten (**mostrando como máximo dos**), mientras que **la mayoría de los navegadores móviles y Safari ignoran actions por completo**: no aparece ningún botón y no se produce ningún error. Procura que una notificación se entienda también sin sus botones en el móvil.
- Imagen grande (image)Según la plataforma, ver la nota
La imagen grande dentro de la notificación solo aparece en algunas plataformas (sobre todo Chrome en algunas versiones de Android) y en escritorio e iOS se ignora casi siempre; igual que con actions, no hay ningún aviso cuando se ignora.
Pide permiso para las notificaciones y luego envía una, probando las opciones de título, cuerpo, icono, etiqueta, silencio, permanencia y botones. ⚠️ El valor de esta herramienta no está en enviar, sino en explicar las diferencias entre plataformas. En plataformas que no las admiten, opciones como actions, requireInteraction e icon no dan ningún error; simplemente no hacen nada. Pones dos botones y la notificación no tiene ninguno, con la consola limpia. Así que aquí cada elemento dice dónde funciona y dónde se ignora: Chrome de escritorio muestra como mucho dos botones, mientras que la mayoría de los navegadores móviles y Safari ignoran actions por completo; requireInteraction es igual y la notificación se desvanece a los pocos segundos; en Windows el icono se muestra como el de la aplicación emisora y no como el de la notificación. Nada de esto está escrito en la documentación, y es la única explicación de «lo puse y no pasó nada». Dos decisiones más: el permiso se pide solo desde un clic, nunca al cargar (la costumbre más molesta de herramientas así, y los navegadores ignoran una solicitud que no va ligada a un gesto del usuario); y una denegación no se vuelve a pedir, porque entonces `requestPermission()` solo devuelve denegado sin mostrar nada, así que la página te dice que abras los ajustes del sitio junto a la barra de direcciones y lo cambies a mano. Las notificaciones solo funcionan en un contexto seguro (https o localhost).
Funciones
- Muestra el estado actual del permiso y solo lo pide desde un clic, nunca al cargar
- ⚠️ Tras una denegación deja de pedir y te señala los ajustes del sitio junto a la barra de direcciones para ponerlo de nuevo en Permitir
- Envía una notificación con título, cuerpo, URL del icono, etiqueta, silencio y permanencia
- Como mucho dos botones; un botón sin acción o sin texto se descarta con un aviso, y la mayoría de las plataformas fuera de Chrome de escritorio los ignora
- ⚠️ Una nota de plataforma elemento a elemento: actions, requireInteraction, icon, tag, silent e imágenes, diciendo dónde funciona cada uno y dónde se ignora
- Explica el mecanismo de tag: una notificación nueva con la misma etiqueta reemplaza a la anterior, y una etiqueta vacía sigue siendo una etiqueta
- Un botón «Cerrar todas», con la nota de que solo puede cerrar las notificaciones que envió esta página y que siguen vivas
- Un registro de lo que ha enviado esta página, con la etiqueta y el número de botones
- Todo se ejecuta en local; un contexto no seguro (http) se señala como no admitido
Cómo se usa
- Pulsa «Pedir permiso» y acéptalo en el aviso del navegador (solo puedes activarlo tú; la página no lo pedirá sola)
- Rellena título y cuerpo, y ajusta icono, etiqueta, silencio, permanencia y hasta dos botones como quieras
- Pulsa «Enviar notificación» para verla y compara con las notas de plataforma de abajo para ver qué opciones se ignoraron
- Si una notificación se queda, pulsa «Cerrar todas»; si denegaste el permiso antes, sigue la nota para volver a Permitir en los ajustes del sitio y recarga
Preguntas frecuentes
- ¿Por qué no aparecen mis botones?
- Porque actions solo funciona en algunas plataformas: Chrome y Edge de escritorio lo admiten (mostrando como mucho dos), mientras que la mayoría de los navegadores móviles y Safari ignoran actions por completo: no aparecen botones y nada da error. Para ver la diferencia, abre esta página con Chrome en un equipo de escritorio y compárala con el móvil.
- ¿Por qué tras denegar no pasa nada al volver a pedir?
- Una vez denegado el permiso, `Notification.requestPermission()` solo devuelve denegado y el navegador no muestra ningún aviso. No es que esta página sea perezosa: es que el navegador se ha quedado la decisión. La única vuelta es manual: abre los ajustes del sitio con el icono a la izquierda de la barra de direcciones, busca Notificaciones y ponlo en Permitir, y recarga esta página.
- ¿Por qué veo un icono de aplicación en vez del que puse?
- Es comportamiento de Windows: no usa el icono de la notificación y muestra el de la aplicación emisora. macOS y la mayoría de los escritorios Linux sí usan el icono que pongas. Así que «puse un icono y no lo veo» suele ser comportamiento de la plataforma y no un error.
- ¿Por qué desapareció la notificación anterior al enviar una parecida?
- Porque las dos usaban la misma etiqueta. Una notificación nueva con la misma etiqueta reemplaza a la anterior en vez de apilarse a su lado, y una etiqueta vacía sigue siendo una etiqueta, así que las notificaciones sin etiqueta se reemplazan entre sí. Da a cada una una etiqueta distinta para mantener varias en pantalla.
Herramientas relacionadas
Información de tu navegador
WebLo que tu navegador expone a los sitios: user agent, pantalla, zona horaria, núcleos de CPU y renderizador WebGL, leído en local y sin enviar nada.
Detección HTML5
ConsultasComprueba en tu navegador actual el soporte de elementos HTML, capacidades CSS, API del navegador y formatos multimedia, y copia el informe.
Código de ventana
WebGenera código window.open o un enlace target="_blank", con tamaño y posición ajustables, y explica qué parámetros ignoran ya los navegadores.
Video a GIF
MultimediaConvierte un tramo de video en GIF: fotogramas por segundo, anchura, colores y bucle ajustables. Elige el tramo en la vista previa; el video no se sube.
Fotograma de video
MultimediaExporta el fotograma de un instante a la resolución propia del video, en PNG, JPEG o WebP. Más nítido que una captura: sin controles ni reescalado.
Audio a WAV
MultimediaConvierte MP3 / M4A / FLAC y más a WAV, con frecuencia de muestreo opcional (16k para voz, 48k para video), mezcla a mono y normalización de pico.