Getting Started with Electron Updater

Cet 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 ? Le mise à jour 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 en utilisant la commande suivante :

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

Ensuite, utilisez 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 créé d'application encore, exécutez :

   npx @capgo/cli@latest init

Configuration

Le mise à jour 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 ce n'est pas appelé, l'actualiseur suppose que l'actualisation a échoué et revient à la version précédente.

Vérification des mises à jour

Avec, la mise à jour automatique vérifie les mises à jour. Vous pouvez également déclencher des vérifications manuelles : autoUpdate: trueCopier dans le presse-papier

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

Section intitulée « Écouter les Événements »

Copier dans le presse-papier

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

Section intitulée « Déployer les Mises à Jour »

Use the Capgo CLI to upload updates:

# 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 de l'appareil et du 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 Interface d'accueil avec Electron Updater pour planifier le travail de plugin natif, connectez-le à Utilisation de @capgo/electron-updater pour la capacité native dans Utilisation de @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, Ajout ou mise à jour de plugins pour les détails d'implémentation dans l'ajout ou la mise à jour de plugins, et Alternatives de plugins d'entreprise Ionic pour le flux de travail du produit dans les alternatives de plugins d'entreprise Ionic.