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を使用します。プラグインには CarAppService, という機能が宣言されており、 template カテゴリにデフォルトで設定されています。 IOT カテゴリを確認してください。 Android 設定ドキュメントあなたのアプリが別のAndroid Auto カテゴリが必要なら。

デザインガイドライン

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

ステータス行
1タップコマンド
運転手の安全な確認
電話アプリから車内UIにシンプルな状態を引き継ぐ

__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-autoを使用している場合に続けてください。 carAction あなたが使用している場合

Keep going from Using @capgo/capacitor-auto

複雑なフローは電話UIに残し、 Capgoの@capgo/capacitor-autoを使用して ネイティブのメディアとインターフェイスの動作を計画し、 Capgoの@capgo/capacitor-autoを使用して Capgoの@capgo/capacitor-autoの実装詳細について Getting Started Getting Startedの実装詳細について Capgoの@capgo/capacitor-live-activitiesを使用して Capgoの@capgo/capacitor-live-activitiesのネイティブ機能について Capgoの@capgo/capacitor-live-activitiesを使用して Capgoの@capgo/capacitor-live-activitiesの実装詳細について Capgoの@capgo/capacitor-video-playerを使用して Capgoの@capgo/capacitor-video-playerのネイティブ機能について

オート

Android Autoのチュートリアル