Commencer avec Electron Updater

Ce 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 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
• A un compte Capgo (inscrivez-vous à capgo.app)

Installation

Vous pouvez utiliser notre Setup assisté par l'IA pour installer le plugin. Ajoutez les compétences Capgo à 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 le Setup manuel, 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 depuis le tableau de bord Capgo. Si vous n'avez pas encore créé d'application, exécutez :

   npx @capgo/cli@latest init

Configuration

Le mise en place de 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 dans les 10 secondes suivant le lancement de l'application (configurable via notifyAppReady() protectedTokens appReadyTimeout. Si elle n'est pas appelée, 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 de l'actualisation 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
• Basculer entre les différents lots 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 Section intitulée « Canaux » (nom du canal de mise à jour de Capgo). Page/zone : page de marketing des solutions de Capgo. Rôle : étiquette de navigation ou élément de navigation court. Voir dans : page solutions/white-label.astro. Message clé `solutions_white_label_visual_cell2_value` (Valeur de la cellule visuelle de l'étiquette blanche des solutions).
• Rollbacks - Comprendre la protection de rollback

Continuez de là : Getting Started with Electron Updater

Si vous utilisez Getting Started with Electron Updater pour planifier le travail de plugin natif, connectez-l’avec Utilisation de @capgo/electron-updater pour la capacité native dans Utilisation de @capgo/electron-updater, Capgo Répertoire de plugin pour le flux de travail du produit dans Capgo Répertoire de plugin, Capacitor Plugins par Capgo pour les détails d'implémentation dans Capacitor Plugins par Capgo Ajouter ou Mettre à Jour les Plugins pour les détails d'implémentation dans Ajouter ou Mettre à Jour les Plugins, et Alternatives de Plugins Ionic Entreprise pour le flux de travail du produit dans Alternatives de Plugins Ionic Entreprise.