Getting Started with Electron Updater

Esta guía te guía a través de la configuración de @capgo/electron-updater en tu aplicación de Electron para habilitar actualizaciones en vivo de JavaScript/HTML/CSS.

Consejo

Ya estás utilizando Capgo con Capacitor? El actualizador de Electron utiliza el mismo Capgo backend de Cloud, por lo que puedes gestionar tanto aplicaciones móviles como de escritorio desde la misma consola.

Requisitos previos

• Electron 20.0.0 o superior
• Node.js 18 o superior
• Una cuenta de Capgo (regístrate en <a href="Capgo.app">Capgo.app</a>) capgo.app)

Instalación

1. Instale el paquete:

   bun add @capgo/electron-updater

2. Obtén tu ID de aplicación desde la consola de Capgo. Si aún no has creado una aplicación, ejecuta: <a href="Capgo.app">Capgo.app</a>

   npx @capgo/cli@latest init

Configuración

El actualizador de Electron requiere configuración en tres lugares: proceso principal, script de carga previa y proceso de renderizado.

Proceso Principal

main.ts

import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import {
  ElectronUpdater,
  setupIPCHandlers,
  setupEventForwarding,
} from '@capgo/electron-updater';

// Create updater instance with your Capgo App ID
const updater = new ElectronUpdater({
  appId: 'YOUR_CAPGO_APP_ID', // e.g., 'com.example.myapp'
  autoUpdate: true,
});

app.whenReady().then(async () => {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
    },
  });

  // Initialize updater with window and builtin path
  const builtinPath = path.join(__dirname, 'www/index.html');
  await updater.initialize(mainWindow, builtinPath);

  // Setup IPC communication between main and renderer
  setupIPCHandlers(updater);
  setupEventForwarding(updater, mainWindow);

  // Load the current bundle (either builtin or downloaded update)
  await mainWindow.loadFile(updater.getCurrentBundlePath());
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

Script de carga previa

preload.ts

import { exposeUpdaterAPI } from '@capgo/electron-updater/preload';

// Expose the updater API to the renderer process
exposeUpdaterAPI();

Proceso del Renderizador

// renderer.ts (or in your app's entry point)
import { requireUpdater } from '@capgo/electron-updater/renderer';

const updater = requireUpdater();

// CRITICAL: Call this on every app launch!
// This confirms the bundle loaded successfully and prevents rollback
await updater.notifyAppReady();

console.log('App ready, current bundle:', await updater.current());

Advertencia

Tienes que llamar dentro de 10 segundos de lanzamiento de la aplicación (configurable a través de notifyAppReady() ). Si no se llama, el actualizador asume que la actualización falló y vuelve a la versión anterior. appReadyTimeoutVerificando actualizaciones

__CAPGO_KEEP_0__

Con autoUpdate: true, el actualizador verifica automáticamente actualizaciones. También puedes desencadenar verificaciones manuales:

// Check for updates manually
const latest = await updater.getLatest();

if (latest.url && !latest.error) {
  console.log('Update available:', latest.version);

  // Download the update
  const bundle = await updater.download({
    url: latest.url,
    version: latest.version,
    checksum: latest.checksum,
  });

  console.log('Downloaded bundle:', bundle.id);

  // Option 1: Queue for next restart
  await updater.next({ id: bundle.id });

  // Option 2: Apply immediately and reload
  // await updater.set({ id: bundle.id });
}

Escuchando Eventos

Seguir el progreso y el estado de actualizaciones con eventos:

// Download progress
updater.addListener('download', (event) => {
  console.log(`Download progress: ${event.percent}%`);
});

// Update available
updater.addListener('updateAvailable', (event) => {
  console.log('New version available:', event.bundle.version);
});

// Download completed
updater.addListener('downloadComplete', (event) => {
  console.log('Download finished:', event.bundle.id);
});

// Update failed
updater.addListener('updateFailed', (event) => {
  console.error('Update failed:', event.bundle.version);
});

Desplegando Actualizaciones

Utiliza los Capgo CLI para subir actualizaciones:

# Build your app
npm run build

# Upload to Capgo
npx @capgo/cli@latest bundle upload --channel=production

Su aplicación de Electron detectará automáticamente y descargará el nuevo paquete en la próxima comprobación.

Menú de depuración

Habilite el menú de depuración durante el desarrollo:

const updater = new ElectronUpdater({
  appId: 'YOUR_CAPGO_APP_ID',
  debugMenu: true, // Enable debug menu
});

Presione Ctrl+Shift+D (o Cmd+Shift+D en Mac) para abrir el menú de depuración y:

• Ver información del paquete actual
• Cambiar entre los paquetes disponibles
• Resetear a la versión incorporada
• Ver información del dispositivo y canal

Opciones de configuración

const updater = new ElectronUpdater({
  // Required
  appId: 'com.example.app',

  // Server URLs (defaults to Capgo Cloud)
  updateUrl: 'https://plugin.capgo.app/updates',
  channelUrl: 'https://plugin.capgo.app/channel_self',
  statsUrl: 'https://plugin.capgo.app/stats',

  // Behavior
  autoUpdate: true,           // Enable auto-updates
  appReadyTimeout: 10000,     // MS before rollback (default: 10s)
  autoDeleteFailed: true,     // Delete failed bundles
  autoDeletePrevious: true,   // Delete old bundles after successful update

  // Channels
  defaultChannel: 'production',

  // Security
  publicKey: '...',           // For end-to-end encryption

  // Debug
  debugMenu: false,           // Enable debug menu
  disableJSLogging: false,    // Disable console logs

  // Periodic Updates
  periodCheckDelay: 0,        // Seconds between checks (0 = disabled, min 600)
});

Pasos siguientes

• API Referencia - Explora todos los métodos disponibles
• Canales - Aprende sobre los canales de despliegue
• Reversiones - Entiende la protección de reversiones

Sigue adelante desde Getting Started with Electron Updater

Si estás utilizando Getting Started with Electron Updater para planificar el trabajo de plugin nativo, conecta con Usando @capgo/electron-updater para la capacidad nativa en Usando @capgo/electron-updater, Capgo Directorio de Plugins para el flujo de trabajo del producto en Capgo Directorio de Plugins, Capacitor Plugins por Capgo para el detalle de implementación en Capacitor Plugins por Capgo, Agregar o Actualizar Plugins para los detalles de implementación en Agregar o Actualizar Plugins, y Alternativas de Plugins de Ionic Enterprise para el flujo de trabajo del producto en Alternativas de Plugins de Ionic Enterprise.