Aller au contenu

@capgo/capacitor-widget-kit

Créez des surfaces WidgetKit et Live Activity depuis Capacitor avec des cadres SVG, des minuteurs, des hotspots d'action ou une synchronisation d'état de widget 100 % natif

Créez des surfaces WidgetKit et Live Activity depuis Capacitor avec des cadres SVG, des minuteurs, des hotspots d'action ou une synchronisation d'état de widget 100 % natif

Commencez par areActivitiesSupported() et les autres méthodes principales listées ci-dessous.

PlateformeSupportNotes
iOSOuiNatif
AndroidOuiNatif
Le WebNonProtéger avec Capacitor.getPlatform()

Widget Kit est pas une passerelle Siri ou Shortcuts. Il prend en charge WidgetKit, les modèles ActivityKit pour les Live Activities, et les contrôles iOS interactifs via des types LiveActivityIntent groupés (CapgoTemplateActionIntent, CompleteSetIntent) qui mettent à jour l'état du modèle stocké et ajoutent à l' event log (listTemplateEvents / acknowledgeTemplateEvents).

Il permet de pas register custom shortcut phrases, AppShortcutsProvider, des catalogues d'entités JavaScript, des éléments Spotlight ou des schémas d'app Apple. Utilisez @capgo/capacitor-app-intents pour cela. Pour une comparaison complète avec des outils comme expo-app-intents, consultez Siri, Raccourcis et widgets.

Démo WidgetKit animée montrant l'état du widget de template et les contrôles pilotés par Capacitor
Flux de templates de widget
ModeIdéal pourPrincipales API
Activité via template SVGLive Activities ou surfaces de widgets rendues à partir d'un rendu SVGstartTemplateActivity, performTemplateAction, listTemplateEvents
Session de widget full-nativeWidgets rendus nativement nécessitant un état partagé et des tâches asynchronesstartWidgetSession, updateWidgetSession, sendWidgetMessage

Les deux modes peuvent coexister dans la même application. Par exemple, une application de fitness peut utiliser une Live Activity SVG pour des contrôles rapides de timer/cadence, et une session de widget full-native pour un widget d'écran d'accueil avec une mise en page native plus riche.

Les templates SVG incluent les éléments nécessaires aux surfaces de widgets interactives :

  • frames contient des variantes SVG nommées telles que summary, timer, ou details.
  • frameMutations switch, toggle, ou pour parcourir les frames après une action sur un hotspot.
  • timerMutations démarrer, mettre en pause, reprendre, basculer, réinitialiser, arrêter ou modifier la durée du timer.
  • patches mettre à jour l'état JSON à l'aide de valeurs littérales, de templates, d'horodatages, d'incréments, de bascules ou d'opérations de suppression.
  • hotspots mapper les zones de tap aux identifiants d'action.
  • listTemplateEvents permet à l'app de traiter ultérieurement les actions provenant des widgets.

Le runtime résout les placeholders comme {{state.title}}, {{timers.rest.remainingText}}, et {{meta.template.kind}} avant que le bridge natif ne renvoie une surface pour le rendu.

Les sessions full-native sont destinées aux widgets qui génèrent leur propre interface nativement :

  • startWidgetSession crée un état partagé et des métadonnées pour le widget natif code.
  • updateWidgetSession fusionne ou remplace l'état et marque à nouveau la session comme active.
  • stopWidgetSession enregistre un état final et marque la session comme arrêtée.
  • sendWidgetMessage met en file d'attente les tâches entre l'app et le widget.
  • acknowledgeWidgetMessages marque les messages comme reçus.
  • completeWidgetMessage stocke une réponse ou un échec pour les jobs asynchrones.

Les messages sont idempotents une fois terminés : réessayer un message terminé ou échoué renvoie le résultat existant au lieu de l'écraser.

MéthodeDescription
areActivitiesSupportedVérifiez si le bridge de l'activité du template natif peut s'exécuter sur l'appareil actuel.
startTemplateActivityPersistez une activité de template SVG et lancez le bridge natif de Live Activity.
updateTemplateActivityRemplacez la définition de l'activité, l'état ou l'URL d'ouverture.
endTemplateActivityTerminez une activité en cours et, optionnellement, persistez un dernier snapshot de l'état.
performTemplateActionExécutez des patches déclaratifs, des mutations de frames, des mutations de timers et le logging d'événements.
getTemplateActivityLisez une activité de template stockée.
listTemplateActivitiesListez toutes les activités de template stockées.
listTemplateEventsLisez les événements d'action émis par les actions du template.
acknowledgeTemplateEventsMarquez les événements du template comme traités.
startWidgetSessionDémarrez une session de widget full-native basée sur un état JSON partagé.
updateWidgetSessionFusionnez ou remplacez l'état d'une session de widget full-native.
stopWidgetSessionArrêtez une session de widget full-native et, optionnellement, persistez l'état final.
getWidgetSessionLire une session de widget full-native.
listWidgetSessionsLister toutes les sessions de widget full-native.
sendWidgetMessageMettez en file d'attente un message entre l'application et le widget natif code.
listWidgetMessagesListe les messages de bridge en attente.
acknowledgeWidgetMessagesMarquer les messages du bridge comme acquittés.
completeWidgetMessageTerminer ou échouer un message de bridge asynchrone.
getPluginVersionRetourne l'indicateur de version de l'implémentation de la plateforme.

Le plugin fournit également des helpers natifs pour les cibles de widget :

  • CapgoTemplateWidgetBridge résout une surface de template SVG en svg, frameId, hotspots, et les métadonnées.
  • CapgoTemplateActionIntent connecte les boutons de widgets iOS interactifs aux actions de template.
  • CapgoNativeWidgetBridge charge les sessions et messages full-native depuis le widget natif code.
  • Les helpers de templates Android fournissent un action receiver et un comportement de widget bridge équivalents.

La référence API est synchronisée depuis src/definitions.ts dans le dépôt du plugin.

Pour aller plus loin avec @capgo/capacitor-widget-kit

Section intitulée « Pour aller plus loin avec @capgo/capacitor-widget-kit »

Si vous utilisez @capgo/capacitor-widget-kit pour planifier l'automatisation CI/CD, et le connecter avec Utiliser @capgo/capacitor-widget-kit pour la capacité native dans l'utilisation de @capgo/capacitor-widget-kit, CI/CD Capgo pour le workflow produit dans le CI/CD de Capgo, Capgo Native Build pour le workflow produit dans les Native Builds de Capgo, Intégrations Capgo pour le workflow produit dans les intégrations Capgo, et Intégration CI/CD pour le détail d'implémentation dans l'intégration CI/CD.