Operaciones de la barra de tareas de Windows 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.

Según la definición oficial, la barra de tareas es un elemento del sistema operativo ubicado en la parte inferior de la pantalla. Nos permite localizar y ejecutar programas a través del menú Inicio , o ver cualquier programa que esté abierto actualmente. En el lado derecho de la barra de tareas se encuentra el Área de notificaciones que nos permite verificar la fecha y la hora, los elementos que se ejecutan en segundo plano, etc. Todas las aplicaciones de escritorio modernas que son compatibles con WindowsLa plataforma del sistema operativo puede interactuar con esta barra de tareas de Windows. Algunas de las operaciones más comunes de la barra de tareas incluyen mostrar una superposición sobre el ícono original o hacer parpadear el ícono de la aplicación para notificar al usuario. Electron también nos proporciona una forma en la que podemos interactuar con esta barra de tareas de Windows utilizando los métodos de Instancia del objeto BrowserWindow . Este tutorial demostrará estas operaciones comunes de la barra de tareas de Windows en Electron. Para obtener más información sobre cómo Electron interactúa con el Área de notificación, consulte el artículo: Notificaciones personalizadas en ElectronJS . Las operaciones más complejas de la barra de tareas de Windows, como mostrar una barra de herramientas en miniatura personalizada para la aplicación, etc., se tratarán en artículos separados.

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.

• Estructura del proyecto: 
   

Ejemplo: Siga los pasos dados en Operaciones de escritorio en ElectronJS para configurar la aplicación básica de Electron. Copie el código estándar para el archivo main.js y el archivo index.html como se indica en el artículo. Además, realice los cambios necesarios mencionados para el archivo package.json para iniciar la aplicación Electron. Continuaremos construyendo nuestra aplicación usando la misma base de código. Los pasos básicos necesarios para configurar la aplicación Electron siguen siendo los mismos. Cree la carpeta de activos según la estructura del proyecto. La carpeta de este activo contendrá la imagen.pngarchivo que se utilizará como una imagen superpuesta para la barra de tareas de la ventana. Para este tutorial, hemos utilizado el logotipo de Electron como archivo image.png . 
paquete.json: 

{
  "name": "electron-taskbar",
  "version": "1.0.0",
  "description": "Windows Taskbar Operations in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}

Producción: 

 Operaciones de la barra de tareas de Windows en Electron: la instancia de BrowserWindow es parte del proceso principal . Para importar y usar BrowserWindow en el proceso Renderer , usaremos el módulo remoto Electron . Como se mencionó anteriormente, las dos operaciones más comunes de la barra de tareas de Windows son las superposiciones de íconos y el efecto de ícono intermitente. Cubriremos ambas operaciones en detalle a través del código. 

 Superposiciones de iconos en la barra de tareas de Windows

• Según el MSDN oficial: 

“Las superposiciones de íconos sirven como una notificación contextual de estado y están destinadas a negar la necesidad de un ícono de estado de área de notificación separada para comunicar esa información al usuario. Por ejemplo, el nuevo estado del correo en Microsoft Outlook, que actualmente se muestra en el área de notificación, ahora se puede indicar a través de una superposición en el botón de la barra de tareas. Nuevamente, debe decidir durante su ciclo de desarrollo qué método es mejor para su aplicación. Los íconos superpuestos están destinados a proporcionar estados o notificaciones importantes y de larga data, como el estado de la red, el estado del mensajero o el correo nuevo. Al usuario no se le deben presentar superposiciones o animaciones que cambian constantemente”.

 
En Electron, podemos usar un pequeño ícono superpuesto para colocar sobre el ícono de la aplicación original. Esto se puede usar para mostrar el estado de la aplicación y se puede cambiar en consecuencia. Cuando la aplicación Electron se inicia originalmente, muestra un único icono de aplicación en la barra de tareas de Windows, como se muestra a continuación: 
 

• index.js : agregue el siguiente fragmento en ese archivo.  

const electron = require('electron')
const path = require('path');
  
// Import BrowserWindow using Electron remote
const BrowserWindow = electron.remote.BrowserWindow;
let win = BrowserWindow.getFocusedWindow();
  
win.setOverlayIcon(
      path.join(__dirname, '../assets/image.png'), 'Overlay Icon Description');
  
setTimeout(() => {
    win.setOverlayIcon(null, '');
}, 5000);

Explicación: El método de instancia win.setOverlayIcon(overlay, description) del objeto BrowserWindow solo se admite en el sistema operativo Windows. Cuando se llama a este método de instancia, se establece una imagen de superposición de 16 x 16 píxeles sobre el icono actual de la barra de tareas. Como se mencionó anteriormente, generalmente se usa para transmitir algún tipo de estado de la aplicación o para notificar pasivamente al usuario. Este método de Instancia no tiene un tipo de retorno. Toma los siguientes parámetros: 

• superposición: NativeImage Este parámetro representa el icono de NativeImage que se muestra en la esquina inferior derecha del icono de la aplicación en la barra de tareas de Windows. Si este parámetro se establece en nulo , el icono de superposición se borra. La instancia de NativeImage está especialmente diseñada para que las aplicaciones de Electron creen íconos de la bandeja del sistema, la base, la barra de tareas y las aplicaciones usando archivos PNG o JPG .
• descripción: String Este parámetro proporciona una descripción para el icono superpuesto que se proporcionará a los lectores de pantalla de Accesibilidad. Al borrar la superposición del icono de la barra de tareas, se puede pasar un valor de string vacío a este parámetro.

En el código anterior, hemos utilizado el método path.join() del módulo de ruta de NodeJS para obtener el archivo image.png de la carpeta de activos . También hemos utilizado la función setTimeout() para simular la eliminación del icono superpuesto de la barra de tareas de Windows después de 5 segundos . 
Producción: 

 Efecto de marco flash en la barra de tareas de Windows

• Según el MSDN oficial: 

“Por lo general, se muestra una ventana para informar al usuario que la ventana requiere atención pero que actualmente no tiene el foco del teclado”.

• index.js : en Electron, podemos resaltar el ícono de la barra de tareas de la aplicación y hacer que parpadee para notificar al usuario. El efecto de parpadeo del ícono puede ocurrir durante un intervalo de tiempo específico o hasta que ocurra un evento específico. Si la notificación es urgente, podemos incluso hacer que el icono parpadee hasta que el usuario no se centre explícitamente en la ventana de la aplicación. Esto es similar a hacer rebotar el ícono del Dock en macOS. 

const electron = require('electron')
const path = require('path');
  
// Import BrowserWindow using Electron remote
const BrowserWindow = electron.remote.BrowserWindow;
let win = BrowserWindow.getFocusedWindow();
  
setTimeout(() => {
    win.flashFrame(true);
}, 5000)
  
win.once('focus', () => win.flashFrame(false));

Explicación: El método de instancia win.flashFrame(flag) del objeto BrowserWindow inicia o detiene el parpadeo del icono de la aplicación en la barra de tareas de Windows según el indicador: parámetro booleano proporcionado. Esta es una forma efectiva de captar la atención del usuario y se usa en todas las aplicaciones de escritorio modernas. Este método Instancia no tiene ningún tipo de devolución. En el código anterior, hemos utilizado la función setTimeout() para simular el efecto del icono parpadeante en la barra de tareas de Windows. El efecto de parpadeo se activará 5 segundos después de iniciar la aplicación. 

Nota: Si no se llama a este método Instance con el parámetro flag establecido en false , el parpadeo continuará infinitamente. En el código anterior, hemos llamado con flag: false cuando la ventana de la aplicación se enfoca , es decir, cuando el evento de enfoque se emite en la instancia actual de BrowserWindow. Para obtener una explicación detallada sobre el método estático BrowserWindow.getFocusedWindow() para obtener la instancia actual de BrowserWindow , consulte el artículo: Emulación en ElectronJS .
Producción: