Visión general

Los tres sistemas operativos proporcionan medios para que las aplicaciones envíen notificaciones al usuario. La técnica de mostrar notificaciones es diferente para los procesos Main y Renderer.

Para el proceso de Renderer, Electron permite convenientemente a los desarrolladores enviar notificaciones con el API de notificación HTML5, utilizando las API de notificación nativas del sistema operativo actualmente en ejecución para mostrarlo.

Para mostrar notificaciones en el proceso principal, debe utilizar el módulo de notificaciones.

Ejemplo

Mostrar notificaciones en el proceso de renderizado

Suponiendo que tiene una aplicación de Electron en funcionamiento de la Guía de inicio rápido, agregue la siguiente línea a la index.html archivo antes del cierre etiqueta:

<scriptsrc="renderer.js">script>

y agrega el renderer.js expediente:

const myNotification =newNotification('Title',
  body:'Notification from the Renderer process')

myNotification.onclick=()=>
  console.log('Notification clicked')

Después de iniciar la aplicación Electron, debería ver la notificación:

Notificación en el proceso de Renderer

Si abre la Consola y luego hace clic en la notificación, verá el mensaje que se generó después de activar la onclick evento:

Mensaje al hacer clic para la notificación

Mostrar notificaciones en el proceso principal

Comenzando con una aplicación que funcione de la Guía de inicio rápido, actualice el main.js archivo con las siguientes líneas:

const Notification =require('electron')functionshowNotification()const notification =
    title:'Basic Notification',
    body:'Notification from the Main process'newNotification(notification).show()

app.whenReady().then(createWindow).then(showNotification)

Después de iniciar la aplicación Electron, debería ver la notificación:

Notificación en el proceso principal

Información adicional

Si bien el código y la experiencia del usuario en todos los sistemas operativos son similares, existen diferencias sutiles.

Ventanas

  • En Windows 10, un acceso directo a su aplicación con un ID de modelo de usuario de la aplicación debe instalarse en el menú Inicio. Esto puede ser excesivo durante el desarrollo, por lo que agregar node_moduleselectrondistelectron.exe a su menú de inicio también hace el truco. Navegue hasta el archivo en el Explorador, haga clic con el botón derecho y ‘Anclar al menú Inicio’. Luego deberá agregar la línea app.setAppUserModelId(process.execPath) a su proceso principal para ver las notificaciones.
  • En Windows 8.1 y Windows 8, un acceso directo a su aplicación con un ID de modelo de usuario de la aplicación debe instalarse en la pantalla de Inicio. Sin embargo, tenga en cuenta que no es necesario anclarlo a la pantalla de inicio.
  • En Windows 7, las notificaciones funcionan a través de una implementación personalizada que se parece visualmente a la nativa en los sistemas más nuevos.

Electron intenta automatizar el trabajo en torno al ID del modelo de usuario de la aplicación. Cuando se utiliza Electron junto con el marco de instalación y actualización Squirrel, los atajos se configurarán automáticamente correctamente. Además, Electron detectará que se utilizó Squirrel y llamará automáticamente app.setAppUserModelId() con el valor correcto. Durante el desarrollo, es posible que deba llamar app.setAppUserModelId() tú mismo.

Además, en Windows 8, la longitud máxima del cuerpo de la notificación es de 250 caracteres, y el equipo de Windows recomienda que las notificaciones se mantengan en 200 caracteres. Dicho esto, esa limitación se ha eliminado en Windows 10, y el equipo de Windows pide a los desarrolladores que sean razonables. Intentar enviar cantidades gigantescas de texto a la API (miles de caracteres) puede resultar en inestabilidad.

Notificaciones avanzadas

Las versiones posteriores de Windows permiten notificaciones avanzadas, con plantillas personalizadas, imágenes y otros elementos flexibles. Para enviar esas notificaciones (ya sea del proceso principal o del proceso de renderizado), use el módulo de área de usuario notificaciones-electron-windows, que usa complementos nativos de Node para enviar ToastNotification y TileNotification objetos.

Si bien las notificaciones que incluyen botones funcionan con electron-windows-notifications, el manejo de respuestas requiere el uso de electron-windows-interactive-notifications, que ayuda a registrar los componentes COM requeridos y a llamar a su aplicación Electron con los datos de usuario ingresados.

Horas silenciosas / modo de presentación

Para detectar si tiene permiso para enviar una notificación, use el módulo de área de usuario estado-notificación-electrónica.

Esto le permite determinar de antemano si Windows desechará silenciosamente la notificación.

Mac OS

Las notificaciones son sencillas en macOS, pero debe tener en cuenta Directrices de la interfaz humana de Apple con respecto a las notificaciones.

Tenga en cuenta que las notificaciones están limitadas a 256 bytes de tamaño y se truncarán si excede ese límite.

Notificaciones avanzadas

Las versiones posteriores de macOS permiten notificaciones con un campo de entrada, lo que permite al usuario responder rápidamente a una notificación. Para enviar notificaciones con un campo de entrada, use el módulo de área de usuario notificador-mac-nodo.

No molestar / Estado de sesión

Para detectar si tiene permiso para enviar una notificación, use el módulo de área de usuario estado-notificación-electrónica.

Esto le permitirá detectar con anticipación si se mostrará o no la notificación.

Linux

Las notificaciones se envían usando libnotify que puede mostrar notificaciones en cualquier entorno de escritorio que sigue Especificación de notificaciones de escritorio, incluidos Cinnamon, Enlightenment, Unity, GNOME, KDE.