Mulai Menggunakan Electron Updater

Salin prompt pengaturan dengan langkah instalasi dan panduan markdown lengkap untuk plugin ini.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/electron-updater`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/electron-updater/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

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

Prasyarat

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

Pemasangan

Anda dapat menggunakan Setup Bantuan AI untuk menginstal plugin. Tambahkan keterampilan Capgo 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 Setup Manual, instal plugin dengan menjalankan perintah-perintah berikut dan ikuti instruksi spesifik platform di bawah ini:

Instal paket:
Tampilan jendela terminal
```
bun add @capgo/electron-updater
```
Dapatkan ID Aplikasi Anda dari dashboard Capgo. Jika Anda belum membuat aplikasi, jalankan:
Tampilan Terminal
```
npx @capgo/cli@latest init
```

Pengaturan

Bagian Judul “Pengaturan”

Pengaturan Electron Updater memerlukan pengaturan di tiga tempat: proses utama, skrip pra-muat, dan proses renderer.

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

Salin ke clipboard

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

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

Proses Pengguna Tampilan

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

Mencari Perbaruan

Dengan autoUpdate: true, pembarui otomatis mencari perbaruan. Anda juga dapat memicu periksa 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 pembaruan 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);
});

Mengirimkan Pembaruan

Gunakan Capgo CLI untuk mengunggah pembaruan:

# Build your app
npm run build

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

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

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
Switch antara paket tersedia
Kembali ke versi bawaan
Tampilkan informasi perangkat dan saluran

Pilihan 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 Selanjutnya

API Referensi - Eksplorasi semua metode tersedia
Saluran Bab berjudul “Saluran” (nama fitur saluran rilis Capgo). Halaman: halaman pemasaran solusi Capgo. Peran: label atau item navigasi pendek. Dilihat di: halaman solutions/white-label.astro. Kunci pesan `solutions_white_label_visual_cell2_value` (Solutions White Label Visual Cell2 Value).
Rollbacks - Pahami perlindungan rollback

Teruskan dari Getting Started with Electron Updater

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