Utilisation de @capgo/capacitor-live-activities

Capacitor Activités en direct Plugin interface pour gérer les activités iOS.

Installer

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

Configuration iOS

L'installation et la synchronisation du plugin ne créent pas l'interface utilisateur native des activités en direct. Avant d'appeler startActivity, configurez ActivityKit dans Xcode :

Exécuter bunx cap open ios.
Ajoutez un Extension de widget cible et activez Incluez une activité en direct.
Définissez les cibles de déploiement de l'application et de l'extension de widget sur iOS 16.1 ou une version ultérieure.
Assurez-vous que l'extension est intégrée à l'application principale.
Considérez un ActivityConfiguration enregistré dans l'extension's WidgetBundle, avec la présentation de la zone de verrouillage et toutes les présentations de Dynamic Island.
Ajoutez NSSupportsLiveActivities à la cible de l'application principale's Info.plist.

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

L'ajout de la cible seule n'est pas suffisant. L'application native ou le plugin doit appeler les API ActivityKit de demande, de mise à jour et de fin. L'extension de widget doit contenir des code SwiftUI qui peuvent décoder et afficher la même ActivityAttributes et l'état de contenu utilisé par ces appels. Incluez les modèles partagés ActivityKit dans les deux cibles principales et Widget Extension. Le modèle de Live Activity généré par Xcode ne rend pas automatiquement les layouts JSON transmis à ce plugin ; l'extension nécessite également un rendu de layout natif compatible.

Images partagées

Lors de l'utilisation des méthodes de gestion d'images, ajoutez le Groupes d'applications capacité à la cible principale et aux cibles Widget Extension. Activez le même groupe sur les deux cibles en utilisant l'identifiant exact attendu par le plugin :

group.<MAIN_APP_BUNDLE_ID>.liveactivities

Les extensions de Live Activity ne peuvent pas accéder au réseau. Téléchargez les images distantes dans l'application principale, enregistrez-les dans le groupe d'applications partagé avec saveImageet référez ensuite à l'image enregistrée à partir de la mise en page. Les ressources embarquées doivent également appartenir à la cible Widget Extension.

Liens profonds et mises à jour Push

Enregistrez tout schéma de lien personnalisé utilisé par behavior.widgetUrl ou tapUrl context : fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `alternatives_cta_questions`). Page/zone : page de comparaison des alternatives de mise à jour en direct de Capacitor. Rôle : Paragraphe marketing ou juridique long. Vu dans : page alternatives.astro. Préservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `alternatives_cta_questions` (Questions de CTA Alternatives). | Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `appflow_cta_questions`). Page/zone : page de comparaison/migration de Appflow. Rôle : Paragraphe marketing ou juridique long. Vu dans : page ionic-appflow.astro. Préservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `appflow_cta_questions` (Questions de CTA Appflow). | Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `capwesome_cta_questions`). Page/zone : page de comparaison de Capawesome. Rôle : Paragraphe marketing ou juridique long. Vu dans : page capwesome.astro. Préservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `capwesome_cta_questions` (Questions de CTA Capwesome). | Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `consulting_faq_subtitle`). Page/zone : page de services de conseil. Rôle : Sous-titre ou tagline de section. Vu dans : page consulting.astro. Préservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `consulting_faq_subtitle` (Sous-titre FAQ de conseil). | Page/zone : page de comparaison/migration d'Appflow. Rôle : Étiquette de navigation ou élément de navigation court. Vu dans : page ionic-appflow.astro, page ionic-enterprise-plugins.astro, page solutions/ionic-enterprise-plugins.astro. Clé de message `appflow_plugins_or` (Appflow Plugins ou). sous la cible principale de l'application's : « Informations > Types de URL » paramètres.
Pour les mises à jour dérivées du serveur, ajoutez la Notifications Push capacité et implémentez le traitement de jeton d'ActivityKit avec APNs.
Ajoutez NSSupportsLiveActivitiesFrequentUpdates seulement lorsque l'application nécessite des mises à jour de push fréquentes d'ActivityKit.

L'activation de la capacité de Notifications Push seule n'est pas suffisante ; les mises à jour dérivées du serveur nécessitent un traitement de jeton natif et un backend APNs.

ActivityKit limite les données de Live Activity statiques et dynamiques combinées à 4 Ko. L'île dynamique n'est visible que sur les modèles de dispositifs pris en charge ; les autres dispositifs utilisent la présentation de la zone de verrouillage.

Ce que ce plugin expose

areActivitiesSupported - Vérifiez si les activités en direct sont prises en charge sur ce dispositif. Exige iOS 16.1+ et support du dispositif.
startActivity - Démarrez une nouvelle activité en direct avec la disposition spécifiée et les données.
updateActivity - Mettez à jour une activité en direct existante avec de nouvelles données.
endActivity - Mettre fin à une activité en direct.

Exemple d'utilisation

`areActivitiesSupported`

Vérifiez si les activités en direct sont prises en charge sur cet appareil. Exige iOS 16.1+ et prise en charge de l'appareil.

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`

Démarrer une nouvelle activité en direct avec le layout spécifié et les données.

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`

Mettre à jour une activité en direct existante avec de nouvelles données.

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`

Mettre fin à une activité en direct.

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

Référence complète

GitHub: https://github.com/Cap-go/capacitor-activités-en-direct/
Docs: /docs/plugins/activités-en-direct/

Continuez à partir de l'utilisation de @capgo/capacitor-activités-en-direct

Si vous utilisez Using @capgo/capacitor-live-activities pour planifier le comportement de médias et d'interface natifs, connectez-l’avec @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, Prise en main pour les détails d'implémentation dans Prise en main, Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, @capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player, and Using @capgo/capacitor-native-navigation for the native capability in Using @capgo/capacitor-native-navigation.

Activités en direct

Tutoriel sur les activités en direct