Cambio al sistema de notificaciones nativo en macOS

Stephen McGruer
Stephen McGruer

A partir de Chrome 59, el sistema de notificaciones nativo de macOS mostrará directamente las notificaciones enviadas a través de la API de notificaciones o la API de extensiones de chrome.notifications en lugar del propio sistema de Chrome.

Este cambio hace que Chrome en macOS se integre mucho mejor a la plataforma y corrige una serie de errores antiguos, como que Chrome no respeta la configuración de No interrumpir del sistema.

A continuación, veremos las diferencias que este cambio introduce en las APIs existentes.

Centro de notificaciones

Uno de los beneficios de este cambio es que las notificaciones se mostrarán en el centro de notificaciones de macOS.

Las notificaciones de Google Chrome se mostrarán en el centro de notificaciones de macOS
Las notificaciones de Google Chrome se mostrarán en el centro de notificaciones de macOS.

Diferencias

Tamaño y posicionamiento de los íconos

Cambiará la apariencia de los íconos. Tendrán un tamaño más pequeño y se les aplicará relleno. Te recomendamos que cambies a un ícono de fondo transparente en lugar de un color sólido para que sea más atractivo.

Antes y después de los íconos de notificaciones de Chrome en Mac que muestra Chrome en comparación con los que muestra macOS.
Los íconos de notificaciones de antes y después de Chrome en Mac que muestra Chrome en comparación con los que muestra macOS

Íconos de acción

Antes de este cambio, los íconos y botones de acción se mostraban en la notificación. Con las notificaciones nativas, no se usarán los íconos de los botones de acción, y el usuario deberá colocar el cursor sobre la notificación y seleccionar el botón "Más" para ver las acciones disponibles.

Antes y después de los botones de acción de notificaciones con íconos que muestra Chrome en comparación con los que muestra macOS.
Botones de acción de notificaciones antes y después con íconos que muestra Chrome en comparación con los que muestra macOS

El logotipo de Chrome siempre se mostrará y no se puede reemplazar ni alterar. Este es un requisito para las aplicaciones de terceros en macOS.

Imágenes

La opción image ya no será compatible con macOS. Si defines una propiedad de imagen, la notificación se seguirá mostrando, pero se ignorará el parámetro de imagen (consulta el ejemplo a continuación).

Imagen de la notificación de Chrome en macOS antes y después
Antes y después de la imagen de notificación de Chrome en macOS

Puedes detectar la compatibilidad con imágenes con el siguiente código:

if ('image' in Notification.prototype) {  
  // Image is supported.
} else {  
  // Image is NOT supported.
}

Cambios en las extensiones de Chrome

Las extensiones de Chrome tienen el concepto de plantillas de notificaciones, que se comportarán de manera diferente con este cambio.

La plantilla de notificación con imagen ya no mostrará la imagen. Debes asegurarte de que las imágenes sean complementarias y no sea necesario que sean útiles para los usuarios.

Antes y después para las plantillas de imágenes en la API de chrome.notification
Antes y después de las plantillas de imágenes en la API de chrome.notification

La plantilla de notificación de lista solo mostrará el primer elemento de la lista. Te recomendamos que vuelvas al estilo de notificación básico y uses el texto del cuerpo para resumir el conjunto de cambios.

Antes y después para las plantillas de listas en la API de chrome.notification.
Antes y después de las plantillas de listas en la API de chrome.notification

Las notificaciones de progreso adjuntarán un valor de porcentaje al título de la notificación para indicar el progreso en lugar de una barra de progreso.

Antes y después de las plantillas de progreso en la API de chrome.notification.
Antes y después de las plantillas de progreso en la API de chrome.notification

La última diferencia en la IU de notificaciones es que appIconMarkUrl ya no se usará en macOS.

Antes y después de appIconMarkUrl en la API de chrome.notification.
Antes y después de appIconMarkUrl en la API de chrome.notification