Cómo mostrar una notificación

Las opciones de notificación se dividen en dos secciones: una que se ocupa de los aspectos visuales (esta sección) y otra de los comportamientos de las notificaciones (la siguiente sección).

Puedes probar distintas opciones de notificación en varios navegadores y plataformas mediante el generador de notificaciones de Peter Beverloo.

Opciones visuales

La API para mostrar una notificación es simple:

<ServiceWorkerRegistration>.showNotification(<title>, <options>);

Ambos argumentos, title y options, son opcionales.

El título es una cadena y las opciones pueden ser cualquiera de las siguientes opciones:

{
  "//": "Visual Options",
  "body": "<String>",
  "icon": "<URL String>",
  "image": "<URL String>",
  "badge": "<URL String>",
  "dir": "<String of 'auto' | 'ltr' | 'rtl'>",
  "timestamp": "<Long>"

  "//": "Both visual & behavioral options",
  "actions": "<Array of Strings>",
  "data": "<Anything>",

  "//": "Behavioral Options",
  "tag": "<String>",
  "requireInteraction": "<boolean>",
  "renotify": "<Boolean>",
  "vibrate": "<Array of Integers>",
  "sound": "<URL String>",
  "silent": "<Boolean>",
}

Veamos las opciones visuales:

Disección de la IU de una notificación

Opciones del título y el cuerpo

Así se ve una notificación sin el título ni las opciones de Chrome en Windows:

Notificación sin el título ni las opciones en Chrome en Windows.

Como puedes ver, se usa el nombre del navegador como título y el marcador de posición "Notificación nueva" como el cuerpo de la notificación.

Si se instala una aplicación web progresiva en el dispositivo, se usará el nombre de la aplicación web en lugar del nombre del navegador:

Notificación con el nombre de la aplicación web en lugar del nombre del navegador

Si ejecutamos el siguiente código:

const title = 'Simple Title';

const options = {
  body: 'Simple piece of body text.\nSecond line of body text :)',
};

registration.showNotification(title, options);

recibiríamos esta notificación en Chrome, en Linux:

Notificación con texto del título y el cuerpo en Chrome en Linux.

En Firefox, para Linux, se vería de la siguiente manera:

Notificación con texto del título y el cuerpo en Firefox en Linux.

Así se ve la notificación con mucho texto en el título y el cuerpo en Chrome en Linux:

Notificación con título largo y texto del cuerpo en Chrome en Linux.

Firefox en Linux contrae el texto del cuerpo hasta que colocas el cursor sobre la notificación, lo que hace que la notificación se expanda:

Notificación con título largo y texto del cuerpo en Firefox en Linux.

Notificación con título largo y texto del cuerpo en Firefox en Linux mientras se coloca el cursor sobre la notificación con el cursor del mouse.

Las mismas notificaciones en Firefox en Windows se ven de la siguiente manera:

Notificación con texto del título y el cuerpo en Firefox en Windows.

Notificación con título largo y texto del cuerpo en Firefox en Windows.

Como puedes ver, la misma notificación puede tener un aspecto diferente en distintos navegadores. También puede verse diferente en el mismo navegador en distintas plataformas.

Chrome y Firefox usan las notificaciones del sistema y el centro de notificaciones en las plataformas en las que están disponibles.

Por ejemplo, las notificaciones del sistema en macOS no admiten imágenes ni acciones (botones y respuestas intercaladas).

Chrome también tiene notificaciones personalizadas para todas las plataformas de escritorio. Para habilitarlo, configura la marca chrome://flags/#enable-system-notifications en el estado Disabled.

Ícono

La opción icon es, en esencia, una imagen pequeña que puedes mostrar junto al título y el texto del cuerpo.

En tu código, debes proporcionar una URL a la imagen que deseas cargar:

const title = 'Icon Notification';

const options = {
  icon: '/images/demos/icon-512x512.png',
};

registration.showNotification(title, options);

Recibirás esta notificación en Chrome para Linux:

Notificación con ícono en Chrome para Linux.

y en Firefox en Linux:

Notificación con ícono de Firefox en Linux.

Por desgracia, no hay pautas sólidas sobre qué tamaño usar en un icono.

Parece que Android quiere una imagen de 64 dp (que es un múltiplo de 64 px por la proporción de píxeles del dispositivo).

Si suponemos que la relación de píxeles más alta para un dispositivo es 3, un tamaño del ícono de 192 px o más es una apuesta segura.

Insignia

badge es un ícono monocromático pequeño que se usa para mostrar un poco más de información al usuario sobre el origen de la notificación:

const title = 'Badge Notification';

const options = {
  badge: '/images/demos/badge-128x128.png',
};

registration.showNotification(title, options);

Al momento de la redacción, la insignia solo se usa en Chrome para Android.

Notificación con insignia en Chrome para Android.

En otros navegadores (o Chrome sin la insignia), verás el ícono correspondiente.

Notificación con insignia en Firefox para Android.

Al igual que con la opción icon, no hay lineamientos reales sobre qué tamaño usar.

Si analizas en detalle los lineamientos de Android, el tamaño recomendado es 24 px multiplicado por la proporción de píxeles del dispositivo.

Significa que una imagen de 72 px o más debe ser buena (suponiendo una relación de píxeles máxima del dispositivo de 3).

De imagen

La opción image se puede usar para mostrarle una imagen más grande al usuario. Esto es particularmente útil para mostrarle al usuario una imagen de vista previa.

const title = 'Image Notification';

const options = {
  image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};

registration.showNotification(title, options);

En Chrome para Linux, la notificación se verá de la siguiente manera:

Notificación con imagen en Chrome en Linux.

En Chrome para Android, el recorte y la proporción son diferentes:

Notificación con imagen en Chrome para Android.

Dadas las diferencias en la proporción entre las computadoras de escritorio y los dispositivos móviles, es extremadamente difícil sugerir lineamientos.

Dado que Chrome en computadoras de escritorio no ocupa el espacio disponible y tiene una relación de aspecto de 4:3, quizás el mejor enfoque sea mostrar una imagen con esta proporción y permitir que Android la recorte. Dicho esto, la opción image puede cambiar.

En Android, el único lineamientos es un ancho de 450 dp.

Con este lineamiento, una imagen de 1350 px de ancho o más sería una buena opción.

Acciones (botones)

Puedes definir actions para mostrar botones con una notificación:

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      type: 'button',
      title: 'Coffee',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

Para cada acción, puedes definir un title, un action (que es básicamente un ID), un icon y un type. El título y el ícono son lo que verás en la notificación. El ID se usa para detectar que se hizo clic en el botón de acción (obtén más información sobre este tema en la siguiente sección). Se puede omitir el tipo porque 'button' es el valor predeterminado.

Al momento de la redacción de este documento, solo Chrome y Opera para Android admiten acciones.

En el ejemplo anterior, existen cuatro acciones definidas para ilustrar que puedes definir más acciones de las que se mostrarán. Si deseas saber la cantidad de acciones que mostrará el navegador, puedes consultar window.Notification?.maxActions:

const maxVisibleActions = window.Notification?.maxActions;

if (maxVisibleActions) {
  options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
  options.body = 'Notification actions are not supported.';
}

En el escritorio, los íconos de los botones de acción muestran sus colores (mira el anillo rosa):

Notificación con botones de acción en Chrome en Linux.

En Android 6 y versiones anteriores, los íconos tienen un color que coincide con el esquema de colores del sistema:

Notificación con botones de acción en Chrome para Android.

En Android 7 y versiones posteriores, no se muestran los íconos de acción.

Con suerte, Chrome cambiará su comportamiento en las computadoras de escritorio para que coincida con el de Android (es decir, se aplicará el esquema de colores apropiado para que los íconos coincidan con la apariencia del sistema). Mientras tanto, puedes hacer que los íconos tengan el color #333333 para hacer coincidir el color del texto de Chrome.

También vale la pena señalar que los íconos se ven nítidos en Android, pero no en computadoras de escritorio.

El tamaño más adecuado para trabajar en Chrome para computadoras de escritorio era de 24 px x 24 px. En Android, lamentablemente, esto parece fuera de lugar.

La práctica recomendada que podemos extraer de estas diferencias:

  • Usa un esquema de colores coherente para tus íconos, de manera que al menos todos se muestren al usuario de manera coherente.
  • Asegúrate de que funcionen en formato monocromático, ya que algunas plataformas podrían mostrarlas de esa manera.
  • Prueba el tamaño y descubre qué funciona para ti. El tamaño de 128 px × 128 px funciona bien en Android, pero la calidad es de baja calidad en computadoras de escritorio.
  • Los íconos de acción no se mostrarán.

En la especificación de notificaciones, se está explorando una forma de definir varios tamaños de íconos, pero parece que pasará un tiempo antes de que se llegue a un acuerdo.

Acciones (respuestas intercaladas)

Para agregar una respuesta intercalada a la notificación, define una acción con el tipo 'text':

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  image: '/images/demos/avatar-512x512.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
    }
  ],
};

registration.showNotification(title, options);

Así se verá en Android:

Notificación en Android con un botón de acción para responder

Cuando se hace clic en el botón de acción, se abre un campo de entrada de texto:

Notificación en Android con un campo de entrada de texto abierto.

Puedes personalizar el marcador de posición para el campo de entrada de texto:

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  icon: '/images/demos/avatar-512x512.jpg',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
      placeholder: 'Type text here',
    }
  ],
};

registration.showNotification(title, options);

Notificación en Android con marcador de posición personalizado para el campo de entrada de texto

En Chrome en Windows, el campo de entrada de texto siempre está visible sin tener que hacer clic en el botón de acción:

Notificación en Windows con un campo de entrada de texto y un botón de acción de respuesta.

Puedes agregar más de una respuesta en línea o combinar botones y respuestas en línea:

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

Notificación en Windows con un campo de entrada de texto y dos botones de acción.

Dirección

El parámetro dir te permite definir en qué dirección debe mostrarse el texto, ya sea de derecha a izquierda o de izquierda a derecha.

En las pruebas, parecía que la dirección estaba determinada en gran medida por el texto en lugar de este parámetro. Según las especificaciones, esto tiene como objetivo sugerir al navegador cómo diseñar opciones, como acciones, pero no noté ninguna diferencia.

Probablemente sea mejor definirlo si puedes; de lo contrario, el navegador debería hacer lo correcto de acuerdo con el texto proporcionado.

El parámetro se debe establecer en auto, ltr o rtl.

A continuación, se muestra un idioma de derecha a izquierda que se usa en Chrome para Linux:

Notificación con un idioma de derecha a izquierda en Chrome para Linux.

En Firefox (mientras colocas el cursor sobre él), verás lo siguiente:

Notificación con un idioma de derecha a izquierda en Firefox, en Linux.

Vibrar

La opción de vibración te permite definir un patrón de vibración que se ejecutará cuando se muestre una notificación, suponiendo que la configuración actual del usuario permite las vibraciones (es decir, el dispositivo no está en modo silencioso).

El formato de la opción de vibración debe ser un array de números que describan la cantidad de milisegundos en los que el dispositivo debería vibrar, seguidos del número de milisegundos en los que no debería vibrar.

const title = 'Vibrate Notification';

const options = {
  // Star Wars shamelessly taken from the awesome Peter Beverloo
  // https://tests.peter.sh/notification-generator/
  vibrate: [
    500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
    40, 500,
  ],
};

registration.showNotification(title, options);

Esto solo afecta a los dispositivos que admiten vibración.

Sonido

El parámetro de sonido te permite definir el sonido que se reproducirá cuando se reciba la notificación.

Al momento de la redacción, ningún navegador admite esta opción.

const title = 'Sound Notification';

const options = {
  sound: '/demos/notification-examples/audio/notification-sound.mp3',
};

registration.showNotification(title, options);

Marca de tiempo

La marca de tiempo te permite indicarle a la plataforma la hora en la que ocurrió un evento que generó el envío de la notificación push.

El valor timestamp debe ser el número de milisegundos desde 00:00:00 UTC, que es el 1 de enero de 1970 (que es la época UNIX).

const title = 'Timestamp Notification';

const options = {
  body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
  timestamp: Date.parse('01 Jan 2000 00:00:00'),
};

registration.showNotification(title, options);

Prácticas recomendadas de UX

La mayor falla de UX que he visto con las notificaciones es la falta de especificidad en la información que muestran las notificaciones.

Debes considerar por qué enviaste el mensaje push en primer lugar y asegurarte de que todas las opciones de notificación se usen para ayudar a los usuarios a comprender por qué están leyendo esa notificación.

Para ser honesto, es fácil ver ejemplos y pensar "Nunca comeré ese error". Pero es más fácil caer en esa trampa de lo que crees.

Estos son algunos de los errores comunes que se deben evitar:

  • No coloques tu sitio web en el título ni en el cuerpo. Los navegadores incluyen tu dominio en la notificación, por lo que no lo dupliques.
  • Usa toda la información que tengas disponible. Si envías un mensaje push porque alguien envió un mensaje a un usuario, en lugar de usar el título "Mensaje nuevo" y el cuerpo "Haz clic aquí para leerlo", usa el título "Juan acaba de enviar un mensaje nuevo" y establece el cuerpo de la notificación como parte del mensaje.

Navegadores y detección de funciones

Al momento de la redacción, existe una disparidad bastante grande entre Chrome y Firefox en términos de compatibilidad de funciones para notificaciones.

Afortunadamente, puedes detectar la compatibilidad con las funciones de notificación observando el prototipo window.Notification.

Supongamos que queremos saber si una notificación admite botones de acción. Deberíamos hacer lo siguiente:

if ('actions' in window.Notification?.prototype) {
  // Action buttons are supported.
} else {
  // Action buttons are NOT supported.
}

Con esto, podríamos cambiar la notificación que mostramos a nuestros usuarios.

Con las otras opciones, haz lo mismo que antes y reemplaza 'actions' por el nombre del parámetro deseado.

Próximos pasos

Code labs