Memulai dengan Electron Updater

Panduan ini memandu Anda melakukan setup @capgo/electron-updater di aplikasi Electron Anda untuk mengaktifkan update live JavaScript/HTML/CSS.

Tips

Sudah menggunakan Capgo dengan Capacitor? Electron Updater menggunakan backend Capgo Cloud yang sama, jadi Anda bisa mengelola aplikasi mobile dan desktop dari dashboard yang sama.

Prerequisites

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

Instalasi

Anda bisa menggunakan AI-Assisted Setup kami untuk menginstal plugin ini. Tambahkan skill Capgo ke tool AI Anda dengan command 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 memilih Manual Setup, instal plugin dengan menjalankan perintah berikut dan ikuti petunjuk khusus platform di bawah ini:

1. Instal package-nya:

   npm install @capgo/electron-updater

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

   npx @capgo/cli@latest init

Mulai cepat

import { requireUpdater } from '@capgo/electron-updater/renderer';

const updater = requireUpdater();
await updater.notifyAppReady();

Kesalahan umum

• Panggil notifyAppReady() di awal peluncuran—dalam batas timeout yang dikonfigurasi—sebelum inisialisasi UI yang lambat.
• Sesuaikan signing Capgo di main process.
• Atur update channels sebelum rilis.

Setup

Electron Updater memerlukan setup di tiga bagian: main process, preload script, dan renderer process.

Main Process

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 Preload

preload.ts

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

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

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

Peringatan

Anda harus panggilan notifyAppReady() dalam 10 detik setelah aplikasi dijalankan (dapat dikonfigurasi melalui appReadyTimeout). Jika tidak dipanggil, updater akan menganggap update gagal dan melakukan rollback ke versi sebelumnya.

Memeriksa Pembaruan

Dengan autoUpdate: true, updater akan otomatis mengecek pembaruan. Anda juga bisa melakukan pengecekan 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 Event

Pantau progres dan status update dengan event:

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

Deploy Update

Gunakan Capgo CLI untuk upload update:

# Build your app
npm run build

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

Aplikasi Electron Anda akan otomatis mendeteksi dan mendownload bundle baru pada pengecekan 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 di Mac) untuk membuka menu debug dan:

• Lihat info bundle saat ini
• Beralih antar bundle yang tersedia
• Reset ke versi bawaan
• Lihat info perangkat dan channel

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 Berikutnya

• Referensi API - Jelajahi semua metode yang tersedia
• Channel - Pelajari tentang deployment channels
• Rollback - Pahami perlindungan rollback

Lanjutkan dari Getting Started dengan Electron Updater

Jika Anda menggunakan Memulai dengan Electron Updater untuk merencanakan pekerjaan plugin native, hubungkan dengan Menggunakan @capgo/electron-updater untuk kapabilitas native saat menggunakan @capgo/electron-updater, Direktori Plugin Capgo untuk alur kerja produk di Direktori Plugin Capgo, Plugin Capacitor oleh Capgo untuk detail implementasi pada Capacitor Plugins oleh Capgo Menambahkan atau Memperbarui Plugin untuk detail implementasi di Menambahkan atau Memperbarui Plugin, dan Alternatif Plugin Ionic Enterprise untuk alur kerja produk dalam Alternatif Plugin Ionic Enterprise.