Emulació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 las aplicaciones web tradicionales, tenemos la funcionalidad Alternar vista en la que se nos da la opción de ver la versión de escritorio o la versión móvil del sitio web. Esto depende del dispositivo desde el que estamos viendo el sitio web actualmente. Esto también es parte de Emulación . La emulación se refiere a la capacidad del software para emular (o imitar) otro programa o adoptar características que son diferentes del original/previsto. Esto se hace para mejorar la experiencia del usuario o brindar a los desarrolladores la capacidad de probar la aplicación en diferentes plataformas/características. Electron nos proporciona una forma en la que podemos emular un escritorio o un dispositivo móvil utilizando los métodos y eventos de instancia de la ventana del navegador integrada.objeto y la propiedad webContents . Este tutorial demostrará cómo emular un dispositivo 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.

• Estructura del proyecto:

Ejemplo: Siga los pasos dados en Estilo dinámico en ElectronJS para configurar la aplicación electrónica básica. Copie el código estándar para el archivo main.js y el archivo index.html como se indica en el artículo. Realice también 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. 

paquete.json: 

{
  "name": "electron-emulate",
  "version": "1.0.0",
  "description": "Device Emulation in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}

Salida: en este punto, nuestra aplicación electrónica básica está configurada. Al iniciar la aplicación, deberíamos ver el siguiente resultado. 

Emulación de dispositivo en Electron: la instancia de BrowserWindow y la propiedad webContents son parte del proceso principal . Para importar y usar BrowserWindow en el proceso Renderer , usaremos el módulo  remoto Electron .

• index.html : agregue el siguiente fragmento en ese archivo. Los Botones aún no tienen ninguna funcionalidad asociada a ellos. Para cambiar esto, agregue lo siguiente en el archivo  index.js .

<h3>
  Emulation in ElectronJS
</h3>
<button id="emulate">
  Emulate Mobile
</button>
<button id="desktop">
  Emulate Desktop
</button>
<button id="disable">
  Disable Device Emulation
</button>

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

const electron = require("electron");
 
// Importing BrowserWindow from Main
// Process with Electron remote
const BrowserWindow = electron.remote.BrowserWindow;
let win = BrowserWindow.getFocusedWindow();
// let win = BrowserWindow.getAllWindows()[0];
 
var emulate = document.getElementById("emulate");
emulate.addEventListener("click", () => {
    win.webContents.enableDeviceEmulation({
        screenPosition: "mobile",
       
        // Defined as Size of Galaxy S5 in
        // Chromium Browser
        screenSize: {
            width: 360,
            height: 640,
        },
        viewPosition: {
            x: 0,
            y: 0,
        },
        // Defined as Size of Galaxy S5 in
        // Chromium Browser
        viewSize: {
            width: 360,
            height: 640,
        },
        deviceScaleFactor: 0,
        scale: 1,
    });
});
 
var desktop = document.getElementById("desktop");
desktop.addEventListener("click", () => {
    win.webContents.enableDeviceEmulation({
        screenPosition: "desktop",
       
        // Same as BrowserWindow Instance
        // in Main Process
        screenSize: {
            width: 800,
            height: 600,
        },
        viewPosition: {
            x: 0,
            y: 0,
        },
        // Same as BrowserWindow Instance
        // in Main Process
        viewSize: {
            width: 800,
            height: 600,
        },
        deviceScaleFactor: 0,
        scale: 1,
    });
});
 
var disable = document.getElementById("disable");
disable.addEventListener("click", () => {
    win.webContents.disableDeviceEmulation();
});

A continuación se proporciona una explicación detallada de todos los métodos de instancia de la propiedad webContents utilizados en el código. 

• webContents.enableDeviceEmulation(parámetros) Este método de instancia simplemente habilita la Emulación de dispositivo en función de los parámetros que se le proporcionan. Este método no tiene un tipo de Retorno. Toma el siguiente objeto. 
  • parámetros: Objeto Toma los siguientes parámetros,
    • screenPosition: String Esta propiedad especifica la emulación. Representa la vista de pantalla que debe emularse para la aplicación. Puede contener valor de escritorio o móvil . el valor de escritorio representa un tipo de pantalla de escritorio y el valor móvil representa un tipo de pantalla móvil. El valor predeterminado es escritorio . En nuestro código, hemos alternado entre los dos valores en función de las otras propiedades proporcionadas en el objeto de parámetros .
    • screenSize: Object (Opcional) Configure el Tamaño de pantalla emulado usando el objeto Tamaño . Este parámetro es importante cuando la propiedad screenPosition se establece en mobile . Toma los siguientes parámetros. 
      • ancho: Entero El ancho del Tamaño de pantalla.
      • altura: Entero La altura del Tamaño de pantalla.
    • viewSize: Object (Opcional) Establezca el tamaño de vista emulado usando el objeto Tamaño . Este parámetro es importante cuando la propiedad screenPosition se establece en mobile . Toma los siguientes parámetros. El valor predeterminado es un objeto vacío . Objeto vacío significa Sin anulación .
      • ancho: Entero El ancho del tamaño de la vista.
      • altura: Entero La altura del tamaño de la vista.
    • viewPosition: Object Este parámetro se usa para posicionar el marco de vista en la pantalla usando el objeto de punto . Este parámetro es importante cuando la propiedad screenPosition se establece en mobile . Toma los siguientes parámetros.
      • x: Entero La coordenada X de la Posición.
      • y: Entero La coordenada Y de la posición.
    • deviceScaleFactor: Integer Este parámetro establece el factor de escala del dispositivo. El valor predeterminado es 0 .
    • scale: Float Este parámetro define la Escala (Zoom) de la Vista emulada según lo definido por la propiedad screenPosition dentro del espacio disponible. Este valor anula el modo de ajuste a la vista. El valor predeterminado es 1 .
• webContents.disableDeviceEmulation() Este método de instancia simplemente deshabilita la emulación de dispositivo habilitada por el método webContents.enableDeviceEmulation() . Este método no toma ningún parámetro y no tiene tipo de retorno.

Para obtener la instancia actual de BrowserWindow en el proceso Renderer , podemos usar algunos de los métodos estáticos proporcionados por el objeto BrowserWindow .

• BrowserWindow.getAllWindows(): este método devuelve una array de instancias de BrowserWindow activas/abiertas. En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede hacer referencia directamente desde la array como se muestra en el código.
• BrowserWindow.getFocusedWindow(): este método devuelve la instancia de BrowserWindow que está enfocada en la aplicación. Si no se encuentra ninguna instancia de BrowserWindow actual, devuelve nulo . En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede hacer referencia directamente mediante este método, como se muestra en el código. 
   

Producción: