Mit @capgo/capacitor-live-aktivitäten

Capacitor-Live-Aktivitäten-Plugin-Schnittstelle zur Verwaltung von iOS-Live-Aktivitäten

Installieren

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

iOS-Einrichtung

Die Installation und Synchronisierung des Plugins erzeugt keine native Live-Aktivitäts-Oberfläche. Bevor Sie startActivity, konfigurieren Sie ActivityKit in Xcode:

Ausführen bunx cap open ios.
Ein Widget-Extension hinzufügen Widget-Erweiterung Ziel und die Verwendung aktivieren Eine Live-Aktivität einschließen.
Stellen Sie sicher, dass das Ziel und die Widget-Erweiterung für iOS 16.1 oder höher konfiguriert sind.
Stellen Sie sicher, dass die Erweiterung im Hauptanwendungsprojekt eingebettet ist.
Ein registriertes ActivityConfiguration in der Erweiterung WidgetBundlemit dem Bildschirmschoner und allen Dynamic Island-Anzeigen.
Ein 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 APIs von ActivityKit aufrufen, aktualisieren und beenden. Die Widget-Erweiterung muss SwiftUI-code enthalten, die die gleichen Daten dekodieren und darstellen können. ActivityAttributes und den Inhaltszustand, der von diesen Aufrufen verwendet wird. Fügen Sie die gemeinsamen ActivityKit-Modelle sowohl in der Hauptanwendung als auch im Widget-Erweiterungsziel ein. Das vom Xcode generierte Live-Aktivitäten-Template renderiert die JSON-Layouts, die an diesen Plugin übergeben werden, nicht automatisch; Die Erweiterung benötigt auch einen kompatiblen nativen Layout-Renderer.

Gemeinsame Bilder

Wenn Sie die Methoden zur Bildverwaltung verwenden, fügen Sie den App-Gruppen Fähigkeit zu den Hauptanwendungsziel und dem Widget-Erweiterungsziel hinzu. Aktivieren Sie die gleiche Gruppe auf beiden Zielen mit dem genauen Identifier, der von dem Plugin erwartet wird:

group.<MAIN_APP_BUNDLE_ID>.liveactivities

Live-Aktivitäten-Erweiterungen können den Netzwerkzugriff nicht nutzen. Laden Sie remote Bilder in der Hauptanwendung herunter, speichern Sie sie in der gemeinsamen App-Gruppe mit saveImageund referenzieren Sie dann das gespeicherte Bild aus der Layout. Verpackte Assets müssen auch dem Ziel der Widget-Erweiterung zugeordnet sein.

Tiefenlinks und Push-Updates

Registrieren Sie jede benutzerdefinierte URL-Scheme, die von behavior.widgetUrl oder tapUrl Registrieren Sie jede benutzerdefinierte URL-Scheme, die von oder Einstellungen.
Für servergetriebene Aktualisierungen füten Sie die Benachrichtigungen Fühe
Benachrichtigungen NSSupportsLiveActivitiesFrequentUpdates Füten Sie nur dann hinzufügen, wenn die App regelmäßige Aktivitätsbenachrichtigungen erfordert.

Die Aktivierung der Benachrichtigungs-Fähigkeit allein reicht nicht aus; servergetriebene Aktualisierungen erfordern native Token-Handling und einen APNs-Hintergrund.

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

Was diese Erweiterung freigibt

areActivitiesSupported - Prükfen 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 - Ein Live-Ereignis beenden.

Beispielanwendung

`areActivitiesSupported`

Überprüfen Sie, ob Live-Ereignisse 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 ein neues Live-Ereignis 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 ein bestehendes Live-Ereignis 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`

Ein Live-Ereignis beenden.

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

GitHub: https://github.com/Cap-go/capacitor-live-activities/
Dokumentation: /docs/plugins/live-activities/

Fortsetzen Sie mit der Verwendung von @capgo/capacitor-live-activities

Wenn Sie Live-Ereignisse verwenden Mit @capgo/capacitor-live-aktivitäten um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit @capgo/capacitor-live-aktivitäten für die Implementierungsdetails in @capgo/capacitor-live-aktivitäten Einstieg für die Implementierungsdetails in Einstieg Mit @capgo/capacitor-video-player für die native Fähigkeit in Mit @capgo/capacitor-video-player @capgo/capacitor-video-player für die Implementierungsdetails in @capgo/capacitor-video-player und Mit @capgo/capacitor-native-navigations für die native Fähigkeit in Mit @capgo/capacitor-native-navigations.

Live Activities

Tutorial zu Live-Aktivitäten