Un Live Activity est un élément d'interface d'iOS qui permet de voir de l'information à jour tel que le progrès d'une tâche, d'une activité ou d'un événement d'un coup d'oeil.

Utiliser les Live Activities dans votre application permet d'offrir une expérience enrichie grâce à une intégration profonde de votre app avec iOS.

Pour cet article, nous utiliserons Expo, la plateforme de développement pour React Native. Expo permet, entre autres, d'utiliser du code React Native en JavaScript ou TypeScript sur iOS, Android et le Web. Depuis peu, Expo permet le développement de modules natifs, ce qui ouvre la voie à l'écriture de code spécifique à une plateforme spécifique - Swift pour iOS, Kotlin pour Android - sans avoir à éjecter le projet d'Expo (Bare Workflow).

Tout le code nécessaire au bon fonctionnement et à la maintenance d'une Live Activity sont fourni dans deux répertoires GitHub: un pour l'interface sous forme de projet XCode et un pour le module de contrôle sous forme d'un module natif Expo.

Pré-requis

Pour tirer le meilleur parti de cet article, vous devriez idéalement posséder ceci:

• Des connaissances de base de la plateforme de développement Expo et de TypeScript.
• Des notions de base de la programmation pour comprendre Swift, mais nul besoin d'avoir de l'expérience préalable.
• XCode 15+ pour pouvoir développer dans un IDE. Non essentiel si vous utilisez EAS Build, mais vous ne verrez pas le résultat avant de compiler.

Implémentation avec Expo

Pour créer des Live Activities, deux éléments importants écrits en code natif sont nécessaires:

• Le code définissant l'interface de la "Dynamic Island" et de la bannière d'écran verrouillé.
• Le code définissant l'API de contrôle de cette activité, afin de pouvoir la débuter et la terminer.

Voici un aperçu de ce à quoi ressemble l'interface d'une Live Activity en pratique:

L'interface des Live Activities

Débutons en créant l'interface visuelle de l'activité tel que l'utilisateur la verra. L'objectif de cet article est de décrire comment intégrer cette interface à l'aide d'Expo et React-Native, plutôt que de se concentrer sur son développement. La méthode la plus efficace pour se familiariser avec les Live Activities est probablement en suivant la documentation officielle à ce sujet tout en créant un projet Xcode simple afin de vous familiariser avec Swift et développer l'extension. De nombreuses vidéos sur YouTube peuvent également aider à mieux comprendre la mise en œuvre.

Pour faciliter le processus, nous avons mis à votre disposition un répertoire GitHub avec un projet rudimentaire fonctionnel. Ce code sera réutilisé dans l'implémentation avec Expo. Il contient 2 applications ou Targets. Dans le dossier "Fizl" se situe l'application iOS classique et dans le dossier "Fizl Activity" se situe ce que Apple appelle Widget Extension.

Dans le schéma suivant, l'interface est définie par le composant Live Activity. L'API de contrôle est définie par le module Live Activity Control Module. Nous allons débuter par faire un survol du code de l'interface afin de mieux comprendre son fonctionnement.

Pour implémenter une extension de Widget (notant que Live Activity est également un widget), il est nécessaire de créer une deuxième cible ou Target avec Expo. Heureusement, il existe un plugin qui permet d'ajouter des cibles à un projet expo: expo-targets. Il suffit simplement de suivre les instructions présentes dans le README du plugin.

Au moment de l'écriture de cet article, dans le README d'expo-target, "teamId" devrait plutôt être "appleTeamId".

Voici notre configuration du fichier expo-target.config.js:

/** @type {import('@bacons/apple-targets').Config} */
module.exports = {
  type: 'widget',
  name: 'Live Activity',
  frameworks: ['SwiftUI', 'ActivityKit'],
};

Nous avons ensuite copié-collé les fichiers Fizl_LiveActivity.swift, Attributes.swift, Assets.xcassets, Info.plist et finalement nous avons renommé Bundle.swift à index.swift afin d'être compatible avec expo-target.

Si vous compilez l'app avec eas build à ce stade, eas vous demandera de signer cette nouvelle extension (eas vous guidera simplement à travers les étapes). Il ne vous reste plus qu'à contrôler l'activité.

Contrôler une Live Activity à partir de React-Native

Le code de l'interface est en quelque sorte une application isolée de notre application principale. On ne peut donc pas interagir directement avec elle. Il faudra donc un module Expo natif séparé, conçu spécifiquement pour interagir avec l'activité. Heureusement, l'interaction avec une activité se fait à l'aide de la classe Activity, qui interagit avec iOS.

Pour créer un module Expo natif, simplement utiliser la commande npx create-expo-module@latest --local. Votre module sera créé dans le dossier modules. Nous mettons à votre disposition le module que nous utilisons chez Fizl dans un répertoire GitHub. Vous devrez ajuster le code pour votre activité spécifiquement, mais la structure et les noms des fichiers peuvent demeurer identiques.

Ainsi, passons brièvement sur le fonctionnement du module.

Premièrement, vous remarquerez que le fichier Attributes.swift est présent à la fois dans le module et dans le code de l'interface de l'activité. Il est essentiel que ce code reste identique, parce que iOS reconnaît quelle activité contrôler grâce à cette struct.

Ensuite, le code de contrôle natif se retrouve dans le fichier LiveActivityControlModule.swift. Afin de pouvoir conserver une compatibilité avec iOS 13 comme cible minimale, nous utilisons la compilation conditionnelle afin de seulement rendre disponible certaines parties du code sur iOS 16.2. Les fonctions startActivity et liveActivity prennent en argument une liste de paramètres qui seront passés à l'activité.

Pour terminer une activité, il faut quand même passer des paramètres, car il est possible de laisser une activité affichée sur l'écran verrouillé une fois terminée en utilisant dismissalPolicy: .default.

Ces fonctions sont accessibles, mais sans génération de types, grâce au LiveActivityControlModule importé dans index.ts. Afin de typer les fonctions pour assurer la fiabilité de l'interface, nous avons enveloppé et typé ces fonctions.

Maintenant, vous pouvez utiliser les fonctions exportées de l'index comme startActivity pour contrôler les activités.

if (areActivitiesEnabled()) {
  startActivity({
    startTime: startDate,
    endTime: endDate,
    headline: headlineString,
    title: titleString,
    widgetUrl: deepLinkUrl,
  });
}

Avant d'appeler la fonction qui démarre l'activité, nous vérifions que les activités sont bel et bien supportées sur l'appareil.

En exécutant ce code à partir de votre code d'application, vous devriez voir votre activité sur l'écran verrouillé et dans l'espace "Dynamic Island"!

Limitations

Les Live Activities affichent de l'information d'une tâche ayant un début et une fin. De par leur nature, elles ont quelques limitations:

• Si l'activité dure plus de 12 heures, iOS y mettra fin automatiquement.
• Les Live Activities ne peuvent pas faire de requêtes web, donc ne peux pas facilement charger d'images hébergées sur le web. Par contre, il est possible de pré-charger ces images et des les partages dans le App Group (storage local) afin qu'elles puissent être récupérées par le Live Activity. Une ébauche de code est disponible sur le forum des développeurs d'Apple.
• Les mises à jour des Live Activities sont faites à l'aide de notifications push. Nous laissons cela comme un exercice au lecteur. Vous pouvez en apprendre plus dans la documentation officielle d'Apple.

Conclusion

Les Live Activities offrent une opportunité unique d'enrichir l'expérience utilisateur sur iOS. En les intégrant à vos applications via Expo, vous pouvez non seulement améliorer l'engagement des utilisateurs mais aussi offrir des fonctionnalités innovantes et pratiques. N'hésitez pas à expérimenter et à explorer toutes les possibilités qu'elles offrent.

Pour aller plus loin, vous pouvez développer des Widgets. Pour ce faire vous n'aurez qu'a ajouter des Widgets définis en Swift dans le dossier contenant l'interface (Live Activity), en prenant soins de les exporter dans le fichier index.swift. Pour plus d'informations, consultez la documentation officielle d'Apple.