Démarrage avec Electron Updater

Ce guide vous guide à travers la configuration @capgo/electron-updater dans votre application Electron pour activer les mises à jour JavaScript/HTML/CSS en temps réel.

Conseil

Vous utilisez déjà Capgo avec Capacitor? L'actualiseur Electron utilise le même Capgo Cloud backend, vous pouvez donc gérer les deux applications mobiles et de bureau depuis le même tableau de bord.

Prérequis

• Electron 20.0.0 ou supérieur
• Node.js 18 ou supérieur
• Un compte Capgo (inscrivez-vous sur capgo.app)

Installation

Vous pouvez utiliser notre configuration assistée par l'IA pour installer le plugin. Ajoutez les Capgo compétences à votre outil IA à l'aide de la commande suivante :

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Utilisez ensuite la prompt suivante :

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/electron-updater` plugin in my project.

Si vous préférez la configuration manuelle, installez le plugin en exécutant les commandes suivantes et suivez les instructions spécifiques à la plateforme ci-dessous :

1. Installez le package :

   bun add @capgo/electron-updater

2. Obtenez votre ID d'application à partir du tableau de bord Capgo. Si vous n'avez pas encore créé d'application, exécutez :

   npx @capgo/cli@latest init

Configuration

L'actualiseur Electron nécessite une configuration dans trois endroits : processus principal, script de préchargement et processus de rendu.

Processus 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 Préchargement

preload.ts

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

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

Processus de Rendu

// 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());

Attention

Vous devez appeler notifyAppReady() dans les 10 secondes suivant le lancement de l'application (configurable via appReadyTimeoutSi ce n'est pas appelé, le correcteur suppose que l'update a échoué et revient à la version précédente.

Vérification des Mises à Jour

Avec autoUpdate: true; l'actualiseur vérifie automatiquement les mises à jour. Vous pouvez également déclencher des vérifications manuelles :

// 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 });
}

Écouter les événements

Suivre le progrès et l'état de mise à jour avec les événements :

// 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);
});

Déployer les Mises à jour

Utilisez les Capgo CLI pour téléverser les mises à jour :

# Build your app
npm run build

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

Votre application Electron détectera automatiquement et téléchargera le nouveau bundle lors du prochain contrôle.

Menu de débogage

Activer le menu de débogage pendant le développement :

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

Appuyez Ctrl+Shift+D ou Cmd+Shift+D sur Mac) pour ouvrir le menu de débogage et :

• Afficher les informations sur le bundle actuel
• Passer entre les différents bundles disponibles
• Réinitialiser vers la version intégrée
• Afficher les informations sur le dispositif et le canal

Options de configuration

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)
});

Étapes suivantes

• API Reference - Explorez toutes les méthodes disponibles
• Canaux - En apprendre sur les canaux de déploiement
• Rollbacks - Comprendre la protection de rollback

Continuez depuis Getting Started with Electron Updater

Si vous utilisez Electron Updater pour planifier le travail de plugin natif, connectez-le à Utilisez @capgo/electron-updater pour la capacité native dans Utilisez @capgo/electron-updater, Répertoire de plugin Capgo pour le flux de travail du produit dans Répertoire de plugin Capgo, Plugins Capacitor par Capgo pour le détail d'implémentation dans Plugins Capacitor par Capgo, Ajouter ou Mettre à jour les plugins pour le détail d'implémentation dans Ajouter ou Mettre à jour les plugins, et Alternatives de plugins d'entreprise Ionic pour le flux de travail du plugin d'entreprise Ionic.