Zum Hauptinhalt springen
Zurück zu Plugins
@capgo/capacitor-live-activities
Tutorial
@capgo/capacitor-live-activities

Live Activities

Manage iOS Live Activities and Dynamic Island layouts from Capacitor with JSON-driven templates

Richtlinie

Tutorial zu Live Activities

Using @capgo/capacitor-live-activities

Capacitor Live Activities Plugin interface for managing iOS Live Activities.

Installieren

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

iOS Einrichtung

Die Installation und Synchronisierung des Plugins erstellt keine native Live Activity UI. Bevor Sie startActivitykonfigurieren Sie ActivityKit in Xcode:

  1. Ausführen bunx cap open ios.
  2. Hinzufügen eines Widget-Erweiterung Ziel und aktivieren Sie Live Activity einschließen.
  3. Stellen Sie sicher, dass das Ziel der App und der Widget-Erweiterung auf iOS 16.1 oder später eingestellt ist.
  4. Stellen Sie sicher, dass die Erweiterung in der Haupt-App eingebettet ist.
  5. Behalten Sie ein ActivityConfiguration __CAPGO_KEEP_0__ WidgetBundlemit Bildschirmverriegelung und allen Dynamic Island-Anzeigen.
  6. Hinzufügen NSSupportsLiveActivities zum Hauptanwendungsziel Info.plist.
<key>NSSupportsLiveActivities</key>
<true/>

Die Hinzufügung des Ziels allein ist nicht ausreichend. Die native App oder Plugin muss die ActivityKit-APIs request, update und end aufrufen. Die Widget-Erweiterung muss SwiftUI code enthalten, die die gleichen Daten dekodieren und rendern kann. Beide Hauptanwendung und Widget-Erweiterung müssen die gleichen ActivityKit-Modelle gemeinsam nutzen. Das von Xcode generierte Live-Activity-Template renderiert die JSON-Layouts, die an diesen Plugin übergeben werden, nicht automatisch; die Erweiterung benötigt auch einen kompatiblen native Layout-Renderer. ActivityAttributes Geteilte Bilder

Wenn Sie die Bildverwaltungsmethoden verwenden, fügen Sie dem Hauptanwendungs- und Widget-Erweiterungsziel die

App-Gruppen Fähigkeit hinzu. Aktivieren Sie die gleiche Gruppe auf beiden Zielen mit dem genauen Identifier, der von dem Plugin erwartet wird: Live-Activity-Erweiterungen können nicht auf das Netzwerk zugreifen. Laden Sie remote Bilder in der Hauptanwendung herunter, speichern Sie sie im gemeinsamen App-Gruppen-Container und beziehen Sie sich dann auf das gespeicherte Bild aus der Layout. Verpackte Assets müssen auch dem Widget-Erweiterungsziel zugeordnet sein.

group.<MAIN_APP_BUNDLE_ID>.liveactivities

Tiefenlinks und Push-Updates saveImageAdd

to the main app target's

  • Registrieren Sie jede benutzerdefinierte URL-Scheme, das von behavior.widgetUrl oder tapUrl unter dem Hauptanwendungsziel Info > URL-Typen Einstellungen.
  • Für servergetriebene Updates fügen Sie die Fähigkeit hinzu und implementieren Sie die ActivityKit-Push-Token-Verwaltung mit APNs. Fügen Sie
  • nur dann hinzu, wenn die Anwendung häufige ActivityKit-Push-Updates erfordert. NSSupportsLiveActivitiesFrequentUpdates Die Aktivierung der Fähigkeit für Push-Benachrichtigungen allein reicht nicht aus; servergetriebene Updates erfordern eine native Token-Verwaltung und einen APNs-Hintergrunddienst.

ActivityKit beschränkt die kombinierte statische und dynamische Live-Aktivitätsdaten auf 4 KB. Der Dynamic Island ist nur auf unterstützten Gerätemodellen sichtbar; andere Geräte verwenden die Anzeige auf dem Bildschirm des Schlosses.

ActivityKit limits the combined static and dynamic Live Activity data to 4 KB. The Dynamic Island is only visible on supported device models; other devices use the Lock Screen presentation.

Was diese Erweiterung bereitstellt

  • areActivitiesSupported - Überprüfen Sie, ob Live-Aktivitäten auf diesem Gerät unterstützt werden. Erfordert iOS 16.1+ und Geräteunterstützung.
  • startActivity - Starten Sie eine neue Live-Aktivität mit der angegebenen Layout und Daten.
  • updateActivity - Aktualisieren Sie eine bestehende Live-Aktivität mit neuen Daten.
  • endActivity - Beenden Sie eine Live-Aktivität.

Beispiel für die Verwendung

areActivitiesSupported

Überprüfen Sie, ob Live-Aktivitäten auf diesem Gerät unterstützt werden. Erfordert iOS 16.1+ und Geräteunterstützung.

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

Starten Sie eine neue Live-Aktivität mit der angegebenen Layout und Daten.

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

Aktualisieren Sie eine bestehende Live-Aktivität mit neuen Daten.

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

Beenden Sie eine Live-Aktivität.

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

Vollständige Referenz

Fortsetzen Sie mit Using @capgo/capacitor-live-activities

Wenn Sie verwenden Verwenden Sie @capgo/capacitor-live-activities um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit @capgo/capacitor-live-activities zur Implementierungsdetail in @capgo/capacitor-live-activities, Getting Started zur Implementierungsdetail in Getting Started, Verwenden Sie @capgo/capacitor-video-player zur nativen Fähigkeit in Verwenden Sie @capgo/capacitor-video-player @capgo/capacitor-Video-Player für die Implementierungsdetails in @capgo/capacitor-Video-Player, und Mit @capgo/capacitor-native-Navigation für die native Fähigkeit in Mit @capgo/capacitor-native-Navigation.