Cambio al sistema de notificaciones nativo en macOS

Stephen McGruer
Stephen McGruer

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

Este cambio hace que Chrome en macOS se sienta mucho mejor integrado en la plataforma y corrige una serie de errores antiguos, por ejemplo, cuando Chrome no respetaba la configuración del modo No interrumpir del sistema.

A continuación, veremos las diferencias que presenta este cambio a 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. Tendrán un tamaño más pequeño y se aplicará relleno. Te recomendamos que consideres cambiar a un ícono de fondo transparente en lugar de un color sólido para que sea estéticamente agradable.

Íconos de notificaciones antes y después de Chrome en Mac que muestran Chrome en comparación con los que se muestran en macOS
Íconos de notificaciones del “Antes y después” para Chrome en Mac que muestran Chrome en comparación con los que se muestran en macOS

Íconos de acción

Antes de que se mostraran los botones y los íconos de acción de este cambio 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.

Botones de acción para antes y después de las notificaciones con íconos que se muestran en Chrome en comparación con los que se muestran en macOS
Botones de acción para antes y después de las notificaciones con íconos que se muestran en Chrome en comparación con los que se muestran en macOS

Siempre se mostrará el logotipo de Chrome y no se podrá reemplazar ni modificar. 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 la imagen, la notificación seguirá mostrándose, pero ignorará el parámetro de la imagen (consulta el ejemplo a continuación).

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

Puedes usar el siguiente código para detectar imágenes de compatibilidad:

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

Cambios en la extensión 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 de imagen ya no mostrará la imagen. Debes asegurarte de que las imágenes sean complementarias y no exijan ser útiles para los usuarios.

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

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

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

Las notificaciones de progreso agregará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 para plantillas de progreso en la API de chrome.notification
Antes y después para 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 para appIconMarkUrl en la API de chrome.notification.
Antes y después para appIconMarkUrl en la API de chrome.notification