Cómo verificar si tu código está siendo ejecutado en Electron o en el explorador

Con todos los frameworks disponibles hoy en día para JavaScript como ReactJS, AngularJS etc. el proceso de desarrollo se agiliza a medidas increibles y optimiza como nunca antes el rendimiento de aplicaciones web. Gracias a Electron, es posible enpaquetar dichas aplicaciones dentro de una aplicación híbrida de escritorio. Lamentablemente, caracteristicas especiales de estos frameworks usando WebPack como el llamado "hot reload" no está disponible, así que tendras que trabajar desde el explorador a veces para probar ciertas características de tu aplicación rápidamente. Esto lleva a una necesidad básica, el saber cuando te encuentras dentro de Electron o un explorador cualquiera con JavaScript, pues no querras mantener tu código en 2 versiones.

Afortunadamente, para saber cuando te encuentras en electron o en el explorador es sumamente sencillo y te mostraremos como hacerlo en este articulo.

A. Instala el módulo isElectron

Este módulo es una pequeña utilidad que te permite saber cuando te encuentras dentro de la plataforma de Electron o un explorador común. Instala este módulo cambiando de directorio a tu proyecto en la terminal y ejecuta el siguiente comando:

npm install --save is-electron

Luego de la instalación, podrás requerir el módulo is-electron en cualquier lugar y verificar en que plataforma estás trabajando:

let isElectron = require("is-electron");

if(isElectron()){
    console.log("Electron aww yeahhh !");
}else{
    console.log("Ejecutando el código en otro explorador comun");
}

Para más información sobre este módulo, por favor visita el repositorio oficial en Github aquí.

B. Usa la función isElectron

Si no estas dispuesto a instalar un módulo para esta sencilla caracteristica como todo un artesano, puedes simplemente copiar la función del módulo e incluirla en tu propio código:

function isElectron() {
    // Renderer process
    if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
        return true;
    }

    // Main process
    if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
        return true;
    }

    // Detect the user agent when the `nodeIntegration` option is set to true
    if (typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0) {
        return true;
    }

    return false;
}

Puedes usarla de la misma manera en la que se usa el módulo:

if(isElectron()){
    console.log("Electron aww yeahhh !");
}else{
    console.log("Running in other platform as a normal browser");
}

Ambos métodos funcionan tanto en el proceso de renderizado (Renderer) y en el proceso principal (Main). La función y el módulo fueron escritos por @cheton.

Que te diviertas !

Esto podría ser de tu interes

Conviertete en un programador más sociable