Getting Started dengan Electron Updater

Petunjuk ini akan membantu Anda mengatur pengaturan @capgo/electron-updater untuk memungkinkan pembaruan JavaScript/HTML/CSS secara langsung di aplikasi Electron Anda.

Tip

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.

Prasyarat

• Electron 20.0.0 atau lebih tinggi
• Node.js 18 atau lebih tinggi
• Akun Capgo (daftar di capgo.app)

Pemasangan

Anda dapat menggunakan Pengaturan Bantuan AI kami untuk menginstal plugin. Tambahkan Capgo kemampuan ke alat AI Anda menggunakan perintah berikut:

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

Lalu gunakan prompt berikut:

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

Jika Anda lebih suka Pengaturan Manual, instal plugin dengan menjalankan perintah-perintah berikut dan ikuti instruksi spesifik platform di bawah ini:

1. Instal paket:

   bun add @capgo/electron-updater

2. Dapatkan ID Aplikasi Anda dari dashboard Capgo. Jika Anda belum membuat aplikasi, jalankan:

   npx @capgo/cli@latest init

Setup

Pembaruan Electron memerlukan pengaturan di tiga tempat: proses utama, skrip pra-muat, dan proses render.

Proses Utama

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

Skrip Pra-Muat

preload.ts

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

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

[Renderer Process]

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

Peringatan

Anda harus memanggil notifyAppReady() dalam waktu 10 detik setelah aplikasi diluncurkan (dapat dikonfigurasi melalui appReadyTimeout). Jika tidak dipanggil, pembarui akan menganggap pembaruan gagal dan kembali ke versi sebelumnya.

Mencari Pembaruan

Dengan autoUpdate: true, pembarui otomatis memeriksa pembaruan secara otomatis. Anda juga dapat memicu pembarui manual:

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

Mendengarkan Kejadian

Ikuti kemajuan dan status pembarui dengan kejadian:

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

Mengaktifkan Pembarui

Gunakan Capgo CLI untuk mengunggah pembarui:

# Build your app
npm run build

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

Aplikasi Electron Anda akan secara otomatis mendeteksi dan mengunduh bundle baru pada cek berikutnya.

Menu Debug

Aktifkan menu debug selama pengembangan:

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

Tekan Ctrl+Shift+D (atau Cmd+Shift+D pada Mac) untuk membuka menu debug dan:

• Lihat informasi bundle saat ini
• Pilih antara bundle yang tersedia
• Kembalikan ke versi bawaan
• Lihat informasi perangkat dan saluran

Opsi Konfigurasi

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

Langkah-Langkah Selanjutnya

• API Referensi - Eksplorasi semua metode yang tersedia
• Saluran - Pelajari tentang saluran pengiriman
• Pulih Kembali - Pahami perlindungan rollback

Teruskan dari Getting Started dengan Electron Updater

Jika Anda menggunakan Mulai Berjalan dengan Electron Updater untuk merencanakan pekerjaan plugin native, hubungkannya dengan Menggunakan @capgo/electron-updater untuk kemampuan native di Menggunakan @capgo/electron-updater, Direktori Plugin Capgo untuk alur kerja produk di Direktori Plugin Capgo, Plugin-Plugin Capacitor oleh Capgo untuk detail implementasi di Plugin-Plugin Capacitor oleh Capgo, Menambahkan atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin, dan Alternatif Plugin Perusahaan Ionic untuk alur produk dalam Alternatif Plugin Perusahaan Ionic.