Aprende a manejar el sistema de notificación nativo del sistema operativo mediante el framework de Electron y node notifier.

Uso de notificaciones de escritorio nativas con Electron Framework

Gracias a webkit, puede personalizar con CSS la interfaz de usuario de su aplicación como desee. Se puede crear una notificación elegante dentro de la ventana de su aplicación, sin embargo, a veces es posible que desee notificar algo a su usuario, incluso si no está usando la aplicación en primer lugar o está minimizado.

Native notification vs custom

Es por eso que tendremos que acceder al sistema de notificaciones del SO, que le permitirá enviar un mensaje al usuario en la pantalla en cualquier situación aunque esté usando otra aplicación.

Pero recuerda, todo en exceso es malo . Es posible que desee tener cuidado con la frecuencia con la que muestra estos mensajes al usuario y solicita permiso para hacerlo, ya que el uso excesivo de notificaciones nativas puede ser molesto e irritante.

Probablemente se estará preguntando: ¿por qué no usa la API webkitNotification? También puede usar esta API con electron, sin embargo, no está disponible para Windows. Funciona con Linux y MacOS, sin embargo, no tiene la misma apariencia y apariencia nativa, por lo tanto, le recomendamos que utilice el node-notifiercomplemento con su aplicación Electron. 

El notificador de nodo es un módulo de Node.js para enviar notificaciones del sistema multiplataforma. Con el Centro de notificaciones para Mac, notify-osd / libnotify-bin para Linux, Toasters para Windows 8/10 o Globos de barra de tareas para versiones anteriores de Windows. Si no se cumple ninguno de estos requisitos, se utiliza Growl.

Implementación

Para lograr nuestro objetivo, usaremos la biblioteca notificador de nodos que se puede descargar en su proyecto usando el siguiente comando:

npm install --save node-notifier

Visita el repositorio oficial del proyecto aquí . Después de una instalación exitosa, accederá al notificador usando require('node-notifier').

Nota importante : electron por sí mismo (última versión), te ofrece la API de notificación que envía una notificación simple (de la misma manera que lo hace el notificador de nodo) en el sistema operativo. Puede probar si está disponible utilizando el siguiente fragmento.

Los tres sistemas operativos proporcionan medios para que las aplicaciones envíen notificaciones al usuario. Electron permite convenientemente a los desarrolladores enviar notificaciones con la API de notificación HTML5 , utilizando las API de notificación nativas del sistema operativo actualmente en ejecución para mostrarla.

Nota: Dado que se trata de una API HTML5, solo está disponible en el proceso de renderizado.

// Puede usar console.log (notificación); para ver más propiedades disponibles

var notification = new Notification('Title', {
  body: 'Lorem Ipsum Dolor Sit Amet',
  title:"Hello",
  icon:'C:/images/icon.png',
  // Para prevenir el sonido
  //silent:true,
});

notification.addEventListener("click",function(){
    alert("Clicked");
},false);

notification.addEventListener("show",function(){
    alert("Shown :3");
},false);

notification.addEventListener("error",function(e){
    alert("Error :c");
},false);

notification.addEventListener("close",function(){
    alert("Closed");
},false);

Si cree que quiere aún más, continúe leyendo el uso de node-notifier.

Notificar a todos

Ahora solo necesita comenzar a usar el notificador, el siguiente fragmento muestra un mensaje simple con un sonido y un ícono.

Nota: el método de notificación es multiplataforma, es posible una personalización más profunda para cada plataforma si lee la documentación.

const notifier = require("node-notifier");

var onError = function(err,response){
    console.error(err,response);
};
            
notifier.notify({
    message: "This is the body of the notification.",
    title: "This will be the title of the notification",
     // Sonido especial
     // Cadena sensible a mayúsculas y minúsculas para la ubicación del archivo de sonido, o use uno de los sonidos nativos de OS X
     // Solo centro de notificaciones o tostadoras de Windows
    sound: true,//"Bottle",
    // The absolute path to the icon of the message
    // (doesn't work on balloons) 
    // If not found, a system icon will be shown
    icon : "C:/images/ocw-logo.png",
   // Espere con devolución de llamada (evento onClick del brindis), hasta que el usuario tome medidas contra la notificación
    wait:true
},onError);

notifier.on('click', function (notifierObject, options) {
    // Triggers if `wait: true` and user clicks notification
    alert("Callback triggered");
});

El método de notificación es de uso estándar multiplataforma, con alternativas multiplataforma. Este método funcionará de una forma u otra en todas las plataformas.

Sin embargo, notifier te permite personalizar según cada plataforma como desees, ver un informe detallado de personalización en el repositorio.

Ventanas

El módulo tostador solo funciona en Windows> = 8.

Existen algunas limitaciones para las imágenes en las notificaciones nativas de Windows 8: La imagen debe ser una imagen PNG y no puede tener más de 1024x1024 px ni más de 200Kb. También necesita especificar la imagen utilizando una ruta absoluta. Estas limitaciones se deben al sistema de notificación Toast. Un buen consejo es utilizar algo como path.join o path.delimiter para tener rutas multiplataforma.

Windows 10 Nota : es posible que deba activar la notificación de banner para que se muestre el brindis.

const WindowsToaster = require('node-notifier').WindowsToaster;
 
var notifier = new WindowsToaster({
    withFallback: false, // Fallback to Growl or Balloons? 
    customPath: void 0 // Relative path if you want to use your fork of toast.exe 
});
 
notifier.notify({
    title: "Title",
    message: "Message",
    icon: "c:/path/image.png", // Absolute path to Icon 
    sound: true, // true | false. 
    wait: false, // Wait for User Action against Notification 
}, function(error, response) {
    console.log(response);
});

Para versiones anteriores de Windows, se utilizan los globos de la barra de tareas (a menos que se active el respaldo y Growl se esté ejecutando).

Mac OS

Native Notification Center requiere Mac OS X versión 10.8 o superior. Si tiene una versión anterior, Growl será la alternativa. Si Growl no está instalado, se devolverá un error en la devolución de llamada.

const NotificationCenter = require('node-notifier').NotificationCenter;
 
var notifier = new NotificationCenter({
  withFallback: false, // Use Growl Fallback if <= 10.8 
  customPath: void 0 // Relative path if you want to use your fork of terminal-notifier 
});
 
notifier.notify({
  'title': "Hello world",
  'subtitle': void 0,
  'message': void 0,
  'sound': false, // Case Sensitive string for location of sound file, or use one of OS X's native sounds (see below) 
  'icon': 'Terminal Icon', // Absolute Path to Triggering Icon 
  'contentImage': void 0, // Absolute Path to Attached Image (Content Image) 
  'open': void 0, // URL to open on Click 
  'wait': false // Wait for User Action against Notification 
}, function(error, response) {
   console.log(response);
});

El sonido puede ser uno de estos: BassoBlowBottleFrogFunkGlassHeroMorsePingPopPurrSosumiSubmarineTink. Si el sonido es simple trueBottle se usa.

Consulte el ejemplo específico del Centro de notificaciones.

Problemas conocidos con Electron

Dentro de Electron Packaging Si empaqueta su aplicación Electron como un asar, encontrará que el notificador de nodos no se cargará. Debido a la forma en que funciona asar, no puede ejecutar un binario desde dentro de un asar. Como solución simple, al empaquetar la aplicación en un asar, asegúrese de desempaquetar la carpeta del proveedor del notificador de nodos para que el módulo aún tenga acceso a los binarios de notificación. Para hacer esto, puede hacerlo usando el siguiente comando:

asar pack . app.asar --unpack "./node_modules/node-notifier/vendor/**"

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores