Attività in tempo reale Plugin Capacitor

Utilizzo di @capgo/capacitor-live-activities

Interfaccia del plugin Capacitor per Live Activities per iOS.

Installa

bun add @capgo/capacitor-live-activities
bunx cap sync

Impostazione iOS

La installazione e sincronizzazione del plugin non creano l'interfaccia nativa delle attività in tempo reale. Prima di chiamare startActivity, configura ActivityKit in Xcode:

1. Esegui bunx cap open ios.
2. Esegui Estensione del widget seleziona e abilita Includi attività in tempo reale.
3. Imposta i target di distribuzione per l'app e l'estensione del Widget su iOS 16.1 o successivo.
4. Assicurati che l'estensione sia integrata nell'app principale.
5. Esegui ActivityConfiguration registrato nell'estensione's WidgetBundleCon Live Update, schermo bloccato e tutte le presentazioni dell'isola dinamica.
6. Esegui NSSupportsLiveActivities alla destinazione app principale Info.plist.

<key>NSSupportsLiveActivities</key>
<true/>

Aggiungere solo il target non è sufficiente. L'app nativa o il plugin devono chiamare le API di ActivityKit per richiesta, aggiornamento e fine. L'estensione del widget deve contenere SwiftUI code in grado di decodificare e visualizzare lo stesso. ActivityAttributes e stato e stato dello stato del contenuto utilizzato da quelle chiamate. Includi i modelli condivisi di ActivityKit in entrambi i target dell'app principale e dell'estensione Widget. La plantilla di attività Live generata da Xcode non rende automaticamente i layout JSON passati a questo plugin; l'estensione richiede inoltre un renderer di layout nativo compatibile.

Immagini Condivise

Quando si utilizzano i metodi di gestione delle immagini, aggiungi Gruppi App abilità di estendere la capacità al target dell'app principale e all'estensione Widget. Abilita lo stesso gruppo su entrambi i target utilizzando l'identificatore esatto previsto dal plugin:

group.<MAIN_APP_BUNDLE_ID>.liveactivities

Estensioni delle attività in tempo reale non possono accedere a rete. Scarica le immagini remote nell'app principale, salvale nel gruppo App condiviso con saveImagee immagini salvate possono essere poi richiamate nella layout. Gli asset inclusi nel bundle devono essere destinati alla destinazione Widget Extension.

Collegamenti Profondi e Aggiornamenti Push

• Registra ogni schema di URL personalizzato utilizzato da behavior.widgetUrl Ovvero tapUrl sotto l'applicazione principale di destinazione Informazioni > Tipi di URL impostazioni.
• Per aggiornamenti server-driven, aggiungi il Notifiche Push abilità e implementa il trattamento del token di ActivityKit con APNs.
• Aggiungi NSSupportsLiveActivitiesFrequentUpdates Aggiungi solo quando l'app richiede aggiornamenti di push di ActivityKit frequenti.

Abilitando la capacità di notifiche Push da solo non è sufficiente; le aggiornamenti server-driven richiedono un trattamento token nativo e un backend APNs.

ActivityKit limita i dati di Live Activity statici e dinamici a 4 KB. L'Isola Dinamica è visibile solo su dispositivi supportati; gli altri dispositivi utilizzano la presentazione della schermata di blocco.

Cosa Espongono Queste Funzionalità

• areActivitiesSupported - Verifica se le attività in tempo reale sono supportate su questo dispositivo. Richiede iOS 16.1+ e supporto del dispositivo.
• startActivity - Avvia una nuova attività in tempo reale con il layout e i dati specificati.
• updateActivity - Aggiorna un'attività in tempo reale esistente con nuovi dati.
• endActivity - Termina un'attività in tempo reale.

Esempio di utilizzo

areActivitiesSupported

Verifica se le attività in tempo reale sono supportate su questo dispositivo. Richiede iOS 16.1+ e supporto del dispositivo.

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';

const { supported, reason } = await CapgoLiveActivities.areActivitiesSupported();
if (supported) {
  console.log('Live Activities are supported!');
} else {
  console.log('Not supported:', reason);
}

startActivity

Inizia un'attività in tempo reale nuova con il layout specificato e i dati.

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';

const { activityId } = await CapgoLiveActivities.startActivity({
  layout: {
    type: 'container',
    direction: 'horizontal',
    children: [
      { type: 'text', content: 'Order #{{orderNumber}}', fontSize: 16, fontWeight: 'bold' },
      { type: 'text', content: '{{status}}', fontSize: 14, color: '#666666' }
    ]
  },
  dynamicIslandLayout: {
    expanded: {
      leading: { type: 'image', source: 'sfSymbol', value: 'box.truck' },
      trailing: { type: 'text', content: '{{eta}}' },
      center: { type: 'text', content: '{{status}}' },
      bottom: { type: 'progress', value: 'progress' }
    },
    compactLeading: { type: 'image', source: 'sfSymbol', value: 'box.truck' },
    compactTrailing: { type: 'text', content: '{{eta}}' },
    minimal: { type: 'image', source: 'sfSymbol', value: 'box.truck' }
  },
  data: {
    orderNumber: '12345',
    status: 'On the way',
    eta: '10 min',
    progress: 0.6
  }
});
console.log('Started activity:', activityId);

updateActivity

Aggiorna un'attività in tempo reale esistente con nuovi dati.

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';

await CapgoLiveActivities.updateActivity({
  activityId: 'abc123',
  data: {
    status: 'Arrived!',
    eta: 'Now',
    progress: 1.0
  },
  alertConfiguration: {
    title: 'Delivery Update',
    body: 'Your order has arrived!'
  }
});

endActivity

Termina un'attività in tempo reale.

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';

await CapgoLiveActivities.endActivity({
  activityId: 'abc123',
  data: { status: 'Delivered' },
  dismissalPolicy: 'after',
  dismissAfter: Date.now() + 3600000 // 1 hour from now
});

Riferimento completo

• GitHub: https://github.com/Cap-go/capacitor-attività-in-tempo-reale/
• Documentazione: /docs/plugins/attività-in-tempo-reale/

Continua da Utilizzo @capgo/capacitor-attività-in-tempo-reale

If stai utilizzando Utilizzando @capgo/capacitor-live-attività per pianificare il comportamento di media e interfaccia nativa, collega @capgo/capacitor-live-attività per i dettagli di implementazione in @capgo/capacitor-live-attività, Getting Started per i dettagli di implementazione in Avvio, Utilizzando @capgo/capacitor-player-video per la capacità nativa in Utilizzando @capgo/capacitor-player-video, @capgo/capacitor-player-video per i dettagli di implementazione in @capgo/capacitor-player-video, e Utilizzando @capgo/capacitor-navigazione-nativa per la capacità nativa in Utilizzare @capgo/capacitor-navigazione-nativa.