Notificaciones personalizadas en ElectronJS

ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows, macOS y Linux. Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.

Electron, en esencia, es una aplicación NodeJS que tiene la capacidad de interactuar con el entorno del sistema operativo nativo, como el sistema de archivos, la bandeja del sistema, etc. Para crear aplicaciones de sistema operativo nativas interactivas, Electron necesita integrarse con las funcionalidades del sistema operativo. Una de esas funciones cruciales son las notificaciones de escritorio. Los tres sistemas operativos tienen disposiciones para enviar notificaciones de escritorio. Electron proporciona el módulo de notificación incorporado que permite que la aplicación envíe notificaciones personalizadas, utilizando las API de notificación nativas de los sistemas operativos para mostrarlas. Este tutorial demostrará cómo crear notificaciones de escritorio personalizadas utilizando el módulo de notificación.

Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, node y npm deben estar preinstalados en el sistema.

Notificaciones en Electron: El Módulo de Notificación es una parte del Proceso Principal . Para importar y usar el Módulo de Notificación en el Proceso Renderer , podemos usar el Módulo Remoto proporcionado por Electron. En este tutorial, también usaremos Electron Remote. Para obtener más detalles sobre el módulo remoto, consulte este enlace .

Estructura del proyecto:

Ejemplo: Comenzaremos construyendo la aplicación electrónica básica siguiendo los pasos dados.

Paso 1: navegue a un directorio vacío para configurar el proyecto y ejecute el siguiente comando,
```
npm init
```
Para generar el archivo package.json . Instale Electron usando npm si no está instalado.
```
npm install electron --save-dev
```
Este comando también creará el archivo package-lock.json e instalará las dependencias requeridas de node_modules . Una vez que Electron se haya instalado correctamente, abra el archivo package.json y realice los cambios necesarios con la tecla «scripts» .

paquete.json:
```
{
  "name": "electron-notification",
  "version": "1.0.0",
  "description": "Custom notification in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron"
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.2.5"
  }
}
```

Paso 2: Cree un archivo main.js de acuerdo con la estructura del proyecto. Este archivo es el Proceso Principal y actúa como un punto de entrada a la aplicación. Copie el código Boilerplate para el archivo main.js como se indica en el siguiente enlace . Modificaremos el código para adaptarlo a las necesidades de nuestro proyecto.

principal.js:

const { app, BrowserWindow } = require('electron')
  
function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  
  // Load the index.html of the app.
  win.loadFile('src/index.html')
  
  // Open the DevTools.
  win.webContents.openDevTools()
}
  
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)
  
// Quit when all windows are closed.
app.on('window-all-closed',() => {
  // On macOS it is common for applications and their
  // menu bar to stay active until the user quits 
  // explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
  
app.on('activate',() => {
  // On macOS it's common to re-create a window in the
  // app when the  dock icon is clicked and there are
  // no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
  
// In this file, you can include the rest of your app's
// specific main process code. You can also put them in 
// separate files and require them here.

Paso 3: Cree el archivo index.html dentro del directorio src . También copiaremos el código repetitivo para el archivo index.html del enlace mencionado anteriormente. Modificaremos el código para adaptarlo a las necesidades de nuestro proyecto.

índice.html:

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    
    <!-- https://electronjs.org/docs/tutorial
                      /security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy"
          content="script-src 'self' 'unsafe-inline';" />
</head>
  
<body>
    <h1>Hello World!</h1> We are using node
    <script>
        document.write(process.versions.node)
    </script>, Chrome
    <script>
        document.write(process.versions.chrome)
    </script>, and Electron
    <script>
        document.write(process.versions.electron)
    </script>.
  
    <!-- Adding Individual Renderer Process JS File -->
    <script src="index.js"></script>
</body>
  
</html>

Salida: en este punto, nuestra aplicación electrónica básica está configurada. Para iniciar la aplicación Electron, ejecute el comando:
```
npm start
```

Opciones de notificación: ahora crearemos una notificación de escritorio personalizada en una máquina con Windows . El módulo de notificación proporciona ciertos eventos de instancia, métodos de instancia y opciones que son específicos del sistema operativo. Si se usa una propiedad que es incompatible con el sistema operativo nativo, se ignora simplemente. A continuación se proporciona una lista detallada de los mismos.

título: String Compatible con todos los sistemas operativos. El título de la notificación que se muestra en la parte superior de la ventana de notificación
subtítulo: string (opcional) Solo compatible con macOS . Un Subtítulo de la Notificación. Se muestra debajo del título
cuerpo: String Compatible con todos los sistemas operativos. El cuerpo de la ventana de notificación
silencioso: booleano (opcional) compatible con todos los sistemas operativos. Omitir o no el sonido de notificación del sistema operativo al mostrar la notificación
icono: string (opcional) compatible con todos los sistemas operativos. Un icono para mostrar en la ventana de notificación. A los efectos de este tutorial, se utilizó una imagen PNG del logotipo de Electron guardada en la carpeta ‘activos’
hasReply: booleano (opcional) Solo compatible con macOS . Para mostrar una opción de respuesta en línea a la ventana de notificación
answerPlaceholder: String (Opcional) Solo compatible con macOS . El marcador de posición para el campo de entrada ‘hasReply’
urgencia: string (opcional) Compatible solo con Linux . La urgencia de la Notificación. Los valores pueden ser ‘normal’ , ‘critical’ o ‘low’ .
closeButtonText: string (opcional) Solo compatible con macOS . Un título personalizado para el botón Cerrar de la notificación
timeoutType: string (opcional) compatible con los sistemas operativos Windows y Linux . La duración del tiempo de espera de la notificación. Los valores pueden ser ‘predeterminado’ o ‘nunca’ . A partir de Electron 8.0+, hay un error asociado con esta propiedad. Al configurar el valor como ‘nunca’ , la notificación solo debería desaparecer con la intervención manual del usuario. Sin embargo, éste no es el caso. Independientemente del valor, la notificación desaparecerá por sí sola. Puede seguir el seguimiento de errores aquí .
acciones: Objeto (Opcional) Solo compatible con macOS . Acciones para agregar a la Notificación. Es una array de objetos. Cada objeto consta de ‘tipo’ y ‘texto’ . Hay ciertas limitaciones asociadas con el uso de esta propiedad. En el caso de múltiples acciones definidas, sólo se utiliza la primera. Si se proporcionan múltiples acciones, se enumerarán como acciones adicionales, es decir, se mostrarán cuando el mouse esté activo sobre el primer botón de acción. Este caso también es incompatible con hasReplyla propiedad y se ignorará si hasReply: true.
Para obtener una explicación detallada, consulte este enlace .
sonido: string (opcional) Solo compatible con macOS . Archivo de sonido para reproducir cuando se muestra la notificación. Cualquiera de los sonidos predeterminados presentes en macOS también se puede usar además de un archivo de sonido personalizado. El archivo de sonido debe estar presente en el paquete de la aplicación o en cualquiera de las siguientes ubicaciones que se mencionan en este enlace . En este tutorial, el archivo de sonido personalizado está presente dentro de la carpeta de activos como sound.mp3

El módulo de notificación también nos proporciona un método estático ,
Notification.isSupported() . Devuelve un valor booleano que indica si las notificaciones son compatibles con el sistema actual o no. En el archivo index.html , agregue el siguiente código antes de la etiqueta del script .

índice.html:

<br><br>

    <strong>

     Trigger Custom Notifications in Electron

    </strong>

    <button id="trigger">

     Trigger Custom Notification

    </button>
Producción:

El botón Activar notificación personalizada no tiene ninguna funcionalidad asociada. Agregaremos un EventListeneral botón para activar la notificación personalizada. También agregaremos EventListener al objeto de Notificación. Cree el archivo index.js siguiendo la estructura del proyecto y realice los siguientes cambios.

índice.js:

const electron = require('electron');
const path = require('path')
  
// Importing the Notification Module from Electron,
// Since it is a Part of the Main Process, Using the
// Remote Module to Import it in Renderer Process
const Notification = electron.remote.Notification;
  
var button = document.getElementById('trigger');
  
const options = {
    title: 'Custom Notification',
    subtitle: 'Subtitle of the Notification',
    body: 'Body of Custom Notification',
    silent: false,
    icon: path.join(__dirname, '../assets/image.png'),
    hasReply: true,  
    timeoutType: 'never', 
    replyPlaceholder: 'Reply Here',
    sound: path.join(__dirname, '../assets/sound.mp3'),
    urgency: 'critical' 
    closeButtonText: 'Close Button'
    actions: [ {
        type: 'button',
        text: 'Show Button'
    }]
}
  
// Instantiating a new Notifications Object
// with custom Options
const customNotification = new Notification(options);
   
button.addEventListener('click', function (event) {
    console.log(Notification.isSupported());
  
    customNotification.show();
    // customNotification.close();
});
  
// Instance Events for the new Notification Object
customNotification.addListener('click',() => {
    console.log('Notification is Clicked');
});
  
customNotification.addListener('show',() => {
    console.log('Notification is shown');
});
  
customNotification.addListener('close',() => {
    console.log('Notification is Automatically Closed')
});

Método de instancia customNotification.show() para mostrar inmediatamente la notificación al usuario. En caso de que se haya mostrado la Notificación, descarta la anterior y crea una nueva Notificación con Opciones idénticas.
Método de instancia customNotification.close() para descartar la notificación.
Evento: se emite un evento ‘clic’ cuando el usuario hace clic en la notificación.
Evento: se emite el evento ‘show’ , cuando se muestra la notificación al usuario.
Evento: se emite el evento ‘cerrar’ cuando se cierra la notificación. No se garantiza que se emita cada vez. La notificación se cerrará automáticamente independientemente de la propiedad ‘timeoutType’ .

Producción:

Eventos de instancia: el módulo de notificación también proporciona dos eventos de instancia más que solo son compatibles con macOS .

// Emitted when user clicks the reply button from 
// 'hasReply: true' property
customNotification.addListener('reply', (event, reply) => {
    console.log('Replied String is - ', reply);
});
  
// Emitted when the user clicks on any one action 
// defined in the actions:[{}] property
customNotification.addListener('action', (event, index) => {
    console.log('Index of the action clicked is - ', index);
});

Propiedades de instancia: el módulo de notificación electrónica también admite propiedades de instancia que se pueden configurar en el objeto de notificación. Se pueden usar en lugar de Opciones y también pueden cambiar opciones predefinidas al activar Notificaciones personalizadas. A continuación se proporciona una lista detallada.

customNotification.title = 'Title has been Changed';
  
// Supported in macOS
customNotification.subtitle = 'Subtitle of the Notification';  
  
customNotification.body = 'Body has been changed';
  
// Supported in macOS
customNotification.closeButtonText = 'Close Button'  
  
// Supported in macOS
customNotification.hasReply = true;
  
// Supported in macOS
customNotification.replyPlaceholder = 'Reply Placeholder'; 
  
customNotification.silent = false;
  
// Supported in Linux
customNotification.urgency = 'low';
  
// Supported in Windows and Linux OS 
// This is a bug, as described above.
customNotification.timeoutType= 'default';

Salida: al agregar estas propiedades de instancia al archivo index.js , deberíamos ver lo siguiente. Todas las propiedades de instancia no compatibles se ignoran.

Publicación traducida automáticamente

Artículo escrito por radheshkhanna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta