Electron Updater 시작하기

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

팁

Capgo을 이미 사용 중이고 Capacitor을 사용 중이라면? Electron Updater는 Capgo Cloud 백엔드를 사용하기 때문에 모바일 및 데스크톱 앱을 동일한 대시보드에서 관리할 수 있습니다.

필수 조건

• Electron 20.0.0 이상
• Node.js 18 이상
• 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 앱 아이디를 얻으려면 Capgo 대시보드에 가세요. 아직 앱을 만들지 않았다면 다음 명령어를 실행하세요:

   npx @capgo/cli@latest init

설정

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

메인 프로세스

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

(또는 Ctrl+Shift+D Mac에서)를 눌러 디버그 메뉴를 열고: Cmd+Shift+D 현재 번들의 정보를 확인하세요

• Debug Menu
• 선택 가능한 패키지 간에 switch합니다.
• 빌트인 버전으로 리셋합니다.
• 디바이스 및 채널 정보를 봅니다.

설정 옵션

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 참조 - 사용 가능한 모든 방법을 탐색합니다.
• 채널 - 배포 채널에 대해 배웁니다.
• 역전 - 역전 보호 이해

Electron Updater로 시작하는 다음 단계로 계속

Electron Updater로 시작하는 경우 Electron Updater로 시작하는 @__CAPGO_KEEP_0__/electron-updater를 사용하여 @capgo/electron-updater를 사용하여 @capgo Plugin Directory 내의 네이티브 기능과 연결 @capgo Plugin Directory @Capgo Plugin Directory 내의 제품 워크플로우 @Capgo Plugins by @__CAPGO_KEEP_1__ Capacitor Plugins by Capgo Capgo 플러그인 구현 세부 정보에 대해 Capacitor 플러그인에 의해 Capgo 에서 플러그인 추가 또는 업데이트 Capgo 플러그인 구현 세부 정보에 대해 플러그인 추가 또는 업데이트, 그리고 아이오닉 엔터프라이즈 플러그인 대체 Capgo 제품 워크플로에 대해 아이오닉 엔터프라이즈 플러그인 대체.