メインコンテンツにジャンプ
Tutorial

Channel Surfing for Capgo: How to Switch Update Channels at Runtime

Ship changes to specific users instantly with Capgo's runtime channel switching. Switch update channels without reinstalling your Capacitor app.

Martin Donadieu

Martin Donadieu

Content Marketer

Channel Surfing for Capgo: How to Switch Update Channels at Runtime

Have you ever wished you could ship a change directly to a specific user for their immediate review and feedback - without asking them to download and install a new build from TestFlight or Google Play?

I’ve had customers request improvements that I was able to quickly implement, but getting the results into their hands to validate meant shipping an update to all users (risky for an experimental change) or creating a one-off build specifically for the customer (a chore for both of us).

What was missing was flexibility. Developers wanted to be able to serve different updates to different groups of users, such as non-technical stakeholders, QA, or the entire user base when appropriate.

There was no way for a production build to switch to a work-in-progress version, gather feedback, and then return to production.

That’s what channel surfing enables. An app installed on a user’s device can switch update channels at runtime, turning a production app into a flexible space for review and iteration rather than a fixed endpoint. This is especially useful for non-technical stakeholders working with production apps, allowing them to test changes and give feedback directly in the app they already have installed.

Update channels

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.

Update channelsは preview __CAPGO_KEEP_0__ production

Channels in Capgo allow you to:

  • channel
  • をPublishすることができます。ユーザーに影響を与えないようにすることができます。過去に、channelを切り替えるには、native buildをインストールするか、またはdashboardを通じてデバイスの割り当てを手動で変更する必要がありました。__CAPGO_KEEP_0__のchannelは、以下のことを可能にします。
  • betaテストプログラムを作成
  • 個々のユーザーで生産問題をデバッグ

__CAPGO_KEEP_0__の更新チャネルに関するドキュメント Capgo channels documentation チャンネルサーフィングとは何か

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

実際的には、製品オーナーまたはQAが、たとえば、

チャンネルにビルドを切り替え、最新の変更を試すことができます。テストが終わったら、 production に切り替えます。再インストールや別のプレビュービルドが必要ありません。 preview 内部的には、チャンネルサーフィングは、アプリが更新クライアントに使用するチャンネルを指定できるようにします。その選択はruntimeで変更でき、変更がキャンセルされるか置き換えられるまで効果を持ちます。 production 個々のユーザーで生産問題をデバッグ

更新チャネルに関するドキュメント

チャンネルサーフィングの実装方法

チャンネルサーフィングを試す前に、プロジェクトはCapgo Live Updatesで構成されている必要があります。設定方法は、以下の Capgoのクイックスタートガイド.

チャンネルサーフィングのための必要な設定は、各チャンネルに「デバイスが自ら関連付けを許可する」にチェックを入れることだけです。Capgoのダッシュボードで実行してください。 codeの変更や設定の調整は必要ありません。

チャンネルサーフィングの基本は、1つのAPIコールによって動いています。

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

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

この設定は、Capgoから更新を取得する際に使用されるチャンネルを設定します。 APIのsetChannelについてもっと学びましょう。.

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

プラグインバージョン 5.34.0、6.34.0、7.34.0、または 8.0.0 (バージョンに応じて) より高速で、より簡単に機能します。 setChannel() これは、__CAPGO_KEEP_0__のバージョン 5.34.0 以降の機能です。

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

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

完全なチャンネル Switching フロー

ユーザー エクスペリエンスを向上させるには、通常はチャンネルを切り替えて、次のアプリ再起動を待つだけではありません。一般的なアプローチは、すぐにアップデートをチェックし、利用可能な場合にダウンロードし、再読み込みして、ユーザーが選択したチャンネルのアップデートに直接到達するようにすることです。

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

  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 ダッシュボードの Capgo ダッシュボードのセクション
  2. 管理したいチャンネル名をクリックしてください
  3. 有効 「デバイスが自らアソシエートすることを許可する」
  4. 変更を保存

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

それだけです。アプリの設定変更は必要ありません。必要なのは、ユーザーが切り替えることができるチャンネルにのみ、自我割り当てを有効にすることです。 defaultChannel この設定が無効の場合、チャンネルを呼び出そうとするたびに失敗し、イベントが発生します。

利用可能なチャンネルの一覧 setChannel() __CAPGO_KEEP_0__ channelPrivate __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

You can fetch the list of channels available for self-assignment:

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

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

self-assignmentが有効になっているチャンネルのみを返します。

現在のチャンネルを取得する

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

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

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

デフォルトのチャンネルに戻す

デフォルトのチャンネルに戻すには、チャンネルオーバーライドを削除してください。

await CapacitorUpdater.unsetChannel({});

デバイスを特定のチャンネルから解除し、デフォルトのチャンネルに戻るようにします。 defaultChannel configまたはクラウドのデフォルトに戻ります。

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

チャンネルサーフィングを実行するには、リリースビルドが必要です - @capgo/capacitor-updater APIはリリースビルド用に設計されています。デバッグビルドの場合、アプリは通常、開発サーバーからJavaScriptを読み込むのではなく、正常な更新フローをバイパスします。

必要な前提条件

The only requirement for channel surfing is enabling “デバイスが自らアソシエートを許可する”を 各チャンネルで許可するスイッチングを有効にする必要があります。アプリ内で設定変更は必要ありません。

テストビルドの作成

通常のビルドを実行してください:

bun run build && npx cap sync

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

異なるチャンネルへのアップデートの公開

アプリがインストールされたら、異なるチャンネルへのアップデートを公開してください:

# 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に移動し、チャンネルSwitchをトリガーしてください。アプリは、選択したチャンネルからアップデートを取得し、更新されたアップデートにリロードする必要があります。

チャンネルSwitcher UIの作成

チャンネルサーフィングは、通常、すべてのアプリユーザーに公開したくありません。たとえば、従業員のみがアプリをプレビュー チャンネルに切り替えることができるボタンを提供するなどです。

チャンネルSwitcher UIの例はこちらです。

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>
  );
}

OTAアップデートの注意点

None of these are specific to channel surfing, but they tend to become apparent quickly once you start switching channels at runtime.

実行時バージョン不一致

Capgo の更新はネイティブアプリのバージョンと紐付けられています。ネイティブアプリのバージョンが更新されたバージョンと一致しない場合、更新はダウンロードされず適用されません。チャンネルサーフィングの場合、通常、更新が適用されないのに更新が存在するチャンネルが表示されます。

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

更新の削除または取り消し

アプリがすでにチャンネルに更新をダウンロードしている場合、Capgo ダッシュボードから更新を削除しても、すでに更新をダウンロードしているデバイスから削除されません。削除は、将来のダウンロードのみを停止します。 将来 更新が失敗した場合、最も信頼できる方法は、同じチャンネルに知られている良い更新を公開することです。これにより、チャンネルの履歴の先頭に新しい更新が作成され、クライアントはこれを最新のバージョンとして適用します。

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

Capgo also provides a rollback mechanism that can instruct clients to re-apply a previous stable update or fall back to the update embedded in the build.

__CAPGO_KEEP_0__

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

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

チャンネルサーフィングがモバイルの反復を向上させる理由

チャンネルサーフィングは、特にプロダクション環境で変更を迅速に確認する必要がある場合に特に便利です。

迅速な検証

緊急のバグ修正が検証される必要がある場合、チャンネルサーフィングを使用すると、変更が特定のユーザーに限定され、検証される前にプロダクションに広く展開されるのを防ぐことができます。

利害関係者レビュー

製品オーナーまたはQAがインストール済みのプロダクションビルドを別のアップデートチャンネルに切り替え、修正または機能を確認し、完了したら元に戻すことができます。

streamlinedテスト

これにより、非技術的な利害関係者がレビューと決定に参加し、ワークフローをスムーズに保つことができます。単一のプロダクションビルドは、テスト、フィードバック、検証のための柔軟なツールになります。

用途

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

チャンネル変更方法の比較

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

チャネル切り替えUIを構築する際に最良のユーザー体験を得るには、常にプラグインの setChannel() __CAPGO_KEEP_0__

ベストプラクティス

  1. アクセス制限: 通常、チャンネルサーフィングは内部使用用です - すべてのユーザーに公開しないでください
  2. エラー処理: チャンネル切り替え時に常にエラーを優雅に処理してください
  3. 互換性の確認: インストール済みのネイティブバージョンと異なるチャンネルの更新が互換性があることを確認してください
  4. チャンネルドキュメント__CAPGO_KEEP_0__ の各チャネルごとのドキュメントを明確に記録する
  5. Monitor Usage__CAPGO_KEEP_0__ の各デバイスがどのチャネルに接続されているかを追跡する

Resources

Conclusion

Capacitor アプリの開発を迅速に進めるために、チャネルサーフィングが変革をもたらします。生産用ビルドを固定のエンドポイントとして扱うのではなく、テスト、検証、迅速な開発のための柔軟なツールとして扱うことができます。

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

生産用ビルドを特定のユーザーに提供することで、バグ修正の検証、ベータプログラムの実行、特定のユーザーと問題を解決するためのデバッグが可能になります。

Channel Surfingから続けてCapgoを実行する方法:ランタイムでアップデートチャンネルを切り替える

__CAPGO_KEEP_0__を使用している場合 Channel Surfingから続けてCapgoを実行する方法:ランタイムでアップデートチャンネルを切り替える __CAPGO_KEEP_0__を使用してアップデートチャンネルを切り替える方法 チャンネル チャンネル チャンネル チャンネル ベータテストソリューション ベータテストソリューション ベータテストソリューション ベータテストソリューション バージョン対象化ソリューション バージョン対象化ソリューション用の製品ワークフロー

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

ライブのウェブ層のバグがある場合、Capgo を通して修正を配信するのではなく、数日間待ってアプリストアの承認を待つのではなくします。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビューのパスに残ります。

Get Started Now

Latest from our Blog

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