Utiliser @capgo/capacitor-live-activities

L'interface du plugin d'activités en direct Capacitor pour gérer 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 de l'activité en direct. Avant d'appeler startActivityConfigurez ActivityKit dans Xcode :

Exécuter bunx cap open ios.
Ajouter un Extension de widget cible et activer Inclure l'activité en direct.
Assurez-vous que l'extension est intégrée dans l'application principale.
Gardez un
enregistré dans l'extension ActivityConfiguration dans l'extension's WidgetBundleavec l'écran de verrouillage et toutes les présentations de l'île dynamique.
Ajouter NSSupportsLiveActivities au cible d'application principale Info.plist.

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

La seule chose d'ajouter la cible n'est pas suffisante. L'application native ou le plugin doit appeler les API de demande, de mise à jour et de fin de ActivityKit. 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 deux cibles d'application principale et d'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 a également besoin d'un rendu de layout natif compatible.

Images partagées

Lors de l'utilisation des méthodes de gestion d'images, ajoutez Groupe d'application capacité à la cible d'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 d'application partagé avec saveImage, et référez ensuite à l'image enregistrée à partir de la mise en page. Les ressources embarquées doivent également appartenir à la cible d'extension Widget.

Lien profond et mises à jour de poussée

Enregistrez tout schéma de URL personnalisé utilisé par behavior.widgetUrl ou tapUrl sous la cible d'application principale > Informations > Types de URL Paramètres. Pour les mises à jour dérivées du serveur, ajoutez la
Notifications de Push capacité et implémentez le traitement de jeton d'activité avec APNs. Ajoutez
seulement lorsque l'application nécessite des mises à jour d'activité APNs fréquentes. NSSupportsLiveActivitiesFrequentUpdates L'activation de la capacité de Notifications de 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 d'activité Live 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.

For server-driven updates, add the __CAPGO_KEEP_0__ capability and implement ActivityKit push-token handling with APNs.

Ce Plugin Expose

areActivitiesSupported - Vérifiez si les activités en direct sont prises en charge sur cet appareil. Exige iOS 16.1+ et support de l'appareil.
startActivity - Démarrer une nouvelle activité en direct avec la disposition spécifiée et les données.
updateActivity - Mettre à jour 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 support 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`

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-vrai-temps/
Docs: /docs/plugins/activités-en-vrai-temps/

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

Si vous utilisez L'utilisation de @capgo/capacitor-activités-en-vrai-temps pour planifier le comportement de médias et d'interface natifs, connectez-le avec @capgo/capacitor-activités-en-vrai-temps pour les détails d'implémentation dans @capgo/capacitor-activités-en-vrai-temps, Démarrage pour les détails d'implémentation dans Démarrage, L'utilisation de @capgo/capacitor-lecteur-de-videos pour la capacité native dans L'utilisation de @capgo/capacitor-lecteur-de-videos, Pour le détail d'implémentation dans @capgo/capacitor-video-player, et pour les détails d'implémentation dans @capgo/capacitor-video-player, et Utilisez @capgo/capacitor-native-navigation pour la capacité native dans Utilisez @capgo/capacitor-native-navigation

Activités en ligne

Tutoriel sur les activités en direct