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 sienta mucho mejor integrado en la plataforma y corrige varios errores de larga data, como que Chrome no respetaba el parámetro de configuración 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 del ícono

Cambiará la apariencia de los íconos. Serán más pequeños y se aplicará el padding. 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.
Antes y después de los íconos de notificaciones de Chrome para 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.
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

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 sean obligatorias para que sean útiles para tus usuarios.

Antes y después de 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 de 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 ya no se usará appIconMarkUrl 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