Monitoree los estados de energía del sistema 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.

Uno de esos comportamientos del sistema que puede afectar directamente la ejecución de una aplicación de escritorio nativa es el encendido del sistema y los cambios en su estado. Por ejemplo, a los desarrolladores les gustaría saber cuándo el sistema cambia de la carga a la energía de la batería y viceversa para que puedan ajustar automáticamente el brillo del sistema a través de la aplicación para consumir menos energía de la batería. De manera similar, cuando el sistema está a punto de suspenderse o apagarse, la aplicación puede tomar conciencia y tomar las medidas necesarias, como salir limpiamente, etc. Módulo powerMonitor integrado . Este tutorial demostrará cómo monitorear estos estados de energía del sistema usando los métodos y eventos de la instancia del módulo powerMonitor .

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.

Cambios en el estado de energía del sistema en ElectronJS: El módulo powerMonitor es parte del proceso principal . Para importar y usar este módulo en el proceso de renderizado , usaremos el módulo remoto Electron . Para obtener más detalles sobre el módulo remoto, consulte este enlace . El módulo powerMonitor no se puede usar hasta que se emita el evento listo del módulo de la aplicación y la aplicación esté lista para crear instancias de ventana de navegador . Para obtener más información, consulte este enlace .

Estructura del proyecto:

Ejemplo: Comenzaremos construyendo la aplicación electrónica para monitorear los cambios de estado de energía del sistema 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
```
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 clave de secuencias de comandos .
paquete.json:
```
{
  "name": "electron-power",
  "version": "1.0.0",
  "description": "Power State Changes in Electron ",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}
```

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 . Hemos modificado 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.
// This method is equivalent to 'app.on('ready', function())'
// The powerMonitor Module cannot be used until this event is emitted.
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 y el archivo index.js dentro del directorio src de acuerdo con la estructura del proyecto. También copiaremos el código Boilerplate para el archivo index.html del enlace mencionado anteriormente. Hemos modificado 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 está configurada y podemos iniciar la aplicación para verificar la salida de la GUI. Para iniciar la aplicación Electron, ejecute el comando:

npm start

GUI Output

Paso 4: vamos a monitorear los cambios de estado de energía del sistema en toda la aplicación sin vincular este módulo a ningún elemento HTML DOM.
index.js: agregue el siguiente fragmento en ese archivo.

const electron = require('electron');
// Importing powerMonitor from Main Process 
// Using remote Module
const powerMonitor = electron.remote.powerMonitor;
  
powerMonitor.on('suspend',() => {
    console.log('The system is going to sleep');
});
  
powerMonitor.on('resume',() => {
    console.log('The system is resuming');
});
  
powerMonitor.on('on-ac',() => {
    console.log('The system is on AC Power (charging)');
});
  
powerMonitor.on('on-battery',() => {
    console.log('The system is on Battery Power');
});
  
powerMonitor.on('shutdown',() => {
    console.log('The system is Shutting Down');
});
  
powerMonitor.on('lock-screen',() => {
    console.log('The system is about to be locked');
});
  
powerMonitor.on('unlock-screen',() => {
    console.log('The system is unlocked');
});
  
const state = powerMonitor.getSystemIdleState(4);
console.log('Current System State - ', state);
  
const idle = powerMonitor.getSystemIdleTime();
console.log('Current System Idle Time - ', idle);

Explicación: A continuación se explica una explicación detallada de todos los eventos de instancia del módulo powerMonitor utilizado en el código. Para obtener información más detallada, consulte este enlace .

suspender: Evento emitido cuando el sistema está a punto de suspenderse o entrar en modo de suspensión.
reanudar: Evento emitido cuando el sistema se reanuda desde el estado suspendido o el modo de suspensión.
on-ac: evento Este evento de instancia solo se admite en Windows . Este evento se emite cuando el estado de alimentación del sistema cambia a alimentación de CA y el sistema funciona con electricidad, como cuando se cargan portátiles. Para cambiar entre alimentación de CA y batería, simplemente conecte/desenchufe el cargador de la computadora portátil como se hizo en la Salida.
on-battery: Event Este evento de instancia solo es compatible con Windows . Este evento se emite cuando el estado de alimentación del sistema cambia a Alimentación por batería y el sistema funciona con batería. Para cambiar entre alimentación de CA y batería, simplemente conecte/desenchufe el cargador de la computadora portátil como se hizo en la Salida.
shutdown: Event Este evento de instancia solo es compatible con Linux y macOS . Este evento se emite cuando el sistema está a punto de reiniciarse o apagarse. Si el controlador de eventos invoca el método e.preventDefault() desde el objeto de evento global , Electron intentará retrasar el cierre del sistema para que la aplicación salga limpiamente. Cuando se llama a este método, las aplicaciones deben cerrarse inmediatamente usando el método app.quit() como se usa en el archivo main.js para detener todos los procesos en segundo plano y cerrar cualquier instancia abierta de BrowserWindow . Para obtener información más detallada sobre app.quit()y todos los eventos de Instancia asociados con él, Consulte este enlace .
pantalla de bloqueo: Evento Este evento de instancia solo es compatible con Windows y macOS . Este evento se emite cuando el sistema está a punto de bloquear la pantalla. En Windows , esta función se activa con Windows+L .
unlock-screen: Event Este evento de instancia solo es compatible con Windows y macOS . Este evento se emite tan pronto como se desbloquea la pantalla Sistemas.

A continuación se explica una explicación detallada de todos los métodos de instancia del módulo powerMonitor utilizados en el código. Para obtener información más detallada, consulte este enlace .

powerMonitor.getSystemIdleState(idleThreshold) Este método se utiliza para calcular el estado inactivo del sistema y devuelve el estado actual del sistema en función del valor de idleThreshold proporcionado. El valor de idleThreshold es la cantidad de tiempo (en segundos) antes de que se pueda considerar que el sistema está en estado inactivo. Este método devuelve un valor de string que representa el estado actual del sistema. Los valores devueltos pueden ser activos , inactivos , bloqueados o desconocidos . En el código anterior, hemos tomado 4s como el umbral de inactividad y deberíamos estar activos como el valor de retorno.
Nota– El valor de devolución bloqueado está disponible solo en entornos de sistema seleccionados.
powerMonitor.getSystemIdleTime() Este método se utiliza para calcular el tiempo en segundos que el sistema ha estado en estado inactivo. No toma ningún parámetro. Devuelve un valor entero que representa el tiempo de inactividad del sistema en segundos.

Nota : el módulo powerMonitor no controla el comportamiento del sistema, como evitar que el sistema entre en suspensión, etc., y no debe confundirse con el módulo powerSaveBlocker .

Producción:

Dado que poner el sistema en modo de suspensión y reactivarlo no se puede registrar, este es el siguiente resultado para esos eventos de instancia. Para que el sistema entre en modo de suspensión, el sistema realiza la operación de bloqueo de pantalla. De manera similar, al reactivar el sistema desde el modo de suspensión, el sistema debe desbloquearse para poder acceder.
Producción:
Sleep Mode

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