Electron Updater 시작하기

이 가이드는 Electron 애플리케이션에 대해 실시간 JavaScript/HTML/CSS 업데이트 기능을 활성화하는 방법을 안내합니다. @capgo/electron-updater 팁

__CAPGO_KEEP_0__과 __CAPGO_KEEP_1__을 이미 사용 중이라면, Electron Updater는 동일한 __CAPGO_KEEP_2__ Cloud 백엔드를 사용하므로 모바일 및 데스크톱 앱을 동일한 대시보드에서 관리할 수 있습니다.

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.

필수 조건

• Node.js 18 이상
• Prerequisites
• A Capgo 계정 ( Capgo에 가입하세요.) capgo.app)

설치

플러그인을 설치하기 위해 AI-Assisted Setup을 사용할 수 있습니다. AI 도구에 Capgo 기능을 추가하려면 다음 명령어를 사용하세요:

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

다음 명령어를 사용하세요:

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

만약 Manual Setup을 선호한다면, 플러그인을 설치하기 위해 다음 명령어를 실행하고 아래의 플랫폼별 지침을 따르세요:

1. 패키지를 설치하세요:

   bun add @capgo/electron-updater

2. Capgo에서 앱 ID를 가져옵니다. 아직 앱을 생성하지 않았다면 다음 명령어를 실행하세요:

   npx @capgo/cli@latest init

설정

Electron Updater는 세 가지 위치에서 설정이 필요합니다: 메인 프로세스, 프리로드 스크립트, 렌더러 프로세스.

메인 프로세스

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

프리로드 스크립트

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

당신은

해야 호출 10 초 이내에 앱 시작 시 (설정 가능) notifyAppReady() launch (configurable via appReadyTimeout. 만약 호출되지 않으면 업데이터는 업데이트가 실패한 것으로 간주하고 이전 버전으로 롤백합니다.

업데이트 확인

업데이트 확인 섹션 autoUpdate: true업데이트 확인 섹션

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

업데이트를 위해, 업데이터는 자동으로 업데이트를 확인합니다. 또한 수동 확인을 트리거할 수 있습니다:

이벤트를 듣다

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

이벤트를 듣다

업데이트를 업로드하는 데 사용하는 Capgo CLI:

# Build your app
npm run build

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

다음 체크 시 Electron 앱은 자동으로 새로운 번들을 다운로드합니다.

디버그 메뉴

개발 중 디버그 메뉴를 활성화:

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

Mac의 경우 Ctrl+Shift+D (또는 Cmd+Shift+D 디버그 메뉴를 열기 위해

• 현재 번들 정보를 확인
• __CAPGO_KEEP_0__ Reference
• Channels
• Next Steps

Configuration Options

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

Copy to clipboard

• API Reference Switch between available bundles
• - Explore all available methods - Learn about deployment channels
• 롤백 - 롤백 보호 기능 이해

Electron Updater로 시작하는 다음 단계

Electron Updater로 시작하는 경우 Electron Updater로 시작하는 방법 Capgo의 @__CAPGO_KEEP_0__/electron-updater Capgo의 @capgo/electron-updater capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리 Capgo 플러그인들에 의해 __CAPGO_KEEP_1__ Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, 플러그인 추가 또는 업데이트 Capgo 플러그인 추가 또는 업데이트에 대한 구현 세부 정보, Ionic Enterprise 플러그인 대체 Ionic Enterprise 플러그인 워크플로에 대한