Eseguire il Progetto con l'Updater di Electron

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

Suggerimento

Stai già utilizzando Capgo con Capacitor? L'aggiornatore di Electron utilizza lo stesso Capgo backend Cloud, quindi puoi gestire sia le app mobili che quelle desktop dallo stesso pannello di controllo.

Requisiti preliminari

• Electron 20.0.0 o superiore
• Node.js 18 o superiore
• A un account Capgo (iscrivi ti al capgo.app)

Installazione

Puoi utilizzare la nostra configurazione assistita da AI per installare il plugin. Aggiungi le Capgo competenze al tuo strumento AI utilizzando il seguente comando:

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

Poi utilizza la seguente richiesta:

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

Se preferisci la configurazione 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 dalla dashboard Capgo. Se non hai ancora creato un'app, esegui:

   npx @capgo/cli@latest init

Configurazione

Sottosezione intitolata “Configurazione”

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

Sottosezione intitolata “Processo principale”

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

Copiare nel portapenne

preload.ts

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

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

Processo del renderer

// 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

Lei context deve notifyAppReady() chiamare appReadyTimeout. Se non viene chiamato, l'aggiornatore assume che l'aggiornamento sia fallito e torna alla versione precedente.

Controlla Aggiornamenti

Con autoUpdate: true, l'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 });
}

Ascoltando Eventi

Segui il progresso e lo stato dell'aggiornamento 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);
});

Deploying Aggiornamenti

Usa 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 pacchetto 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 le informazioni sul pacchetto corrente
• Passa tra le disponibili raccolte
• Ripristina alla versione predefinita
• Visualizza informazioni dispositivo e 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)
});

Esegui i passaggi successivi

• API Reference - Esplora tutti i metodi disponibili
• Canali Sottosezione intitolata “Canali” (nome del canale di rilascio Capgo). Pagina/Area: Pagina di marketing delle soluzioni Capgo. Ruolo: Etichetta breve per elemento di navigazione o pulsante. Visualizzato in: pagina solutions/white-label.astro. Chiave di messaggio `solutions_white_label_visual_cell2_value` (Solutions White Label Visual Cell2 Value).
• Ripristini - Comprendi la protezione del ripristino

Continua da Inizia con l'aggiornamento di Electron

Se stai utilizzando Inizia con l'aggiornamento di Electron per pianificare il lavoro di plugin nativo, connettilo con Utilizzando @capgo/electron-updater per la capacità nativa in Utilizzando @capgo/electron-updater Capgo Directory dei plugin per il flusso di lavoro del prodotto in Capgo Directory dei plugin Capacitor Plugin di Capgo per i dettagli di implementazione in Capacitor Plugin da Capgo Aggiungere o aggiornare Plugin per i dettagli di implementazione in Aggiungere o aggiornare Plugin, e Alternative per Plugin Enterprise Ionic per il workflow del prodotto in Alternative per Plugin Enterprise Ionic.