Mit @capgo/capacitor-auto

@capgo/capacitor-auto verbindet eine Capacitor-Anwendung mit genehmigten CarPlay- und Android-Auto-Vorlagenoberflächen. Ihre Anwendung sendet eine kleine Liste von Vorlagen an den Fahrzeugdisplay, und der Fahrzeugdisplay sendet ausgewählte Aktionen zurück an JavaScript.

Es ist für sicherheitsrelevante, durch Richtlinien gesteuerte Workflows entwickelt worden. Es spiegelt Ihre WebView nicht in das Auto.

Installieren und synchronisieren

npm install @capgo/capacitor-auto
npx cap sync

Eine Vorlage an das Auto senden

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' },
        },
      ],
    },
  ],
});

Auf Treiberaktionen lauschen

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

Zustand der Verbindung überwachen

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-Anforderungen

CarPlay erfordert eine von Apple genehmigte Berechtigung für Ihre App-Kategorie. Fügen Sie die CarPlay-Szenenkonfiguration, wie in den iOS-Einrichtungsanleitungen beschrieben, hinzu und halten Sie Ihre Fahrzeug-UI innerhalb von Apple-genehmigten Vorlagen. CarPlay requires an Apple-approved entitlement for your app category. Add the CarPlay scene configuration described in the __CAPGO_KEEP_0__ and keep your car UI inside Apple-approved templates.

Android-Anforderungen

Android Auto verwendet die AndroidX Car App Library. Die Erweiterung enthält ein CarAppService, erklärt die template Kapazität, und setzt standardmäßig auf die IOT Kategorie. Überprüfen Sie die Android-Einrichtungsanleitungen falls Ihre App eine andere Android-Auto-Kategorie benötigt.

Designleitfaden

Nutzen Sie die Fahrzeugoberfläche für kurze, vorhersehbare Aktionen:

Statuszeilen
Einzeltipps
Fahrer-sichere Bestätigungen
Einfache Zustandsübergabe vom Telefon-App

Halten Sie komplexe Flüsse in der Telefon-UI und verwenden Sie carAction Events als native Intent-Auslöser.

Halten Sie weiter von Verwendung @capgo/capacitor-auto

Wenn Sie native Medien und Schnittstellenverhalten planen, Verwendung @capgo/capacitor-auto Verbinden Sie es mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-auto für die Implementierungsdetails in @capgo/capacitor-auto, for the implementation detail in @capgo/capacitor-auto, für die Implementierungsdetails in Anleitung zum Starten, Verwendung @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities Verwendung @capgo/capacitor-live-activities für die native Fähigkeit in Using @capgo/capacitor-live-aktivitäten, @capgo/capacitor-live-aktivitäten für die Implementierungsdetail in @capgo/capacitor-live-aktivitäten, und Using @capgo/capacitor-video-player für die native Fähigkeit in Using @capgo/capacitor-video-player.

Auto

Tutorial zu Auto