Activités en vie plugin Capacitor

Utilisation de @capgo/capacitor-activités en direct

Capacitor Plugin d'activités Live pour la gestion des activités Live iOS.

Installer

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

Configuration iOS

Installation et synchronisation du plugin ne créent pas l'interface utilisateur native de Live Activity. Avant d'appeler startActivityconfigurez ActivityKit dans Xcode :

1. Exécutez bunx cap open ios.
2. Ajoutez un Extension de widget Extension de Widget cible et activez.
3. Définissez les cibles de déploiement de l'application et de l'extension Widget sur iOS 16.1 ou ultérieur.
4. Assurez-vous que l'extension soit intégrée à l'application principale.
5. garde ActivityConfiguration enregistré dans l'extension's WidgetBundleAvec les présentations de la zone de verrouillage et de l'île dynamique.
6. Ajouter NSSupportsLiveActivities à l'application cible principale Info.plist.

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

Le ciblage de l'application seule n'est pas suffisant. L'application native ou le plugin doivent appeler les API ActivityKit de requête, de mise à jour et de fin. L'extension Widget doit contenir du code SwiftUI code qui peut décoder et afficher le même ActivityAttributes Et l'état de contenu utilisé par ces appels. Incluez les modèles ActivityKit partagés dans les deux applications cibles principale et extension Widget. 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 App Groups La capacité à la cible principale et à l'extension de widget. 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 d'activité Live ne peuvent pas accéder au réseau. Téléchargez les images distantes dans l'application principale, enregistrez-les dans le groupe d'application partagé avec saveImage, puis référez-vous à l'image sauvegardée à partir du layout. Les actifs embarqués doivent également appartenir à la cible d'extension de Widget.

Liens profonds et mises à jour push

• Enregistrez tout schéma de lien personnalisé utilisé par behavior.widgetUrl ou tapUrl sous l'application cible principale Paramètres > Types d'URL settings.
• Pour les mises à jour server-driven, ajoutez le Notifications de Push capacité et mettre en œuvre la gestion du jeton de push d'ActivityKit avec APNs.
• Add NSSupportsLiveActivitiesFrequentUpdates only when the app requires frequent ActivityKit push updates.

Activer la capacité de notifications push seule n'est pas suffisant ; les mises à jour côté serveur nécessitent une gestion de jeton native et un backend APNs.

ActivityKit limits the combined static and dynamic Live Activity data to 4 KB. The Dynamic Island is only visible on supported device models; other devices use the Lock Screen presentation.

consulting_faq_subtitle

• 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.
• startActivity - Démarrer une nouvelle activité en direct avec le layout spécifié et les données.
• updateActivity Mise à jour d'une activité en direct existante avec de nouvelles données.
• endActivity - Finir 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é Live 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

- Finir 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/
• Documentation: /docs/fr/plugins/live-activités/

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

Si vous utilisez L'utilisation de @capgo/capacitor-activités en direct Pour planifier le comportement des médias et de l'interface natives, connectez-l’avec @capgo/capacitor-activités en direct pour les détails d'implémentation dans @capgo/capacitor-activités en direct, Prise en main pour les détails d'implémentation dans Prise en main, L'utilisation de @capgo/capacitor-lecteur de vidéo pour la capacité native dans L'utilisation de @capgo/capacitor-lecteur de vidéo, @capgo/capacitor-lecteur de vidéo pour les détails d'implémentation dans @capgo/capacitor-video-player, et En utilisant @capgo/capacitor-native-navigation pour la capacité native dans En utilisant @capgo/capacitor-native-navigation.