Se usó la API de Cloud Translation para traducir esta página.

Cómo mostrar una notificación

Alexey Rodionov

Matt Gaunt

Las opciones de notificación se dividen en dos secciones, una que aborda los aspectos visuales (esta y otro en el que se explican los aspectos de comportamiento de las notificaciones (la siguiente sección).

Puedes jugar con varias opciones de notificaciones en distintos navegadores y plataformas con el plan de Peter Beverloo Generador de notificaciones.

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:

{
  "//": "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 de título y 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 puede ver, el nombre del navegador se utiliza como título y la columna "New notification" el marcador de posición es se utiliza como el cuerpo de la notificación.

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

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

Si ejecutáramos 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 título y texto del cuerpo en Chrome para Linux.

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

Notificación con título y texto del cuerpo en Firefox para 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 para Linux.

Firefox en Linux contrae el texto del cuerpo hasta que colocas el cursor sobre la notificación, lo que provoca la notificación para expandirla:

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

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

En Firefox, las mismas notificaciones para Windows se ven de la siguiente manera:

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

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

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

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

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

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

Ícono

La opción icon es, básicamente, 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);

Recibes esta notificación en Chrome para Linux:

y en Firefox para Linux:

Lamentablemente, no existen lineamientos sólidos sobre qué tamaño de imagen usar para un ícono.

Android parece querer una imagen de 64 dp (que es de 64 píxeles por la relació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 de ícono de 192 px o más se es una apuesta segura.

Insignia

badge es un pequeño ícono monocromático 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 escribir la insignia, la insignia solo se usa en Chrome en Android.

En otros navegadores (o Chrome sin la insignia), verás un ícono del navegador.

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

Analizar los lineamientos de Android el tamaño recomendado es 24 px multiplicados por la proporción de píxeles del dispositivo.

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

Imagen

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

const title = 'Image Notification';

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

registration.showNotification(title, options);

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

Notificación con imagen en Chrome para 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 muy difícil sugerir lineamientos.

Como la versión de Chrome para computadoras de escritorio no ocupa el espacio disponible y tiene una proporción de 4:3, quizás la mejor es entregar 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 una ancho de 450 dp.

Con este lineamiento, una imagen de 1350 px o más de ancho 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 objeto type. El título y el ícono son lo que ves en la notificación. El ID se usa para detectar que se hizo clic en el botón de acción (más información en la siguiente sección). El tipo Se puede omitir porque 'button' es el valor predeterminado.

Al momento de escribir solo las acciones de asistencia de Chrome y Opera para Android,

En el ejemplo anterior, se definen cuatro acciones para ilustrar que puede definir más acciones que un vínculo a un gráfico. Si deseas conocer la cantidad de acciones que mostrará el navegador, puedes verificar 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 computadoras, los íconos de botones de acción muestran sus colores (observa el círculo 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.

Esperamos que Chrome cambie su comportamiento en las computadoras de escritorio para que coincida con Android (es decir, aplica el un esquema de colores apropiado para que los íconos coincidan con la apariencia y el funcionamiento del sistema). Mientras tanto, puedes puede coincidir con el color del texto de Chrome haciendo que los íconos tengan un color #333333.

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

El mejor tamaño al que pude trabajar en Chrome para computadoras de escritorio era 24 px x 24 px. Esto, tristemente, parece estar fuera de lugar en Android.

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

Mantener un esquema de colores consistente para tus iconos para que al menos todos tus iconos sean coherentes. que se le muestran al usuario.
Asegúrate de que funcionen en monocromático, ya que es posible que algunas plataformas los muestren de esa manera.
Prueba el tamaño y descubre qué es lo que más te conviene. El tamaño de 128 px × 128 px funciona bien en Android, pero es deficiente. calidad en las computadoras de escritorio.
No se mostrarán los íconos de acción.

La especificación de notificaciones está explorando una forma de definir varios tamaños de iconos, pero parece que pasar un tiempo antes de que se acuerde algo.

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 de respuesta.

Si haces clic en el botón de acción, se abrirá 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 la 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 se debe mostrar el texto. 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 y no por este parámetro. Según las especificaciones, esto sirve para sugerir al navegador cómo diseñar las opciones como las acciones, pero no vi ninguna diferencia.

Probablemente sea mejor definirlo si es posible; de lo contrario, el navegador debería hacer lo correcto según el texto proporcionado.

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

Los idiomas que se escriben de derecha a izquierda en Chrome en Linux tienen el siguiente aspecto:

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

En Firefox (al colocar el cursor sobre él), encontrarás lo siguiente:

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

Vibrar

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

El formato de la opción de vibración debe ser una matriz de números que describa el número de milisegundos, el dispositivo debería vibrar, seguido por la cantidad de milisegundos no vibre.

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 es compatible con 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 que se produjo un evento que generó el envío. notificación enviada.

timestamp debe ser la cantidad de milisegundos desde las 00:00:00 UTC, que es el 1 de enero de 1970 (é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

El mayor fracaso de la UX que vi con las notificaciones es la falta de especificidad en la información que muestra una notificación.

Debes considerar por qué enviaste el mensaje push en primer lugar y asegurarte de que todos los se usan opciones de notificación para ayudar a los usuarios a comprender por qué leen esa notificación.

Honestamente, 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 errores comunes que se deben evitar:

No ingreses tu sitio web en el título ni en el cuerpo. Los navegadores incluyen tu dominio en el para que no la dupliques.
Usa toda la información que tengas disponible. Si envías un mensaje push porque alguien Si envió un mensaje a un usuario, en lugar de usar el título “Mensaje nuevo” y en el cuerpo de “Haz clic aquí para leerlos'. usa el título “John recién envió un mensaje nuevo” y configura el cuerpo de la notificación como parte del mensaje.

Navegadores y detección de funciones

Al momento de la redacción, existe una gran disparidad entre Chrome y Firefox en términos de la compatibilidad de funciones con las notificaciones.

Por suerte, puedes detectar la compatibilidad con las funciones de notificaciones consultando window.Notification. para crear un prototipo.

Si quisiéramos saber si una notificación admite botones de acción, haríamos lo siguiente:

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

De esta manera, podríamos cambiar la notificación que les mostramos a nuestros usuarios.

En las otras opciones, haz lo mismo que el paso anterior y reemplaza 'actions' por los valores deseados. nombre del parámetro.