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

Ausführen bunx cap open ios.
Fügen Sie ein Widget-Erweiterung Ziel und aktivieren Sie Einschließen Sie Live-Aktivität.
Stellen Sie die App- und Widget-Erweiterungsbereitstellungsziele auf iOS 16.1 oder höher ein.
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 Hauptapp-Ziel Info.plist.

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

Fügen Sie das Ziel allein hinzu, 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 im Widget-Erweiterungsziel ein. Die vom Xcode generierte Live-Aktivitätsvorlage renderiert die JSON-Layouts, die an diesen Plugin übergeben werden, nicht automatisch; der Erweiterung ist auch ein kompatibles natives Layoutrenderer erforderlich.

Geteilte Bilder

Wenn Sie die Methoden zur Bildverwaltung verwenden, fügen Sie die App-Gruppen Die Fähigkeit zur Hauptanwendung und der Widget-Erweiterungsziel hinzufügen. 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 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, das von behavior.widgetUrl oder tapUrl context HTML-Textfragment aus einem längeren Capgo-UI-String (Elternschlüssel `alternatives_cta_questions`). Seite/Bereich: Vergleichsseite für Live-Aktivitätsalternativen. Rolle: Langer Marketing- oder Rechtsparagraph. Gesehen in: Seite alternatives.astro. Produkt/Marken- und Entwicklertrems von Capgo genau beibehalten. Nachrichtenschlüssel `alternatives_cta_questions` (Alternativen CTA-Fragen). | HTML-Textfragment aus einem längeren Capgo-UI-String (Elternschlüssel `appflow_cta_questions`). Seite/Bereich: Appflow-Vergleichsseite / Migration-Marketing-Text. Rolle: Langer Marketing- oder Rechtsparagraph. Gesehen in: Seite ionic-appflow.astro. Produkt/Marken- und Entwicklertrems von Capgo genau beibehalten. Nachrichtenschlüssel `appflow_cta_questions` (Appflow CTA-Fragen). | HTML-Textfragment aus einem längeren Capgo-UI-String (Elternschlüssel `capwesome_cta_questions`). Seite/Bereich: Capawesome-Vergleichsseite. Rolle: Langer Marketing- oder Rechtsparagraph. Gesehen in: Seite capwesome.astro. Produkt/Marken- und Entwicklertrems von Capgo genau beibehalten. Nachrichtenschlüssel `capwesome_cta_questions` (Capwesome CTA-Fragen). | Seite/Bereich: Seite für Consulting-Dienstleistungen. Rolle: Untertitel oder Slogan. Gesehen in: Seite consulting.astro. Produkt/Marken- und Entwicklertrems von Capgo genau beibehalten. Nachrichtenschlüssel `consulting_faq_subtitle` (Consulting FAQ-Untertitel). | Seite/Bereich: Appflow-Vergleichsseite / Migration-Marketing-Text. 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). Einrichtungen.
Für servergetriebene Updates fügen Sie die Echtzeit-Benachrichtigungen Kapazität und implementieren Sie die Aktivitätskit-Push-Token-Verwaltung mit APNs.
Hinzufügen NSSupportsLiveActivitiesFrequentUpdates nur, wenn die App häufige Aktivitätskit-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ätskit beschränkt die kombinierte statische und dynamische Live-Aktivitätsdaten auf 4 KB. Die Dynamische Insel ist nur auf unterstützten Gerätemodellen sichtbar; andere Geräte verwenden die Anzeige auf dem Bildschirm des Schlosses.

Was diese Plugin-Exposition enthält

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 - 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 die Nutzung von Mit @capgo/capacitor-live-aktivitäten um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit @capgo/capacitor-live-aktivitäten zur Implementierungsdetail in @capgo/capacitor-live-aktivitäten, Anleitung zum Starten zur Implementierungsdetail in Anleitung zum Starten, Mit @capgo/capacitor-video-player zur nativen Fähigkeit in Mit @capgo/capacitor-video-player, @capgo/capacitor-video-player zur Implementierungsdetail in @capgo/capacitor-video-player und Mit @capgo/capacitor-native-navigation zur nativen Fähigkeit in Mit @capgo/capacitor-native-navigation.

Live Activities

Tutorial zu Live-Aktivitäten