__CAPGO_KEEP_0__

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

既に__CAPGO_KEEP_0__を__CAPGO_KEEP_1__で使用している場合、Electron Updaterは同じ__CAPGO_KEEP_2__ Cloud backendを使用しているため、両方のモバイルとデスクトップアプリを同じダッシュボードから管理できます。

既にCapgoをCapacitorで使用している場合、Electron Updaterは同じCapgo Cloud backendを使用しているため、両方のモバイルとデスクトップアプリを同じダッシュボードから管理できます。

前提条件

• Electron 20.0.0 以上
• Node.js 18 以上
• 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 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.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() を呼び出さないと、更新プログラムは失敗と判断し、前のバージョンに戻します。 appReadyTimeout更新を確認しています

Checking for Updates

と 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

__CAPGO_KEEP_1__

__CAPGO_KEEP_2__

__CAPGO_KEEP_4__

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

__CAPGO_KEEP_6__ Ctrl+Shift+D __CAPGO_KEEP_7__ Cmd+Shift+D __CAPGO_KEEP_8__

• __CAPGO_KEEP_9__
• __CAPGO_KEEP_10__
• __CAPGO_KEEP_11__
• デバイスとチャンネル情報を表示

設定オプション

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 チャンネル
• - デプロイチャンネルについて学ぶ ロールバック
• - ロールバック保護について理解する Cloudflare

Electron Updaterから始めて進む

Capacitorを使用している場合 Electron Updaterから始めて進む Capacitorのネイティブプラグインの作業計画に使用するには、Capacitorを @capgo/electron-updaterを使用してネイティブ機能と接続する for the native capability in Using @capgo/electron-updater, Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Capacitorのプラグインの実装詳細 実装詳細の追加または更新の場合の実装詳細について Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの製品ワークフローについて