Utilizzando @capgo/capacitor-auto

@capgo/capacitor-auto si collega un'app Capacitor alle superfici di CarPlay e Android Auto approvate. L'applicazione invia una piccola lista di template alla schermata del veicolo, e la schermata del veicolo invia azioni selezionate di ritorno a JavaScript.

È progettato per flussi di lavoro sicuri per il conducente, controllati da politiche. Non riflette il tuo WebView nella vettura.

Installa e sincronizza

npm install @capgo/capacitor-auto
npx cap sync

Invia un modello al veicolo

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

Ascolta le azioni del conducente

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

Vigila allo stato di connessione

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

Requisiti iOS

CarPlay richiede un'autorizzazione approvata da Apple per la tua categoria di app. Aggiungi la configurazione della scena CarPlay descritta in documentazione di configurazione iOS e mantieni l'interfaccia utente del tuo veicolo all'interno di modelli approvati da Apple.

Requisiti Android

Android Auto utilizza la libreria AndroidX Car App. Il plugin include un CarAppServiceche dichiara la template capacità e si avvale per impostazione predefinita della IOT categoria. Verifica il Impostazione dei documenti Android Se il tuo app necessita di un'altra categoria di Android Auto.

Linee guida di progettazione

Utilizza la superficie del veicolo per azioni brevi e predittibili:

righe di stato
comandi a un solo tocco
conferme sicure per il conducente
trasferimento di stato semplice dal'applicazione del telefono

Continua a utilizzare il flusso complesso nel UI del telefono e utilizza carAction eventi come trigger di intent nativi.

Continua da Utilizzo @capgo/capacitor-auto

Se stai utilizzando Usando @capgo/capacitor-auto per pianificare il comportamento di media e interfaccia nativa, connettilo con @capgo/capacitor-auto per i dettagli di implementazione in @capgo/capacitor-auto, Avvio rapido per i dettagli di implementazione in Avvio rapido, Usando @capgo/capacitor-live-activities per la capacità nativa in Usando @capgo/capacitor-live-activities, @capgo/capacitor-live-activities per i dettagli di implementazione in @capgo/capacitor-live-activities, e Usando @capgo/capacitor-video-player per la capacità nativa in Usando @capgo/capacitor-video-player.

Auto

Tutorial su Auto