@capgo/capacitor-auto を使用

@capgo/capacitor-auto CarPlay と Android Auto テンプレート表面に承認されたアプリを接続する @Capacitor アプリ

アプリは車用ディスプレイに小さなテンプレートリストを送信し、車用ディスプレイは選択されたアクションを 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 承認された特権が必要です。Apple 承認されたテンプレート内に車用 UI を保持するために、CarPlay シーン構成を追加してください。 iOS セットアップドキュメントを参照してください

Android の要件

Android Auto は AndroidX Car App Library を使用します。プラグインには、 CarAppService Android Auto の機能を宣言し、 template カテゴリを指定します。また、 IOT Android Auto のカテゴリを変更するには、 Android の設定ドキュメントを参照してください。デザインガイドライン

車内画面では、予測可能な短いアクションに使用します:

ステータス行

一度のタップコマンド
ドライバーの安全な確認
__CAPGO_KEEP_0__
スマートフォンアプリからシンプルな状態の引き継ぎ

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

Keep going from Using @capgo/capacitor-auto

Capacitor Autoを使用している場合 Using @capgo/capacitor-auto Capacitor Autoの実装詳細 @capgo/capacitor-auto for the implementation detail in @capgo/capacitor-auto, Capacitor Autoの実装詳細 Capacitor Autoの実装詳細 Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, and Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player.

オート

Autoチュートリアル