Iniziare con Electron Updater

Questa guida ti guida attraverso la configurazione di @capgo/electron-updater in il tuo'applicazione Electron per abilitare gli aggiornamenti JavaScript/HTML/CSS in tempo reale.

Se stai già utilizzando __CAPGO_KEEP_0__ con __CAPGO_KEEP_1__? L'aggiornatore di Electron utilizza lo stesso backend Cloud __CAPGO_KEEP_2__, quindi puoi gestire sia le app mobili che quelle desktop dallo stesso pannello di controllo.

Already using Capgo with Capacitor? The Electron Updater uses the same Capgo Cloud backend, so you can manage both mobile and desktop apps from the same dashboard.

Sottosezione intitolata “Requisiti”

• Node.js 18 o superiore
• Un account __CAPGO_KEEP_0__ (iscrivi toi su
• Capgo.app capgo.app)

Sottosezione intitolata “Installazione”

You can use our AI-Assisted Setup to install the plugin. Add the Capgo skills to your AI tool using the following command:

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

Usa poi il seguente prompt:

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

Se preferisci l'installazione manuale, installa il plugin eseguendo i seguenti comandi e segui le istruzioni specifiche per la piattaforma riportate di seguito:

1. Installa il pacchetto:

   bun add @capgo/electron-updater

2. Ottieni il tuo ID App dal dashboard Capgo. Se non hai ancora creato un'app, esegui:

   npx @capgo/cli@latest init

Setup

Il aggiornatore di Electron richiede la configurazione in tre luoghi: processo principale, script di caricamento predefinito e processo di rendering.

Processo Principale

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 di Caricamento Predefinito

preload.ts

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

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

Processo di Rendering

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

Attenzione

Devi chiamare entro 10 secondi dalla lancio dell'app (configurabile tramite notifyAppReady() ). Se non viene chiamato, l'aggiornatore assume che l'aggiornamento sia fallito e torna alla versione precedente. appReadyTimeoutVerifica Aggiornamenti

Sezione intitolata “Verifica Aggiornamenti”

With autoUpdate: truel'aggiornatore controlla automaticamente gli aggiornamenti. Puoi anche attivare controlli manuali:

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

Ascoltare gli eventi

Seguire lo stato e il progresso degli aggiornamenti con gli eventi:

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

Distribuzione degli Aggiornamenti

Utilizza i Capgo CLI per caricare gli aggiornamenti:

# Build your app
npm run build

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

Il tuo'app Electron rileverà automaticamente e scaricherà il nuovo bundle alla prossima verifica.

Menu di debug

Abilita il menu di debug durante lo sviluppo:

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

Premi Ctrl+Shift+D (o Cmd+Shift+D su Mac) per aprire il menu di debug e:

• Visualizza informazioni sulla bundle corrente
• Scegli tra le bundle disponibili
• Ripristina alla versione predefinita
• Visualizza informazioni sul dispositivo e sul canale

Opzioni di configurazione

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

Passaggi successivi

• API Riferimento - Esplora tutti i metodi disponibili
• Canali - Scopri i canali di distribuzione
• Ripristini - Comprendi la protezione dei ripristini

Continua da Getting Started with Electron Updater

Se stai utilizzando Inizia con Getting Started with Electron Updater per pianificare il lavoro del plugin nativo, connettilo con Utilizzare @capgo/electron-updater per la capacità nativa in Utilizzare @capgo/electron-updater, Directory dei plugin di Capgo per il flusso di lavoro del prodotto in Directory dei plugin di Capgo, Plugin di Capacitor sviluppati da Capgo per la dettaglio di implementazione in Plugin di Capacitor sviluppati da Capgo, Aggiungere o Aggiornare Plugin per la dettaglio di implementazione in Aggiungere o Aggiornare Plugin, e Alternative per Plugin Enterprise di Ionic per il flusso di lavoro del prodotto in Alternative per Plugin Enterprise di Ionic.