__CAPGO_KEEP_0__

이 가이드는 @capgo/electron-updater 를 사용하여 Electron 애플리케이션에 대해 설정하는 방법을 안내합니다.

팁

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.

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

• 사전 요구 사항
• Electron 20.0.0 이상 또는 higher Node.js 18 이상
• Capgo 계정 ( capgo.app)

설치

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.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초 이내에 호출해야 합니다 (설정 가능 via ). 업데이트 실패로 인해 이전 버전으로 롤백됩니다. 업데이트 확인 notifyAppReady() Checking for Updates appReadyTimeout업데이트를 자동으로 확인합니다. 또한 수동 확인을 트리거할 수 있습니다:

클립보드에 복사하기

업데이트 확인 autoUpdate: trueWith

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

(또는 Ctrl+Shift+D Mac에서) 디버그 메뉴를 열기 위해 Cmd+Shift+D 디버그 메뉴를 열고:

• 현재 번들 정보 보기
• 사용 가능한 번들 간에 전환
• builtin 버전으로 초기화
• 디바이스 및 채널 정보 보기

설정 옵션

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

다음 단계

• API Reference - 모든 사용 가능한 메서드를 탐색하십시오
• Channels - 배포 채널에 대한 정보를 학습하십시오
• Rollbacks - 롤백 보호에 대한 이해를 얻으십시오

Getting Started with Electron Updater에서 계속 진행하십시오

Capgo를 사용 중이라면 Getting Started with Electron Updater 자연 플러그인 작업을 계획하기 위해 연결하세요. Using @capgo/electron-updater 자연 기능을 위한 Using @capgo/electron-updater Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리 내의 제품 워크플로우 Capacitor 플러그인들에 의해 Capgo Capacitor 플러그인들에 의해 Capgo의 구현 세부 사항 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트의 구현 세부 사항 Ionic Enterprise 플러그인 대체 Ionic Enterprise 플러그인 대체의 제품 워크플로우