Evitar que el sistema entre en modo de suspensión 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.

En algunas aplicaciones de escritorio surge la necesidad de mantener el sistema activo por más tiempo. Por ejemplo, durante la descarga de un archivo o la transmisión de audio/video. En tales casos, debemos evitar que el sistema entre en modo de bajo consumo . De lo contrario, la aplicación podría suspenderse para su posterior ejecución. Electron nos proporciona un módulo powerSaveBlocker incorporado para este mismo propósito. Con este módulo, podemos controlar el comportamiento del sistema y bloquear el sistema para que no entre en modo de suspensión . También podemos restaurar el sistema a su configuración original desactivando este bloqueador de energía. Este tutorial demostrará el módulo powerSaveBlocker en Electron.

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.

powerSaveBlocker: El Módulo powerSaveBlocker 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 .

• Estructura del proyecto:
  

Ejemplo: Comenzaremos construyendo la aplicación Electron para la implementación del módulo powerSaveBlocker 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-block",
    "version": "1.0.0",
    "description": "Prevent System from Sleep 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())' 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. 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>.        <br><br>     <button id="enter">Prevent Display from Sleeping</button>        <br><br>     <button id="disable">Disable Blocker</button>        <!-- 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

  

• Paso 4: el botón Evitar que la pantalla se suspenda aún no tiene ninguna funcionalidad asociada.

  powerSaveBlocker.start (type) evita que el sistema entre en modos de bajo consumo de energía. Toma los siguientes parámetros.

  • tipo: String Este valor no puede estar vacío. Representa el tipo de Bloqueador que desea implementar. Puede asumir cualquiera de los dos valores siguientes:
    • prevent-app-suspension: Este valor evita que la aplicación sea suspendida. Mantiene el sistema activo, pero las pantallas se pueden apagar, como la operación de cierre de sesión en Windows . Este valor se puede utilizar al transmitir audio o descargar archivos, etc.
    • prevent-display-sleep: este valor evita que la pantalla entre en modo de suspensión. Mantiene el Sistema y la pantalla Activos. Este valor se puede usar cuando se transmite video, etc.

    Nota : prevent-display-sleep siempre tiene mayor prioridad que prevent-app-suspension . En el caso de múltiples Procesos de Representación que implementen diferentes bloqueadores, el bloqueador con mayor precedencia siempre permanecerá vigente hasta que se resuelva la solicitud.

  Este método devuelve un número entero que representa la ID del bloqueador que se ha asignado al bloqueador de potencia. Los demás métodos de Instancia del módulo powerSaveBlocker hacen uso de este ID para realizar operaciones.

  Nota: powerSaveBlocker no supervisa los cambios de estado de energía del sistema y no debe confundirse con el módulo powerMonitor .

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

  const electron = require('electron')    // Importing powerSaveBlocker Module from remote module const powerSaveBlocker = electron.remote.powerSaveBlocker;    var enter = document.getElementById('enter'); var id = undefined    enter.addEventListener('click',() => {     id = powerSaveBlocker.start('prevent-display-sleep');     console.log('Request ID generated - ', id);     console.log('Prevent Display Sleep is Enabled') });

• Paso 5: el botón Deshabilitar bloqueador aún no tiene ninguna funcionalidad asociada. El powerSaveBlocker.isStarted(id) y powerSaveBlocker.stop(id)ambos toman el valor entero del ID del bloqueador que devolvió el método powerSaveBlocker.start() . El método powerSaveBlocker.isStarted() devuelve un valor booleano que indica si el powerSaveBlocker correspondiente se ha iniciado y está en vigor. Para obtener información más detallada, consulte este enlace . El método powerSaveBlocker.stop() no tiene un valor de Retorno. Simplemente detiene el powerSaveBlocker especificadoen efecto, que está representado por la identificación del bloqueador.
  index.js: agregue el siguiente fragmento en ese archivo.

  var disable = document.getElementById('disable');    disable.addEventListener('click',() => {     // Checking if ID is undefined or not     if (id && powerSaveBlocker.isStarted(id)) {         console.log('Prevent Display Sleep is Active');         powerSaveBlocker.stop(id);         console.log('Prevent Display Sleep is successfully disabled');     } else {         console.log('Prevent Display Sleep is not Active')     } });

  Producción: