내용으로 건너뛰기
Capgo - Capacitor 앱에 라이브 업데이트를 제공하는 Capgo Capgo

Electron Updater 시작하기

GitHub

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

사전 요구 사항 섹션

Electron 20.0.0 이상
  • Node.js 18 이상
  • __CAPGO_KEEP_0__
  • 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();
  }
});

프리로드 스크립트

Section titled “Preload Script”
preload.ts
import { exposeUpdaterAPI } from '@capgo/electron-updater/preload';


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

Renderer Process

Section titled “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());

업데이트 확인

업데이트 확인

업데이트 확인 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 (또는 Cmd+Shift+D Mac에서 ) 디버그 메뉴를 열고:

  • 현재 번들의 정보를 확인
  • __CAPGO_KEEP_0__
  • 배포 가능한 패키지 간에 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)
});

클립보드에 복사

다음 단계

Electron Updater로 시작하는 다음 단계

Electron Updater로 시작하는 다음 단계

이러한 기능을 사용 중이라면 Electron Updater로 시작하는 Capacitor의 @__CAPGO_KEEP_0__/electron-updater Capacitor의 @capgo/electron-updater capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리 Capgo 플러그인들에 의해 __CAPGO_KEEP_1__ Capacitor Plugins by Capgo Capgo 플러그인 Capacitor의 구현 세부 정보를 위해 Capgo에 의해 플러그인 추가 또는 업데이트 Capgo 플러그인 __CAPGO_KEEP_0__의 구현 세부 정보를 위해 플러그인 추가 또는 업데이트, 그리고 아이오닉 엔터프라이즈 플러그인 대체 Capgo 제품 워크플로우에 대한 아이오닉 엔터프라이즈 플러그인 대체에 대해