コンテンツにスキップ
Capgo - Capacitor アプリ用のリアルタイムの更新 Capgo

Electron アップデーターで始める

このガイドでは、ElectronアプリケーションにライブJavaScript/HTML/CSS更新を有効にするために設定方法を説明します。 @capgo/electron-updater Tip

前提条件

Electron 20.0.0 またはそれ以上
  • Node.js 18 またはそれ以上
  • Already using __CAPGO_KEEP_0__ with __CAPGO_KEEP_1__? The Electron Updater uses the same __CAPGO_KEEP_2__ Cloud backend, so you can manage both mobile and desktop apps from the same dashboard.
  • A Capgo account (sign up at capgo.app)

インストール

「インストール」のセクション

  1. パッケージをインストールしてください：

    ターミナル画面
    bun add @capgo/electron-updater

  2. Get your App ID from the Capgo dashboard. If you haven’t created an app yet, run:

    ターミナル画面
    npx @capgo/cli@latest init

セットアップ

「セットアップ」のセクション

Electronのアップデート用の設定は、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.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());

With Capgo, the updater automatically checks for updates. You can also trigger manual checks:

You must call within 10 seconds of app launch (configurable via __CAPGO_KEEP_0__). If not called, the updater assumes the update failed and rolls back to the previous version.

Checking for Updates autoUpdate: trueSection titled “Checking for Updates”

// 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 現在のバンドル情報を表示

  • 利用可能なバンドル間を切り替え
  • バイトインバウンドバージョンにリセット
  • デバイスとチャンネル情報を表示
  • 設定オプション

「設定オプション」セクション

クリップボードにコピー
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)
});

次のステップ

「次のステップ」のセクション