내용으로 건너뛰기
Capgo - Capacitor 앱용 라이브 업데이트스 Capgo

Electron Updater 시작하기

GitHub

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

Prerequisites

필수 조건

설치

설치

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는 세 가지 위치에서 설정이 필요합니다: 메인 프로세스, 로드 전 스크립트, 렌더러 프로세스.

설정

Electron Updater는 메인 프로세스, 프리로드 스크립트, 렌더러 프로세스 세 곳에서 설정이 필요합니다.
메인 프로세스
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());

업데이트 확인

업데이트 확인 섹션

그리고 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);
});

업데이트 배포 섹션

업데이트 배포

Use the Capgo CLI to upload updates:

터미널 창
# Build your app
npm run build


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

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

Debug 메뉴

Debug 메뉴 섹션

개발 중에는 Debug 메뉴를 활성화하세요:

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

Mac에서 Ctrl+Shift+D (또는 Cmd+Shift+D Debug 메뉴를 열고:

  • 현재 번들을 확인하세요
  • 사용 가능한 번들을-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 시작하기에서 계속

Capgo를 사용 중이라면 Electron Updater 시작하기 Capgo 플러그인 개발을 계획하고자 할 때 @capgo/전자 업데이트 사용 Capacitor의 내장 업데이트기능을 사용하기 위해 @capgo/electron-updater를 사용합니다. Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리에서 제품 워크플로우를 위해 Capacitor 플러그인은 Capgo에서 제공합니다. Capgo 플러그인 구현 세부 사항은 Capacitor 플러그인에 의해 Capgo에 의해 구현됩니다. 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트 구현 세부 사항에 대해 아이오닉 엔터프라이즈 플러그인 대체 아이오닉 엔터프라이즈 플러그인 대체 제품 워크플로에 대해