Mit @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 startActivitykonfigurieren Sie ActivityKit in Xcode:

Ausführen bunx cap open ios.
Fügen Sie ein Widget-Erweiterung Ziel und aktivieren Sie Live-Aktivität einschließen.
Stellen Sie sicher, dass das Ziel der App und der Widget-Erweiterung auf iOS 16.1 oder später eingestellt ist.
Stellen Sie sicher, dass die Erweiterung im Hauptapp integriert ist.
Halten Sie ein ActivityConfiguration registriert in der Erweiterung WidgetBundle, mit Bildschirmschutz und allen Dynamic Island-Anzeigen.
Fügen Sie NSSupportsLiveActivities zum Ziel der Hauptapp Info.plist.

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

Hinzufügen des Ziels allein ist nicht ausreichend. Die native App oder das 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 Zustand des Inhalts, der von diesen Aufrufen verwendet wird. Fügen Sie die gemeinsamen ActivityKit-Modelle sowohl in der Hauptanwendung als auch in der Widget-Erweiterungszielgruppe ein. Das vom Xcode generierte Live-Aktivitätsvorlage renderiert die JSON-Layouts, die an diesen Plugin übergeben werden, nicht automatisch; Die Erweiterung benötigt auch einen kompatiblen nativen Layout-Renderer.

Geteilte Bilder

Wenn Sie die Methoden zur Bildverwaltung verwenden, fügen Sie die App-Gruppen Die Fähigkeit zur App-Gruppe fügen Sie der Hauptanwendung und der Widget-Erweiterungszielgruppe 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ä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 verweisen Sie dann auf das gespeicherte Bild aus der Layout. Verpackte Assets müssen auch der Zielgruppe der Widget-Erweiterung zugeordnet sein.

Tiefenlinks und Push-Updates

Registrieren Sie jede benutzerdefinierte URL-Scheme, die von behavior.widgetUrl oder tapUrl Kontext: HTML-Bereich aus einem längeren Capgo-UI-String (Elternschlüssel `alternatives_cta_questions`). Seite/Bereich: Vergleichsseite für alternative Capgo-Produkte. Rolle: Langen Marketing- oder Rechtsparagraphen. Gesehen in: Seite alternatives.astro. Bewahren Sie Capgo-Produkt- und -Markenbegriffe sowie Entwicklertitel genau auf. Nachrichtenschlüssel `alternatives_cta_questions` (Alternativen-CTA-Fragen). | HTML-Bereich aus einem längeren Capgo-UI-String (Elternschlüssel `appflow_cta_questions`). Seite/Bereich: Appflow-Vergleichsseite. Rolle: Langen Marketing- oder Rechtsparagraphen. Gesehen in: Seite ionic-appflow.astro. Bewahren Sie Capgo-Produkt- und -Markenbegriffe sowie Entwicklertitel genau auf. Nachrichtenschlüssel `appflow_cta_questions` (Appflow-CTA-Fragen). | HTML-Bereich aus einem längeren Capgo-UI-String (Elternschlüssel `capwesome_cta_questions`). Seite/Bereich: Capawesome-Vergleichsseite. Rolle: Langen Marketing- oder Rechtsparagraphen. Gesehen in: Seite capwesome.astro. Bewahren Sie Capgo-Produkt- und -Markenbegriffe sowie Entwicklertitel genau auf. Nachrichtenschlüssel `capwesome_cta_questions` (Capwesome-CTA-Fragen). | Seite/Bereich: Seite für Beratungsdienste. Rolle: Untertitel oder Slogan. Gesehen in: Seite consulting.astro. Bewahren Sie Capgo-Produkt- und -Markenbegriffe sowie Entwicklertitel genau auf. Nachrichtenschlüssel `consulting_faq_subtitle` (Beratungsdienste-Faq-Untertitel). | Seite/Bereich: Appflow-Vergleichsseite. Rolle: Kurzer UI-Label oder Navigationselement. Gesehen in: Seite ionic-appflow.astro, Seite ionic-enterprise-plugins.astro, Seite solutions/ionic-enterprise-plugins.astro. Nachrichtenschlüssel `appflow_plugins_or` (Appflow-Plugins-oder). unter der Zielgruppe der Hauptanwendung unter "Info > URL-Typen" Einrichtungen.
Für servergetriebene Updates fügen Sie die Echtzeit-Benachrichtigungen Kapazität und implementieren Sie die Aktivitäts-Kit-Push-Token-Verwaltung mit APNs.
Hinzufügen NSSupportsLiveActivitiesFrequentUpdates nur, wenn die App häufige Aktivitäts-Kit-Push-Updates erfordert.

Die Aktivierung der Echtzeit-Benachrichtigungen-Kapazität reicht allein nicht aus; servergetriebene Updates erfordern eine native Token-Verwaltung und einen APNs-Hintergrunddienst.

Aktivitäts-Kit 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 Schaltbildschirm.

Was diese Erweiterung offenlegt

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 Datenkonfiguration.
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

GitHub: https://github.com/Cap-go/capacitor-live-aktivitäten/
Dokumentation: /docs/plugins/live-aktivitäten/

Fortsetzen Sie mit der Verwendung von @capgo/capacitor-live-aktivitäten

Wenn Sie Live-Aktivitäten 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 Einführung für die Implementierungsdetails in Einführung 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-navigation für die native Fähigkeit in Mit @capgo/capacitor-native-navigation.

Live Activities

Tutorial zu Live-Aktivitäten