メインコンテンツにジャンプ
チュートリアル

Capgoの更新チャネルを実行時で切り替える方法: チャンネルサーフィング

Capgoの実行時チャネル切り替えで、特定のユーザーに即時で変更を配信することができます。 Capacitorアプリを再インストールすることなく、更新チャネルを切り替えることができます。

マーティン・ドナディュー

マーティン・ドナディュー

コンテンツマーケティング

Capgoの更新チャネルを実行時で切り替える方法: チャンネルサーフィング

この機能を使用すると、特定のユーザーに直接変更を配信し、即時フィードバックを取得することができます。TestFlightまたはGoogle Playから新しいビルドをダウンロードおよびインストールする必要がなくなるのです。

私は、顧客から改善を求められたことがありましたが、実装が可能でした。しかし、結果を顧客の手元に届けるには、すべてのユーザーにアップデートを配信する(リスクが高い)か、または顧客用に一時的なビルドを作成する(両方にとって面倒)という選択肢しかありませんでした。

開発者は、非技術的なステークホルダー、QA、または適切な場合のユーザー全体に異なるアップデートを提供できるようにしたいと考えていました。

プロダクションビルドは、ワークインプログレスバージョンに切り替え、フィードバックを収集し、再びプロダクションに戻ることができませんでした。

その機能が チャンネルサーフィング によって実現されます。

アプリがユーザーのデバイスにインストールされている場合、実行時にはアップデートチャンネルを切り替えることができ、プロダクションアプリをレビューと反復のための柔軟なスペースに変えることができます。

Update channels are how Capgo targets updates to specific builds. Each build is associated with a channel, and that channel determines which updates it will receive.

アップデートチャンネルの理解 preview アップデートチャンネルは、__CAPGO_KEEP_0__が特定のビルドにアップデートをターゲットにする方法です。各ビルドはチャンネルと関連付けられており、そのチャンネルはどのアップデートを受け取るかを決定します。 production. 過去、チャンネルを切り替えるには、別のネイティブビルドをインストールするか、ダッシュボードを通じてデバイスの割り当てを手動で変更する必要がありました。

チャンネルは Capgo で、以下の機能を提供します。

  • 特定のユーザーグループに異なる機能を提供
  • A/Bテストを実行するためにユーザーを異なるチャンネルに割り当てる
  • 新機能を段階的にロールアウトする
  • ベータテストプログラムを作成する
  • 個々のユーザーを通じて生産問題をデバッグする

更新チャンネルについては、 Capgo のチャンネルドキュメント 詳しくはこちら。

チャンネルサーフィングとは何か?

チャンネルサーフィングは、インストール済みのアプリが、再インストールせずに異なる更新ストリームからデータを取得できる機能です。インストール済みのアプリは、実行時には更新チャンネルを切り替えることができ、切り替えたチャンネルから更新を受け続けることができます。ただし、アプリがアンインストールされるか、別のチャンネルに切り替えるまでです。

In practice, this means a product owner or QA can switch a production build to, for example, a preview channel, try out the latest changes. When they are done testing, they switch back to production again. There’s no need for a reinstall or a separate preview build.

Cloudflare

Capacitor

Before you can try channel surfing, your project needs to be configured with Capgo Live Updates. To set that up, follow the Before you can try channel surfing, your project needs to be configured with Capgo Live Updates. To set that up, follow the.

Capgo quickstart guide The only setup required for channel surfing is enabling “Allow devices to self associate” on each channel you want to switch to in the code dashboard.

No API changes or config modifications needed beyond that.

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

await CapacitorUpdater.setChannel({ channel: 'your-channel' });

This sets the channel that is used when querying Capgo for updates. setChannel APIについてもっと学びましょう.

即時チャネル切り替え (v5.34.0+)

プラグインバージョン 5.34.0、6.34.0、7.34.0、または 8.0.0 から始めて (あなたのメジャーバージョンに応じて)、 setChannel() は大幅に高速化され、機能が異なります:

  1. バックエンド検証 (読み取り専用): Capgo バックエンドにリクエストを送信して、チャネルが許可されているかどうかを検証します
  2. ローカルストレージの更新: 検証が成功すると、チャネルはデバイスのローカルストレージに保存されます
  3. 即時効果: 次の更新チェックでは、新しいチャネルが即座に使用されます

以前は setChannel() バックエンドデータベース(ダッシュボードやAPIの変更など)にチャンネルオーバーライドを保存しました。デバイスは、2分以内に新しいチャンネルが認識されるまで、バックエンドのリプリカションを待つ必要がありました。新しい動作は、バックエンドからのみ読み取り(検証用)し、ローカルに保存するため、チャンネル切り替えは即時になります。

完全なチャンネル切り替えフロー

より良いユーザー体験を提供するために、チャンネルを切り替えただけでは、次のアプリ再起動を待つだけではありません。一般的なアプローチは、すぐにアップデートを確認し、利用可能であればダウンロードし、アプリを再読み込みして、ユーザーが選択したチャンネルのアップデートに直接到達するようにすることです。

一般的なフローは次のようになります。

  1. チャンネルを変更(setChannel)
  2. アップデートを確認(getLatest)
  3. アップデートを取得および適用(download, set または next)
  4. アプリを再読み込み(必要に応じて)reload)

ここに完全な例があります。

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

async function switchChannel(selectedChannel: string) {
  try {
    // 1. Set the updates channel (with optional auto-update trigger)
    await CapacitorUpdater.setChannel({
      channel: selectedChannel,
      triggerAutoUpdate: true // Immediately check for updates
    });

    console.log(`Switched to channel: ${selectedChannel}`);

    // If you want more control, handle the update manually:
    // const latest = await CapacitorUpdater.getLatest();
    // if (latest.url) {
    //   const bundle = await CapacitorUpdater.download({
    //     url: latest.url,
    //     version: latest.version
    //   });
    //   await CapacitorUpdater.set({ id: bundle.id });
    // }

  } catch (error) {
    console.error('Failed to switch channel:', error);
  }
}

// Switch to the beta channel
switchChannel('beta');

このフローをどのように構造化するかはあなた次第です。ステップを複数のインタラクションに分割したり、すべてを一度に実行したりすることができます。どのように構造化するかはあなた次第ですが、失敗を考慮するようにしましょう。ネットワークの問題や無効なチャンネルなど、更新を適用できない原因は何でもあります。

唯一の要件:自己割り当てを有効にする

このようにするだけです。チャンネルサーフィングを有効にするには。 アプリがチャンネルを切り替えることができるようになる前に、 setChannel(), you must enable self-assignment for that channel in the Capgo dashboard:

  1. あなたの__CAPGO_KEEP_0__ダッシュボードの チャンネル section in your Capgo dashboard
  2. チャンネル名をクリックしてください。
  3. 「デバイスが自己割り当てを許可する」 を有効にします。
  4. 変更を保存します。

チャンネル設定で自己割り当てを有効にします。

それだけです。アプリの設定変更は必要ありません。 defaultChannel 設定が必要です。チャンネルを切り替えることを許可したいユーザーがいるチャンネルに、自我割り当てを有効にします。

この設定が無効になっている場合、チャンネルを呼び出す任何試みは失敗し、イベントが発生します。 setChannel() チャンネルを呼び出す channelPrivate イベント

利用可能なチャンネルのリスト

自我割り当てが有効になっているチャンネルのリストを取得できます。

const { channels } = await CapacitorUpdater.listChannels();

console.log('Available channels:', channels.map(c => c.name));
// Use this to build a channel selector UI

現在のチャンネルの取得

現在のデバイスが割り当てられているチャンネルを確認できます。

デフォルトチャンネルへの戻り

const { channel } = await CapacitorUpdater.getChannel();

console.log('Current channel:', channel);

特定のチャンネルに割り当てられているデバイスを解除し、デフォルトに戻ります。

デバイスが特定のチャンネルに割り当てられていることを解除し、デフォルトに戻ります。

await CapacitorUpdater.unsetChannel({});

この設定が無効になっている場合、チャンネルを呼び出す任何試みは失敗し、イベントが発生します。 defaultChannel config またはクラウドのデフォルト設定に記載されている。

チャンネルサーフィングのテスト方法

チャンネルサーフィングの実行方法を確認するには、リリースビルドが必要です - @capgo/capacitor-updater APIはリリースビルド用に設計されており、デバッグビルドでは通常、開発サーバーからJavaScriptを読み込むため、通常の更新フローを回避します。

前提条件

チャンネルサーフィングの唯一の要件は、各チャンネルで「デバイスを自律的に関連付ける」ことを許可することです。 各チャンネルでチャンネルサーフィングを許可するには、「デバイスを自律的に関連付ける」にチェックを入れてください。アプリの設定変更は必要ありません。 テストビルドの作成

通常のビルド作業を行ってください:

次に、XcodeまたはAndroid Studioを使用してネイティブビルドを作成するか、CI/CDパイプラインを使用してください。アプリは、__CAPGO_KEEP_0__ダッシュボードでクラウドのデフォルト設定されているチャンネルから起動します。

bun run build && npx cap sync

Then create your native builds using Xcode or Android Studio, or use your CI/CD pipeline. The app will start on whichever channel is set as the cloud default in your Capgo dashboard.

__CAPGO_KEEP_0__はリリースビルド用に設計されており、デバッグビルドでは通常、開発サーバーからJavaScriptを読み込むため、通常の更新フローを回避します。

__CAPGO_KEEP_0__をインストールした後、異なるチャネルにアップデートを公開します。

# Publish to preview channel
npx @capgo/cli@latest bundle upload --channel preview

# Publish to production channel
npx @capgo/cli@latest bundle upload --channel production

アプリ内でチャネルを切り替えるUIに移動し、チャネル切り替えをトリガーします。アプリは選択したチャネルからアップデートを取得し、更新されたアップデートにリロードします。

チャネル切り替えUIの作成

チャネルサーフィンは、通常、すべてのアプリユーザーに公開したくない機能です。たとえば、認証済み従業員のみが利用できるボタンがあり、プレビュー チャネルにアプリを切り替えることができます。

チャネル切り替えの例として、次のReactコンポーネントがあります。

import { useState, useEffect } from 'react';
import { CapacitorUpdater } from '@capgo/capacitor-updater';

export function ChannelSwitcher() {
  const [currentChannel, setCurrentChannel] = useState<string>('');
  const [availableChannels, setAvailableChannels] = useState<string[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    loadChannelInfo();
  }, []);

  async function loadChannelInfo() {
    const { channel } = await CapacitorUpdater.getChannel();
    setCurrentChannel(channel || 'default');

    const { channels } = await CapacitorUpdater.listChannels();
    setAvailableChannels(channels.map(c => c.name));
  }

  async function handleChannelSwitch(channel: string) {
    setIsLoading(true);
    try {
      await CapacitorUpdater.setChannel({
        channel,
        triggerAutoUpdate: true
      });
      setCurrentChannel(channel);
      // App will update in background or on next restart
    } catch (error) {
      console.error('Failed to switch channel:', error);
    } finally {
      setIsLoading(false);
    }
  }

  return (
    <div>
      <p>Current channel: {currentChannel}</p>
      <div>
        {availableChannels.map(channel => (
          <button
            key={channel}
            onClick={() => handleChannelSwitch(channel)}
            disabled={isLoading || channel === currentChannel}
          >
            Switch to {channel}
          </button>
        ))}
      </div>
    </div>
  );
}

チャネルサーフィンに関する注意事項

これらはすべてチャネルサーフィンに特有のものではありませんが、実行時チャネル切り替えを開始するとすぐに現れます。

実行時バージョン不一致

Capgoのアップデートはネイティブアプリのバージョンと紐付けされています。ネイティブアプリのバージョンとインストール済みアプリのバージョンが一致しない場合、更新はダウンロードされずに適用されません。チャネルサーフィンを実行すると、チャネルを切り替えるとアップデートが適用されないのに、チャネルにアップデートが存在している場合にこの問題が発生します。

この場合、アップデートは異なるネイティブアプリのバージョンから公開された可能性があります。ネイティブアプリのバージョンとチャネルにバンドルされたバージョンが互換性があることを確認してください。

アップデートの削除または取り消し

アプリがチャネルにアップデートをダウンロードした場合、Capgo ダッシュボードからアップデートを削除しても、すでにアップデートをダウンロードしているデバイスからアップデートを削除しないことに注意してください。削除はアップデートのダウンロードを停止するだけです。 将来 ダウンロード。

バージョンを更新した後でも、悪い更新を取り消すには、同じチャンネルに知られている良い更新を公開する必要があります。この作業により、チャンネルの履歴の先頭に新しい更新が作成され、クライアントはこれを最新のバージョンとして適用し、代わりに適用します。

Capgoは、クライアントに前の安定した更新を再適用するか、ビルドに埋め込まれた更新に戻るように指示するロールバックメカニズムも提供します。

データ移行に関する考慮事項

チャンネルを切り替えることは、実行中のアプリのJavaScriptバンドルを変更します。アプリがチャンネル間で互換性のないマイグレーションやデータの形状に依存している場合、前後両方のチャンネル間で切り替えることで問題が生じる可能性があります。

例えば、ベータアップデートがデータベースのマイグレーションを適用した場合、プロダクションバージョンは新しいスキーマを理解できない可能性があります。開発者は、更新がチャンネル間で安全に切り替えられるようにするか、必要に応じて切り替えを一方向に制限する必要があります。

チャンネルサーフィングがモバイルのイテレーションを向上させる理由

チャンネルサーフィングは、特に生産環境で変更を迅速にレビューする必要がある場合に特に便利です。

迅速な検証

緊急のバグ修正が検証される必要がある場合、チャンネルサーフィングを使用すると、変更が指定されたユーザーにのみ適用され、検証されることができます。検証が完了したら、生産環境に広く展開できます。

ステークホルダーによるレビュー

A product owner or QA can switch their installed production build to another update channel, verify the fix or feature, and then switch back again once they’re done.

Streamlined Testing

This makes it easier to involve non-technical stakeholders in review and decision-making, while keeping the workflow smooth. A single production build becomes a flexible tool for testing, feedback, and validation.

Use Cases

  • QA Testing: QA チームは機能ブランチ間で切り替えることができます。
  • Beta Programs: ユーザーはリリース前に早期アクセスを受けるためのベータチャンネルに参加することができます。
  • Stakeholder Review: プロダクトオーナーはリリース前に変更をプレビューすることができます。
  • A/B Testing: ユーザーを異なるチャンネルに割り当てて実験を行うことができます。
  • デバッグ:特定のユーザーをデバッグチャネルに切り替えて問題を診断する

チャネル変更方法の比較

方法効果時間保存先使用例
setChannel() プラグインから即時デバイスのみ (ローカル)アプリ内でユーザーが行うチャネル切り替え
デバイスのオーバーライド (ダッシュボード)最大 2 分バックエンドデータベース特定のデバイスのための管理者が行う変更
API チャンネル割り当て最大 2 分バックエンドデータベース自動化されたバックエンド統合

ユーザー体験の向上に最適なチャンネル切り替えUIを作成するには、常にプラグインの setChannel() メソッドを使用してください。

ベストプラクティス

  1. アクセス制限: 通常、チャンネルサーフィングは内部用途です - すべてのユーザーに公開しないでください
  2. エラーを処理する: チャネルを切り替えるときは、常にエラーを優雅に処理する
  3. 互換性を検証する: インストールされているネイティブ版と異なるチャネルでの更新が互換性があることを確認する
  4. チャネルを記録する: 各チャネルが何のためにあるかを明確に記録する
  5. 使用状況を監視する: デバッグのために、どのデバイスがどのチャネルにいるかを追跡する

リソース

Conclusion

Capacitor アプリの開発を通じて、チャンネルサーフィングは、プロダクションビルドを固定エンドポイントとして扱うのではなく、テスト、検証、迅速な開発のための柔軟なツールとして変える。

Cloudflare の最近のプラグインバージョンで導入された即時チャンネル切り替えにより、体験は今やすみやかになりました。ユーザーはチャンネルを切り替え、すぐに新しいチャンネルからの更新を受け取ることができます。

バグ修正の検証、ベータプログラムの実行、特定のユーザーと問題のデバッグなど、チャンネルサーフィングは、正しいアップデートを正しいユーザーに正しいタイミングで配信できるようにします。

Channel Surfing for Capgo を続けてください: Capgo を実行時でアップデートチャンネルを切り替える方法

__CAPGO_KEEP_0__ を使用している場合 Channel Surfing for Capgo: Capgo を実行時でアップデートチャンネルを切り替える方法 を使用して、チャンネルルーティングの計画とステージドロールアウトを計画し、それを Channels と接続してください。 Channels __CAPGO_KEEP_0__の実装詳細については、 __CAPGO_KEEP_1__ __CAPGO_KEEP_0__の実装詳細については、 __CAPGO_KEEP_2__ __CAPGO_KEEP_0__の製品ワークフローについては、__CAPGO_KEEP_2__、 __CAPGO_KEEP_3__の製品ワークフローについては、__CAPGO_KEEP_3__。 __CAPGO_KEEP_4__

リアルタイムでCapacitorアプリの更新

ウェブ層のバグが生じた場合、Capgoを通して修正を配信するのではなく、アプリストアの承認待ちの日数を待たずに、修正を配信する。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路で進む。

スタートする

ブログの最新記事

Capgoは、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を提供します。