Using @capgo/capacitor-auto

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

ドライバー安全でポリシー制御されたワークフロー向けに設計されています。ウェブビューを車用ディスプレイにミラーリングしません。

Install and sync

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のセットアップドキュメント Appleが承認したテンプレート内に車のUIを保持すること

Androidの要件

Android Autoでは、AndroidX Car App Libraryを使用します。プラグインには、 CarAppServicecapabilityを宣言し、 template デフォルトでは、 IOT カテゴリ. ご確認ください Android セットアップドキュメント Android Auto カテゴリが必要な場合は別のカテゴリを追加してください

デザインガイドライン

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

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

複雑なフローは電話UIに残し、イベントをネイティブのインテントトリガーとして使用してください。 carAction 続けてください。@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-autoを使用中

Keep going from Using @capgo/capacitor-auto

If you are using @capgo/capacitor-auto を使用してネイティブのメディアとインターフェイスの動作を計画する場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-auto @capgo/capacitor-auto @capgo/capacitor-auto の実装詳細については@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-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-live-activities native機能の使用に@capgo/capacitor-ビデオプレーヤーを使用します。

Auto

Autoのチュートリアル