はじめる

インストール

npm

npm install @capgo/capacitor-updater
npx cap sync

yarn

yarn add @capgo/capacitor-updater
npx cap sync

pnpm

pnpm add @capgo/capacitor-updater
npx cap sync

bun

bun add @capgo/capacitor-updater
npx cap sync

クイックスタート

ほとんどのユーザーには、プラグインのインストールと Capgo クラウド統合の両方をカバーする メイン クイックスタート ガイド に従うことをお勧めします。

この入門ガイドでは、基礎となるメカニズムを理解したい、またはセルフホスト型アップデートを実装したいと考えている上級ユーザー向けに、プラグインの技術的な詳細に焦点を当てています。

概要

Capacitor アップデータ プラグインを使用すると、Capacitor アプリケーションの無線 (OTA) 更新が可能になります。これにより、アプリ ストアのレビューを通過せずにアプリにアップデートをプッシュできます。

仕組み

1. バンドル ダウンロード: プラグインは更新バンドル (Web アセットを含む ZIP ファイル) をダウンロードします。
2. 抽出: バンドルはデバイスのストレージに抽出されます。
3. ホット リロード: アプリは再起動を必要とせずに新しいバンドルに切り替わります。
4. フォールバック: アップデートが失敗した場合、アプリは以前の動作バージョンに戻ります。

使用モード

1. 自動更新モード (推奨)

自動更新管理でプラグインを使用する最も簡単な方法:

import { CapacitorUpdater } from '@capgo/capacitor-updater';

// Plugin handles everything automatically
// Configure in capacitor.config.ts

capacitor.config.ts に次の内容を追加します。

{
  plugins: {
    CapacitorUpdater: {
      autoUpdate: true,
      updateUrl: 'https://your-update-server.com/api/updates'
    }
  }
}

2. マニュアルモード

更新プロセスを高度に制御するには:

import { CapacitorUpdater } from '@capgo/capacitor-updater';

// Download an update
const bundle = await CapacitorUpdater.download({
  url: 'https://your-server.com/updates/v1.0.1.zip',
  version: '1.0.1'
});

// Set the bundle (will be used on next app start)
await CapacitorUpdater.set({
  id: bundle.id
});

// Or reload immediately
await CapacitorUpdater.reload();

プラットフォーム構成

iOS

追加の構成は必要ありません。プラグインはそのまま使用できます。

Android

追加の構成は必要ありません。プラグインはそのまま使用できます。

基本的な API の使用法

アップデートをダウンロードする

import { CapacitorUpdater } from '@capgo/capacitor-updater';

const bundle = await CapacitorUpdater.download({
  url: 'https://example.com/update.zip',
  version: '1.0.1'
});

console.log('Downloaded bundle:', bundle.id);

アクティブなバンドルを設定する

// Set bundle to be used on next app start
await CapacitorUpdater.set({
  id: bundle.id
});

新しいバンドルでリロード

// Reload app immediately with new bundle
await CapacitorUpdater.reload();

バンドルのリスト

const { bundles } = await CapacitorUpdater.list();
console.log('Available bundles:', bundles);

バンドルを削除する

await CapacitorUpdater.delete({
  id: 'bundle-id'
});

現在のバンドルを取得

const { bundle } = await CapacitorUpdater.current();
console.log('Current bundle:', bundle.version);

イベントリスナー

更新イベントをリッスンします。

import { CapacitorUpdater } from '@capgo/capacitor-updater';

// Listen for download progress
CapacitorUpdater.addListener('download', (info) => {
  console.log('Download progress:', info.percent);
});

// Listen for download completion
CapacitorUpdater.addListener('downloadComplete', (bundle) => {
  console.log('Download complete:', bundle.version);
});

// Listen for update failures
CapacitorUpdater.addListener('updateFailed', (error) => {
  console.error('Update failed:', error);
});

// Listen for successful updates
CapacitorUpdater.addListener('updateAvailable', (info) => {
  console.log('Update available:', info.version);
});

構成オプション

capacitor.config.ts でプラグインを設定します。

{
  plugins: {
    CapacitorUpdater: {
      // Auto-update settings
      autoUpdate: true,
      updateUrl: 'https://api.example.com/updates',

      // Update behavior
      resetWhenUpdate: true,
      directUpdate: false,

      // Version settings
      version: '1.0.0',

      // Security
      allowModifyUrl: false,

      // Stats collection
      statsUrl: 'https://api.example.com/stats',

      // Channel (for Capgo cloud)
      defaultChannel: 'production'
    }
  }
}

統合パターン

Capgo クラウドを使用

始めるための最も簡単な方法:

// Install the Capgo CLI
npm install -g @capgo/cli

// Login to Capgo
npx @capgo/cli login

// Upload your first bundle
npx @capgo/cli bundle upload

// The plugin auto-updates from Capgo cloud

詳細については、メイン クイックスタート ガイド を参照してください。

自己ホスト型アップデート

独自の更新サーバーをホストします。

// Configure your update endpoint
{
  plugins: {
    CapacitorUpdater: {
      autoUpdate: true,
      updateUrl: 'https://your-server.com/api/check-update'
    }
  }
}

サーバーは以下を返すはずです:

{
  "version": "1.0.1",
  "url": "https://your-server.com/updates/1.0.1.zip"
}

詳細については、セルフホスト モード を参照してください。

手動更新フロー

アップデートを完全に制御:

import { CapacitorUpdater } from '@capgo/capacitor-updater';

async function checkAndUpdate() {
  // Check for updates from your server
  const response = await fetch('https://api.example.com/check-update');
  const { version, url } = await response.json();

  // Download the update
  const bundle = await CapacitorUpdater.download({
    url,
    version
  });

  // Notify bundle is ready
  await CapacitorUpdater.notifyAppReady();

  // Set as next version
  await CapacitorUpdater.set({ id: bundle.id });

  // Reload when ready
  await CapacitorUpdater.reload();
}

ベストプラクティス

• アプリが正常に読み込まれたときは、常に notifyAppReady() を呼び出します
• 実稼働環境に移行する前に、更新を徹底的にテストします
• ネットワーク障害に対する適切なエラー処理を実装する
• バージョン番号を一貫して使用する
• ダウンロードを高速化するためにバンドルのサイズを小さく保ちます
• アップデートの成功率を監視する

次のステップ- プラグイン API リファレンス - 完全な API ドキュメント

• プラグイン設定 - すべての設定オプション
• イベント - 利用可能なアップデートイベント
• セルフホストモード - 独自のアップデートサーバーを実行します
• ローカル開発 - アップデートをローカルでテストする
• デバッグ - トラブルシューティング ガイド

サポート

• 既知の問題 - 一般的な問題と解決策
• GitHub ディスカッション - コミュニティ サポート
• Discord - リアルタイムチャット