Elektron-Updater-Anleitung

Diese Anleitung führt Sie durch die Einrichtung @capgo/electron-updater in Ihrer Electron-Anwendung, um lebendige JavaScript/HTML/CSS-Updates zu ermöglichen.

Tip

Bereits Capgo mit Capacitor verwenden? Der Electron Updater verwendet den gleichen Capgo Cloud-Backend, sodass Sie beide mobilen und Desktop-Anwendungen aus derselben Konsole verwalten können.

Voraussetzungen

• Elektron 20.0.0 oder höher
• Node.js 18 oder höher
• Ein Capgo-Konto (Registrieren Sie sich bei) capgo.app)

Installation

Sie können unsere AI-gestützte Einrichtung verwenden, um den Plugin zu installieren. Fügen Sie den Capgo-Fähigkeiten Ihrer AI-Werkzeug mithilfe der folgenden Befehl hinzu:

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

Verwenden Sie dann die folgende Anfrage:

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

Wenn Sie die manuelle Einrichtung bevorzugen, installieren Sie das Plugin, indem Sie die folgenden Befehle ausführen und die plattform-spezifischen Anweisungen unten befolgen:

1. Installieren Sie das Paket:

   bun add @capgo/electron-updater

2. Rufen Sie Ihre App-ID aus der Capgo-Oberfläche ab. Wenn Sie noch keine App erstellt haben, führen Sie Folgendes aus:

   npx @capgo/cli@latest init

Einstellungen

Abschnitt mit dem Titel ‘Einstellungen’

Der Electron-Updater erfordert eine Einrichtung in drei Bereichen: Hauptprozess, Vorladeprozedur und Rendererprozess.

Abschnitt mit dem Titel ‘Hauptprozess’

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

Zwischenablage kopieren

preload.ts

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

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

Renderer-Prozess

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

Vorsicht

Sie müssen aufrufen notifyAppReady() innerhalb von 10 Sekunden nach dem App-Start (konfigurierbar über appReadyTimeout. Wenn nicht aufgerufen, nimmt der Updater an, dass die Aktualisierung fehlgeschlagen ist und rollt zurück auf die vorherige Version.

Aktualisierungen überprüfen

Mit autoUpdate: true, überprüft der Updater automatisch nach Aktualisierungen. Sie können auch manuelle Überprüfungen auslösen:

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

Zu Ereignissen hören

Verfolgen Sie den Fortschritt und den Status der Aktualisierung mit Ereignissen:

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

Aktualisierungen bereitstellen

Verwenden Sie die Capgo CLI zum Hochladen von Updates:

# Build your app
npm run build

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

Ihre Electron-Anwendung erkennt automatisch und lädt das neue Bundle bei der nächsten Überprüfung herunter.

Debug-Menü

Aktivieren Sie das Debug-Menü während der Entwicklung:

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

Drücken Sie Ctrl+Shift+D oder Cmd+Shift+D auf einem Mac) um das Debug-Menü zu öffnen und:

• Buchen Sie die aktuelle Bundle-Information
• Zwischen verfügbaren Paketen wechseln
• Zur internen Version zurücksetzen
• Geräte- und Kanalinformationen anzeigen

Konfigurationsoptionen

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

Zukünftige Schritte

• API Referenz - Alle verfügbaren Methoden erkunden
• Kanäle - Über die Auslieferungskanäle erfahren
• Rücksetzungen - Verstehen Sie die Rücksetzschutzfunktion

Weiter zum Thema "Weiter zum Thema Getting Started with Electron Updater"

Wenn Sie "Getting Started with Electron Updater" verwenden Getting Started with Electron Updater um native Plugin-Arbeit zu planen, verbinden Sie es mit Mit @capgo/electron-updater für die native Fähigkeit in Mit @capgo/electron-updater Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins durch Capgo Plugins hinzufügen oder aktualisieren für die Implementierungsdetails in Plugins hinzufügen oder aktualisieren und Ionic Enterprise-Plugin-Alternativen für das Produktworkflow in Ionic Enterprise-Plugin-Alternativen.