Allez directement au contenu principal
Capgo logo
Retour aux plugins
@capgo/capacitor-activités-en-vivre
Tutoriel
@capgo/capacitor-activités-en-vivre

Activités en direct

Gérez les activités en direct iOS et les dispositions de l'île dynamique à partir de Capacitor avec des modèles JSON

Activités téléchargées par mois

0

Étoiles GitHub

6

Guide

Tutoriel sur les activités en direct

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

Capacitor : plugin d'activités en direct pour la gestion des 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 d'activité native. Avant d'appeler startActivity, configure ActivityKit dans Xcode:

  1. Exécuter bunx cap open ios.
  2. Ajouter un Extension de widget cible et activer Inclure une activité en direct.
  3. Définir les cibles de déploiement de l'application et de l'extension de widget sur iOS 16.1 ou ultérieur.
  4. Vérifiez que l'extension est intégrée à l'application principale.
  5. Considérez un ActivityConfiguration enregistré dans le registre de l'extension WidgetBundle, avec présentation de la zone de verrouillage et toutes les présentations de l'île dynamique.
  6. Ajouter NSSupportsLiveActivities à l'application principale cible Info.plist.
<key>NSSupportsLiveActivities</key>
<true/>

La cible ajoutée seule n'est pas suffisante. L'application native ou le plugin doivent appeler les API ActivityKit de demande, de mise à jour et de fin. L'extension Widget doit contenir des SwiftUI code 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 de l'application principale et de l'extension Widget. Le modèle de Live Activity généré par Xcode ne rend pas automatiquement les layouts JSON passés à 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 le Groupe d'applications La capacité au groupe d'applications doit être ajoutée à 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és 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'applications partagé avec __CAPGO_KEEP_1__, et référez ensuite à l'image enregistrée à partir du layout. Les ressources embarquées doivent également appartenir à la cible de l'extension Widget. saveImageTéléchargements profonds et mises à jour push

Enregistrez tout schéma de URL personnalisé utilisé par __CAPGO_KEEP_2__ ou __CAPGO_KEEP_3__

  • ou behavior.widgetUrl 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 et les termes de développeur exactement. Clé de message `alternatives_cta_questions` (Questions de CTA des 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 et les termes de développeur exactement. Clé de message `appflow_cta_questions` (Questions de CTA d'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 et les termes de développeur exactement. Clé de message `capwesome_cta_questions` (Questions de CTA de Capawesome). | 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 et les termes de développeur exactement. Clé de message `consulting_faq_subtitle` (Sous-titre FAQ des services 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) tapUrl en dessous de l'application cible principale Info > Types d'URL Paramètres.
  • Pour les mises à jour dérivées du serveur, ajoutez la Notifications Push context : Page/zone : Site web de marketing Capgo. Rôle : Étiquette de navigation ou élément de menu court. Clé de message `push_notifications` (Notifications Push).
  • capacité et implémentez le traitement de jetons d'activité avec APNs avec ActivityKit. NSSupportsLiveActivitiesFrequentUpdates Ajoutez

seulement lorsque l'application nécessite des mises à jour d'activité push fréquentes.

Activer la capacité de Notifications Push seul n'est pas suffisant ; les mises à jour dérivées du serveur nécessitent un traitement de jetons natifs 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.

  • areActivitiesSupported Cela Expose ce Plugin : - Vérifiez si les activités en direct sont prises en charge sur cet appareil. Exige iOS 16.1+ et prise en charge du dispositif.
  • startActivity - Créez une nouvelle activité en direct avec le layout spécifié et les données.
  • updateActivity - Mettez à jour une activité en direct existante avec de nouvelles données.
  • endActivity - Finissez une activité en direct.

- Exemple d'utilisation

areActivitiesSupported

- Vérifiez si les activités en direct sont supportées 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

- Créez 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

- Mettez à 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

- Finissez 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

Continuez à partir de l'utilisation 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 natifs, connectez-l’à @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-lecteur de vidéo, et Utilisez @capgo/capacitor-navigation-native pour la capacité native dans Utilisez @capgo/capacitor-navigation-native.