Anleitung
Tutorial zu Live-Aktivitäten
Verwendung von @capgo/capacitor-live-aktivitäten
Capacitor-Live-Aktivitäten-Plugin-Interface 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. - Hinzufügen eines Widget-Erweiterung Ziel und die Verwendung von Live Aktivität.
- Setzen Sie die App und die Widget-Erweiterung auf iOS 16.1 oder höher fest.
- Stellen Sie sicher, dass die Erweiterung im Hauptapp integriert ist.
- Bleiben Sie bei einer
ActivityConfigurationin der ErweiterungWidgetBundle, mit Bildschirmschutz und allen Dynamic Island-Anzeigen. - Hinzufügen
NSSupportsLiveActivitieszur HauptanwendungInfo.plist.
<key>NSSupportsLiveActivities</key>
<true/>
Die Hinzufügung des Ziels allein ist nicht ausreichend. Die native App oder das Plugin müssen die ActivityKit-APIs request, update und end aufrufen. Der Widget-Erweiterung muss SwiftUI code enthalten, die die gleichen Daten dekodieren und rendern können. ActivityAttributes und den Zustand der Inhalte, die von diesen Aufrufen verwendet werden. Fügen Sie die gemeinsamen ActivityKit-Modelle in beiden Hauptanwendung und Widget-Erweiterungszieldarstellungen ein. Die vom Xcode generierte Live-Aktivitätsvorlage rendernt die JSON-Layouts, die diesem Plugin übergeben werden, nicht automatisch; der Erweiterung ist auch ein kompatibles native Layout-Renderer erforderlich.
Geteilte Bilder
Wenn Sie die Methoden zur Bildverwaltung verwenden, fügen Sie die App-Gruppen Die Fähigkeit zur Hauptanwendung und der Widget-Erweiterung hinzufügen. Aktivieren Sie die gleiche Gruppe auf beiden Zielen, indem Sie den genauen Identifier verwenden, der von dem Plugin erwartet wird:
group.<MAIN_APP_BUNDLE_ID>.liveactivities
Live-Aktivitäts-Erweiterungen können nicht auf das Netzwerk zugreifen. 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. Bundelte Assets müssen auch der Zielgruppe der Widget-Erweiterung zugeordnet sein.
Tiefe Links und Push-Updates
- Registrieren Sie jede benutzerdefinierte URL-Scheme, die
behavior.widgetUrlodertapUrlunter der Hauptanwendungsziel Info > URL-Typen Einstellungen. - Fügen Sie für servergetriebene Updates die Fähigkeit "Benachrichtigungen" hinzu und implementieren Sie die ActivityKit-Push-Token-Verwaltung mit APNs. Hinzufügen
- nur, wenn die Anwendung häufige ActivityKit-Push-Updates benötigt.
NSSupportsLiveActivitiesFrequentUpdatesDie Aktivierung der Fähigkeit "Benachrichtigungen" reicht allein 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. 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 offenlegt
- Überprüfen Sie, ob Live-Aktivitäten auf diesem Gerät unterstützt werden. Erfordert iOS 16.1+ und Geräteunterstützung.
areActivitiesSupported- Überprüfen Sie, ob Live-Aktivitäten auf diesem Gerät unterstützt werden. Erfordert iOS 16.1+ und Geräteunterstützung.startActivity- Eine neue Live-Aktivität mit der angegebenen Layout und Daten starten.updateActivity- Eine bestehende Live-Aktivität mit neuen Daten aktualisieren.endActivity- Eine Live-Aktivität beenden.
- Beispielverwendung
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
- Eine neue Live-Aktivität mit der angegebenen Layout und Daten starten.
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
- Eine bestehende Live-Aktivität mit neuen Daten aktualisieren.
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
- Eine Live-Aktivität 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/
Weitermachen von @capgo/capacitor-live-aktivitäten
Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-aktivitäten verwenden Verwenden Sie @capgo/capacitor-live-aktivitäten Um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-aktivitäten Verbinden Sie @capgo/capacitor-live-aktivitäten Um die Implementierungsdetails in @capgo/capacitor-live-aktivitäten zu erhalten Zum Starten Um die Implementierungsdetails in Zum Starten zu erhalten Verwenden Sie @capgo/capacitor-video-player Um die native Fähigkeit in Verwenden Sie @capgo/capacitor-video-player zu erhalten Verwenden Sie @capgo/capacitor-video-player Um die Implementierungsdetails in Verwenden Sie @capgo/capacitor-video-player zu erhalten Mit @capgo/capacitor-native-Navigation Für die native Fähigkeit in Mit @capgo/capacitor-native-Navigation.