Using @capgo/capacitor-auto

@capgo/capacitor-auto Capacitor アプリを承認された CarPlay と Android Auto テンプレート表面に接続します。アプリは車用ディスプレイに小さなテンプレートリストを送信し、車用ディスプレイは JavaScript への選択されたアクションを送信します。

ドライバー安全なポリシー制御ワークフロー向けに設計されています。ウェブビューを車用ディスプレイに反映することはありません。

インストールと同期

npm install @capgo/capacitor-auto
npx cap sync

車用ディスプレイにテンプレートを送信

import { Auto } from '@capgo/capacitor-auto';

await Auto.setRootTemplate({
  title: 'Garage',
  sections: [
    {
      header: 'Doors',
      items: [
        {
          id: 'open-main-door',
          title: 'Open main door',
          subtitle: 'Tap to send the action to the phone app',
          payload: { doorId: 'main' },
        },
      ],
    },
  ],
});

ドライバーのアクションを待つ

await Auto.addListener('carAction', async (event) => {
  if (event.id === 'open-main-door') {
    await openGarageDoor(event.payload?.doorId);
  }
});

接続状態を監視

const status = await Auto.isAvailable();
console.log(status.available, status.connected, status.platform);

await Auto.addListener('connectionChanged', (event) => {
  console.log('Car connected:', event.connected, event.platform);
});

iOS 要件

CarPlay には、カテゴリごとに Apple 承認された特権が必要です。CarPlay シーン構成について説明されている iOS設定ドキュメント車内UIをAppleのテンプレート内に保持してください。

Androidの要件

Android AutoはAndroidX Car App Libraryを使用します。プラグインには CarAppServicecapabilityを宣言し、デフォルトでは template カテゴリを指定します。カテゴリを確認するには IOT Androidの設定ドキュメントを参照してください。アプリが別のAndroid Autoカテゴリを必要とする場合デザインガイドライン

車内画面で短い予測可能なアクションを使用してください:

ステータス行

__CAPGO_KEEP_0__
1タップコマンド
ドライバーサフティな確認
電話アプリから簡単に状態を引き継ぐ

複雑なフローは電話UIに残し、 carAction イベントをネイティブのインテントトリガーとして使用

Using @capgo/capacitor-autoを使用している場合

Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-autoを使用している場合 Using @capgo/capacitor-auto @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-autoと接続 @capgo/capacitor-autoの実装詳細 for the implementation detail in @capgo/capacitor-auto, @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-auto Capacitorで使用するための実装詳細については、Getting Startedを参照してください。 Using @capgo/capacitor-live-activities Capacitorで使用するためのネイティブ機能については、Using @capgo/capacitor-live-activitiesを参照してください。 @capgo/capacitor-live-activities Capacitorで使用するための実装詳細については、@capgo/capacitor-live-activitiesを参照してください。また Using @capgo/capacitor-video-player Capacitorで使用するためのネイティブ機能については、Using @capgo/capacitor-video-playerを参照してください。

自動

Auto のチュートリアル