Introducción a los eventos en Electron.js

▶

Al igual que ocurre en JavaScript, los eventos son notificaciones que se ejecutan en algún momento del ciclo de vida de la aplicación, en esta oportunidad, estamos hablando de eventos que son propios de la aplicación y no de eventos desencadenados por el usuario. En Electron, tenemos muchos tipos de eventos que podemos usar al cerrar la ventana, al cargar la página web, al detener la carga de la página y un largo etc; es importante notar que, todos estos eventos ocurren en el proceso principal ya que, desde aquí es donde se cargan las distintas páginas web.

Adicionalmente, los eventos nos vienen muy bien con los atajos de teclado para poder personalizar nuestra app.

Tenemos dos tipos de eventos en Electron:

1. Eventos que ocurren a nivel de la aplicación:
   1. https://www.electronjs.org/es/docs/latest/api/app
2. Eventos que ocurren a nivel de la página web:
   1. https://www.electronjs.org/es/docs/latest/api/web-contents

En esta guía te explico cómo funcionan, qué tipos existen y cómo los uso en proyectos reales, todo desde mi experiencia enseñando y desarrollando con Electron.

Qué son los eventos en Electron.js y por qué son tan importantes

Electron es, internamente, una mezcla entre Node.js y Chromium. Eso significa que:

• El proceso principal controla la aplicación completa: ventanas, menú, ciclo de vida.
• El proceso de renderizado controla cada página web.

Y ambos están constantemente enviando señales (eventos) que puedes escuchar.

Por ejemplo, cada vez que una ventana termina de cargar, cada vez que se navega a otra URL, cuando la aplicación está lista, cuando un frame cambia… todo eso es un evento.

Personalmente, cuando explico esto en clase, siempre comparo los eventos de Electron con “sensores”: si sabes escucharlos, puedes reaccionar a todo.

Tipos de eventos en Electron: proceso principal vs contenido web

Eventos del módulo app: ciclo de vida de la aplicación

El módulo app es el corazón del proceso principal. Aquí es donde escuchas eventos como:

• ready → cuando Electron terminó de iniciar.
• will-finish-launching (macOS) → cuando terminó la inicialización básica.
• window-all-closed → cuando se cerraron todas las ventanas.
• before-quit, will-quit, quit → ciclo completo de salida.
• Eventos especiales de macOS como open-file, open-url, activate.

Un ejemplo típico que uso en mis cursos es controlar cuándo cerrar la app:

const { app } = require('electron')
app.on('window-all-closed', () => {
 app.quit()
})

Aunque esta es la versión más simple, en macOS muchas apps mantienen la aplicación viva sin ventanas visibles. Por eso entender estos matices es clave.

Eventos de webContents: carga, navegación y estado de la ventana

webContents es un EventEmitter. Renderiza y controla el contenido web dentro de un BrowserWindow. Se accede así:

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 800, height: 1500 })
win.loadURL('https://github.com')
const contents = win.webContents
console.log(contents)

Entre sus eventos más importantes están:

Eventos de carga

• did-finish-load → la navegación está completamente lista.
• dom-ready → el documento principal terminó de cargar.
• did-start-loading / did-stop-loading → estado visual de carga.
• did-fail-load / did-fail-provisional-load → errores durante carga.

Eventos esenciales con Electron

Eventos para iniciar la app (ready, activate)

app.whenReady() es la forma moderna de esperar al estado correcto:
app.whenReady().then(() => {
 createWindow()
})

Cualquier cosa que dependa del DOM, menú, ventanas o módulos como net debe ir después de este punto.

En macOS, activate es clave para restaurar ventanas ocultas:

app.on('activate', () => {
 if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

Eventos al cerrar la aplicación (before-quit, window-all-closed)

Cuando escribo libros, suelo poner este ejemplo para evitar cierres accidentales:

app.on('before-quit', (event) => {
 console.log('La app está a punto de cerrarse')
})

Se usa para guardar configuraciones antes del cierre.

Eventos de carga de ventana (dom-ready, did-finish-load)

Estos son esenciales cuando necesito manipular el DOM o inyectar scripts:

win.webContents.on('dom-ready', () => {
 console.log('DOM listo')
})

Eventos para cuando el DOM esta listo

Cómo utilizar eventos del menú para añadir funciones extra

Cuando hablo de menús en mis cursos, siempre digo que son “el dashboard secreto del desarrollador”.
Un menú en Electron puede disparar funciones mediante eventos, por ejemplo:

const { Menu } = require('electron')
const template = [
 {
   label: 'Opciones',
   submenu: [
     {
       label: 'Recargar',
       click: (menuItem, browserWindow) => {
         browserWindow.webContents.reload()
       }
     }
   ]
 }
]
Menu.setApplicationMenu(Menu.buildFromTemplate(template))

En mis proyectos, uso mucho este patrón porque permite agregar funciones extra sin modificar la UI de la app.

Ejemplos prácticos: escuchar y manejar eventos paso a paso

Detectar conexión online/offline

Desde el proceso de renderizado:

window.addEventListener('online', () => console.log('Online'))
window.addEventListener('offline', () => console.log('Offline'))

Desde el proceso principal:

const { net } = require('electron')
console.log('Estado:', net.isOnline())

Preguntas frecuentes sobre eventos en Electron.js

• ¿Puedo cancelar una navegación?
  • Sí: usa event.preventDefault() en eventos como will-navigate.
• ¿Los eventos del menú se ejecutan en el proceso principal?
  • Sí, aunque pueden interactuar con webContents del render.
• ¿dom-ready y did-finish-load son lo mismo?
  • No: dom-ready se dispara cuando el DOM está listo; did-finish-load cuando toda la página terminó de cargar.
• ¿Cómo obtengo el WebContents actual?
  • const contents = win.webContents

✅ Conclusión

Controlar los eventos en Electron.js es controlar la aplicación.
Como docente y desarrollador, siempre lo resalto: entender qué ocurre y cuándo ocurre te permite interceptar navegación, usar el menú como extensión funcional, manejar el ciclo de vida y reaccionar a cambios en la UI o en la red. Con esta guía ya tienes las bases para trabajar como un profesional.

Siguiente paso, Actualizar tu proyecto en Electron.js