En utilisant @capgo/capacitor-auto

@capgo/capacitor-auto cette fonctionnalité connecte une application Capacitor à des surfaces de CarPlay et Android Auto approuvées. Votre application envoie une petite liste de modèles à l'affichage de la voiture, et l'affichage de la voiture envoie les actions sélectionnées vers JavaScript.

Il est conçu pour des flux de travail sûrs pour les conducteurs et contrôlés par des politiques. Il ne reflète pas votre WebView dans la voiture.

Installez et synchronisez

npm install @capgo/capacitor-auto
npx cap sync

Envoyer un modèle à la voiture

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

Écouter les actions du conducteur

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

Surveiller l'état de connexion

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);
});

Exigences iOS

CarPlay nécessite un droit approuvé par Apple pour votre catégorie d'application. Ajoutez la configuration de la scène CarPlay décrite dans les docs de configuration iOS et gardez votre interface de voiture à l'intérieur des modèles approuvés par Apple.

Exigences Android

Android Auto utilise la bibliothèque AndroidX Car App Library. Le plugin inclut un CarAppService, qui déclare la template capacité, et se déclare par défaut dans la IOT catégorie. Vérifiez les Documentation de configuration Android Si votre application nécessite une autre catégorie Android Auto.

Conseils de conception

Utilisez la surface de la voiture pour des actions courtes et prévisibles :

Lignes de statut
Commandes à un seul clic
Confirmation sûre pour le conducteur
Passage simple d'état depuis l'application mobile

Conservez les flux complexes dans l'interface de l'appareil mobile et utilisez carAction Événements comme des déclencheurs d'intent natif.

Continuez à partir de l'utilisation de @capgo/capacitor-auto

Si vous utilisez En utilisant @capgo/capacitor-auto pour planifier le comportement de médias et d'interface natifs, le connecter avec @capgo/capacitor-auto pour les détails d'implémentation dans @capgo/capacitor-auto, Démarrage pour les détails d'implémentation dans Démarrage, En utilisant @capgo/capacitor-live-activities pour la capacité native dans En utilisant @capgo/capacitor-live-activities, @capgo/capacitor-live-activities pour les détails d'implémentation dans @capgo/capacitor-live-activities, et En utilisant @capgo/capacitor-video-player pour la capacité native dans En utilisant @capgo/capacitor-video-player.

Auto

Tutoriel sur Auto