Démarrage rapide avec Electron Updater

Cette guide vous guide à travers la configuration de @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 backend Cloud Capgo, 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

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 appReadyTimeout). Si vous ne l'appelez pas, l'actualiseur suppose que l'actualisation 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 });
}

Écoute des Événements

Suivez la progression et l'état des mises à 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éploiement des Mises à Jour

Utilisez les Capgo CLI pour télécharger 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 sur 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 Référence - Explorez toutes les méthodes disponibles
• Canaux - En savoir plus sur les canaux de déploiement
• Rollbacks - Comprenez la protection de rollback

Continuez de l'interface d'accueil avec Electron Updater

Si vous utilisez L'interface d'accueil avec Electron Updater pour planifier le travail de plugin natif, connectez-le avec En utilisant @capgo/electron-updater pour la capacité native dans En utilisant @capgo/electron-updater, Capgo Répertoire de plugins pour le flux de travail du produit dans Capgo Répertoire de plugins, Capacitor Plugins par Capgo pour le détail d'implémentation dans Capacitor Plugins par Capgo, Ajouter ou mettre à jour des plugins pour les détails d'implémentation dans l'ajout ou la mise à jour des plugins, et Alternatives de plugins Ionic Enterprise pour le flux de travail du produit dans les alternatives de plugins Ionic Enterprise.