Electron Updater の導入ガイド

このガイドでは、セットアップの手順を説明します @capgo/electron-updater ElectronアプリケーションでJavaScript/HTML/CSSのLive Updateを有効にするための手順です。

ヒント

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

前提条件

• Electron 20.0.0 以上
• Node.js 18 以上
• Capgo アカウント（以下から登録） capgo.app)

インストール

AI アシストによるセットアップを使用してプラグインをインストールできます。以下のコマンドを使用して、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. パッケージをインストール：

   npm install @capgo/electron-updater

2. Capgo のダッシュボードから App ID を取得してください。まだアプリを作成していない場合は、以下を実行します：

   npx @capgo/cli@latest init

クイックスタート

import { requireUpdater } from '@capgo/electron-updater/renderer';

const updater = requireUpdater();
await updater.notifyAppReady();

よくある落とし穴

• 呼び出し notifyAppReady() UIの初期化が遅くなる前に、設定されたタイムアウト時間内に、起動直後に行います。
• メインプロセスでの Capgo の署名を一致させます。
• リリース前にアップデートチャネルを設定してください。

セットアップ

Electron Updaterを使用するには、メインプロセス、preloadスクリプト、およびレンダラープロセスの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());

注意

お客様は 必ず 呼び出す notifyAppReady() アプリ起動から10秒以内（{}で設定可能） 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アプリは、次回のチェック時に新しいbundleを自動的に検出し、ダウンロードします。

デバッグメニュー

開発中にデバッグメニューを有効にする方法：

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

を押して Ctrl+Shift+D （または Cmd+Shift+D （Macの場合は）デバッグメニューを開き、以下を実行します：

• 現在のbundle情報の表示
• 利用可能なbundleの切り替え
• 組み込みバージョンへのリセット
• デバイスとchannel情報の表示

設定オプション

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/electron-updater の使用におけるネイティブ機能については、 Capgo プラグインディレクトリ Capgo プラグインディレクトリでのプロダクトワークフロー向けに、 Capgo による Capacitor プラグイン Capgo による Capacitor プラグインの実装詳細については、 プラグインの追加・更新 プラグインの追加・更新に関する実装の詳細については、 Ionic Enterprise プラグインの代替案 Ionic Enterprise プラグインの代替案における製品ワークフローについては、