アプリに更新機能を組み込む

ルートコンポーネントを接続する

ネイティブ環境の設定後、ルートコンポーネントをProviderでラップし、プラットフォームに対応する appKey を指定します。

import { Pakta, UpdateProvider } from 'rn-update';
import App from './App';

const client = new Pakta({
  appKey: 'YOUR_PLATFORM_APP_KEY',
  updateStrategy: 'silentAndLater',
});

export default function Root() {
  return (
    <UpdateProvider client={client}>
      <App />
    </UpdateProvider>
  );
}

標準の RN アプリの場合、既存のアプリケーション名を使用してルートを登録します。

import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import Root from './Root';

AppRegistry.registerComponent(appName, () => Root);

Expo Router の場合は、既存の Stack または Slot を app/_layout.tsx でラップします。繰り返しの初期化を避けるために、プロセスごとに 1 つのプロバイダーをマウントし、コンポーネントの外側にクライアントを作成します。

複数のプラットフォーム キー

複数のプラットフォームを出荷する場合にのみ、プラットフォームの選択を追加します。 CLI selectApp は、各プラットフォームの appId および appKey を update.json に書き込みます。まず各アプリケーションを選択し、これを単一プラットフォーム キーの代わりに使用します。

import { Platform } from 'react-native';
import updateConfig from './update.json';

const platform = Platform.OS;
const configs = updateConfig as Record<string, { appKey: string }>;
const appKey = configs[platform]?.appKey;
if (!appKey) throw new Error(`Missing Pakta appKey for ${platform}`);

インポートされた JSON はアプリバンドルの一部になります。アプリケーション識別子のみを保持し、PAKTA_API_TOKEN は保持しないでください。

バージョンを表示

このコンポーネントをプロバイダー内でレンダリングします。空の currentHash は、埋め込みバンドルを示します。

import { Button, Text, View } from 'react-native';
import { useUpdate } from 'rn-update';

export function UpdateStatus() {
  const { packageVersion, currentHash, lastError, checkUpdate } = useUpdate();
  return (
    <View>
      <Text>Pakta demo A</Text>
      <Text>Native: {packageVersion}</Text>
      <Text>Update: {currentHash || 'embedded'}</Text>
      <Button title="Check update" onPress={() => { void checkUpdate(); }} />
      {lastError ? <Text>{lastError.message}</Text> : null}
    </View>
  );
}

更新をいつ有効化するか選択する

checkStrategy のデフォルトは both (開始および再開) です。他の値は onAppStart および onAppResume です。 null は JS 自動チェックを無効にします。ネイティブのコールド スタート チェックでは、引き続きアップデートがダウンロードされる場合があります。すべての更新機能が無効になるわけではありません。

手動更新

カスタム更新ボタンの場合、checkStrategy: null を設定し、プロバイダー内で次のメソッドを読み取ります。

const { client } = useUpdate();

async function onUpdate() {
  if (!client) return;
  const info = await client.checkUpdate();
  if (!info?.update) return;
  const hash = await client.downloadUpdate(info);
  if (hash) await client.switchVersion(hash);
}

操作中の繰り返しクリックを無効にし、捕捉されたエラーを表示します。 useUpdateProgress() はダウンロードの進行状況を返します。進行状況が存在する場合、その範囲は 0 ～ 100 です。

健康状態の確認と回復

プロバイダーは通常、1000 ミリ秒後に健全性を確認します。重要な初期化に時間がかかる場合は、次のオプションを既存のクライアントに追加します。

autoMarkSuccessDelayMs: 5000,
healthCheck: () => myCriticalModulesReady(),

アプリケーションの準備状況を使用して myCriticalModulesReady を実装します。 false を返すかスローすると、その確認がスキップされます。完全に制御するには、autoMarkSuccess: false を使用し、重要な画面の準備ができたら useUpdate().markSuccess() を呼び出します。

ネイティブ保護は、起動に失敗した後に未確認の更新をロールバックできます。ヘルス確認後の任意のエラーが必ずしもロールバックをトリガーするとは限りません。ネイティブ リカバリには、ネットワーク アクセス、有効な構成、および利用可能な修復展開が必要です。

拡張機能

• フックを確認、ダウンロード、リロードします: ClientOptions。

• テスト用 QR コードでは useUpdate().parseTestQrCode(code) を使います。本番ビルドでは testChannel: false を設定できます。詳しくはテストチャンネルを参照してください。

• エラーを更新 ID と関連付けます: エラー診断。

テストチャンネル

テスト QR コードはテスト更新を選択します。これは、ネイティブ パッケージの固定配布チャネルとは別のものです。最初のチュートリアルでは、スキャンを行わずに通常のデフォルト チャネル展開を使用します。必要な場合にのみスキャナーを追加し、それを許可するビルドを制御します。

次のステップ

このリリース パッケージを保持し、最初のアップデート を公開し、Pakta demo A を Pakta demo B に変更します。

完了ボタン、エラーと進行状況の例。