Utilisation de @capgo/capacitor-live-activités

L'interface du plugin Capacitor pour les activités en direct 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 :

Démarrez bunx cap open ios.
Ajoutez un Extension de widget et activer Inclure l'activité en direct.
Configurez les cibles de déploiement de l'application et de l'extension Widget pour iOS 16.1 ou ultérieur.
Assurez-vous que l'extension est intégrée à l'application principale.
garder un ActivityConfiguration enregistré dans l'extension' WidgetBundle, avec la présentation de la zone de verrouillage et toutes les présentations de l'île dynamique.
Ajoutez NSSupportsLiveActivities à la cible de déploiement de l'application principale' 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 Widget doit contenir des code SwiftUI qui peuvent décoder et afficher le même ActivityAttributes et l'état de contenu utilisé par ces appels. Incluez les modèles partagés ActivityKit dans les cibles de déploiement de l'application principale et de l'extension Widget. Le modèle de l'activité en direct généré par Xcode ne rend pas automatiquement les layouts JSON transmis à ce plugin ; l'extension a également besoin d'un rendu de layout natif compatible.

Images partagées

When vous utilisez les méthodes de gestion d'images, ajoutez la App Groups capacité à l'application principale et à l'extension 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é en direct ne peuvent pas accéder au réseau. Téléchargez les images distantes dans l'application principale, enregistrez-les dans le groupe App Group partagé avec saveImage, et référez ensuite à l'image enregistrée à partir de la disposition. Les actifs embarqués doivent également appartenir à la cible de l'extension Widget.

Deep Links et Mises à jour Push

Inscrivez tout schéma d'URL personnalisé utilisé par behavior.widgetUrl ou tapUrl sous la cible de l'application principale Info > Types d'URL paramètres.
Pour les mises à jour pilotées par le serveur, ajoutez la Notifications de Push capacité et implémenter la gestion du jeton de mise à jour d'activité ActivityKit avec APNs.
Ajouter NSSupportsLiveActivitiesFrequentUpdates seulement lorsque l'application nécessite des mises à jour de mise à jour d'activité ActivityKit fréquentes.

Activer la capacité de Notifications de Push seul n'est pas suffisant ; les mises à jour provenant du serveur nécessitent une gestion de jeton native 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 appareils utilisent la présentation de la page de verrouillage.

Ce Qu'Exposent Ce Plugin

areActivitiesSupported - Vérifier si les activités en direct sont prises en charge sur cet appareil. Exige iOS 16.1+ et support du dispositif.
startActivity - Démarrer une nouvelle activité en direct avec le spécifié layout et les données.
updateActivity - Mettre à jour une activité en direct existante avec de nouvelles données.
endActivity - Finir une activité en direct.

Exemples 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 la disposition spécifiée 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`

Terminer 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 Utilisez @capgo/capacitor-activités-en-direct pour planifier un comportement de médias et d'interface natifs, connectez-le à @capgo/capacitor-activités en direct pour les détails d'implémentation dans @capgo/capacitor-activités en direct, Démarrage pour les détails d'implémentation dans Démarrage, Utilisation de @capgo/capacitor-joueur de vidéos pour la capacité native dans Utilisation de @capgo/capacitor-joueur de vidéos, @capgo/capacitor-joueur de vidéos pour les détails d'implémentation dans @capgo/capacitor-joueur de vidéos, et Utilisation de @capgo/capacitor-navigation native pour la capacité native dans Utilisation de @capgo/capacitor-navigation native.

Activités en direct

Tutoriel sur les activités en direct