> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuration SDK Live Activity multiplateforme

> Apprenez à implémenter les Live Activities dans les SDK Wrapper de OneSignal comme React Native, Flutter, Unity, Cordova, et plus encore, avec support pour Push To Start et le type de Live Activity par défaut.

Les Live Activities sont une fonctionnalité iOS relativement nouvelle et nécessitent une implémentation native, ce qui peut poser des défis lors de l'utilisation de frameworks multiplateformes comme React Native, Flutter, Unity, Cordova, etc. Pour simplifier le processus, le SDK de OneSignal inclut des fonctionnalités qui minimisent les exigences de code natif, permettant une intégration rationalisée des Live Activities sur les plateformes prises en charge.

## Prérequis

* La dernière version de notre SDK.
* iOS 16.1+ et iPadOS 17+
* Utilisez une [clé APNs .p8](./ios-p8-token-based-connection-to-apns). Apple ne prend pas en charge les certificats p12 avec les Live Activities.
* Xcode 14 ou supérieur

## Configuration

### 1. Configurer notre SDK

Assurez-vous d'avoir configuré la version la plus récente de notre SDK Mobile sur votre application. Les Live Activities ne sont pas disponibles pour les sites web ni avec notre SDK Web.

<Columns cols={2}>
  <Card href="./unity-sdk-setup">
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
      <div style={{ flexShrink: 0, width: '40px', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src="https://mintcdn.com/onesignal/4HyuQPBpu-4xjmQC/images/docs/cms/Docs/docs-unity.png?fit=max&auto=format&n=4HyuQPBpu-4xjmQC&q=85&s=4f65e7750194bcbdc08b8f1549d27eb5" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} width="96" height="96" data-path="images/docs/cms/Docs/docs-unity.png" />
      </div>

      <div>
        <div style={{ fontWeight: '600', fontSize: '1.1rem', marginBottom: '0.25rem' }}>
          Unity
        </div>

        <div>
          Guide SDK multiplateforme pour applications mobiles Unity.
        </div>
      </div>
    </div>
  </Card>

  <Card href="./react-native-sdk-setup">
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
      <div style={{ flexShrink: 0, width: '40px', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src="https://mintcdn.com/onesignal/4HyuQPBpu-4xjmQC/images/docs/cms/Docs/docs-react.png?fit=max&auto=format&n=4HyuQPBpu-4xjmQC&q=85&s=dddbb392fdea1f20e0d9e20e6d90098a" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} width="96" height="96" data-path="images/docs/cms/Docs/docs-react.png" />
      </div>

      <div>
        <div style={{ fontWeight: '600', fontSize: '1.1rem', marginBottom: '0.25rem' }}>
          React Native & Expo
        </div>

        <div>
          Instructions de configuration pour les environnements React Native et Expo.
        </div>
      </div>
    </div>
  </Card>

  <Card href="./flutter-sdk-setup">
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
      <div style={{ flexShrink: 0, width: '40px', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src="https://mintcdn.com/onesignal/4HyuQPBpu-4xjmQC/images/docs/cms/Docs/docs-flutter.png?fit=max&auto=format&n=4HyuQPBpu-4xjmQC&q=85&s=09904d15d1b7bd1c5f902a6101c13a22" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} width="96" height="96" data-path="images/docs/cms/Docs/docs-flutter.png" />
      </div>

      <div>
        <div style={{ fontWeight: '600', fontSize: '1.1rem', marginBottom: '0.25rem' }}>
          Flutter
        </div>

        <div>
          Guide SDK pour applications Flutter utilisant Dart.
        </div>
      </div>
    </div>
  </Card>

  <Card href="./cordova-sdk-setup">
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
      <div style={{ flexShrink: 0, width: '40px', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src="https://mintcdn.com/onesignal/4HyuQPBpu-4xjmQC/images/docs/cms/Docs/docs-ionic.png?fit=max&auto=format&n=4HyuQPBpu-4xjmQC&q=85&s=b9e33554d01ff7413f11f9bbf1f4a1b2" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} width="96" height="96" data-path="images/docs/cms/Docs/docs-ionic.png" />
      </div>

      <div>
        <div style={{ fontWeight: '600', fontSize: '1.1rem', marginBottom: '0.25rem' }}>
          Ionic & Ionic Capacitor
        </div>

        <div>
          Configuration pour applications mobiles hybrides Ionic et Capacitor.
        </div>
      </div>
    </div>
  </Card>

  <Card href="./net-sdk-setup">
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
      <div style={{ flexShrink: 0, width: '40px', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src="https://mintcdn.com/onesignal/F6GiolM7XhfdYah_/images/docs/cms/Docs/docs-logo-dotnet.svg?fit=max&auto=format&n=F6GiolM7XhfdYah_&q=85&s=89024e079243d091d9bd6fda0493242d" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} width="48" height="48" data-path="images/docs/cms/Docs/docs-logo-dotnet.svg" />
      </div>

      <div>
        <div style={{ fontWeight: '600', fontSize: '1.1rem', marginBottom: '0.25rem' }}>
          .NET MAUI
        </div>

        <div>
          Guide d'intégration pour applications .NET MAUI.
        </div>
      </div>
    </div>
  </Card>

  <Card href="./huawei-sdk-setup">
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
      <div style={{ flexShrink: 0, width: '40px', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src="https://mintcdn.com/onesignal/4HyuQPBpu-4xjmQC/images/docs/cms/Docs/docs-huawei.png?fit=max&auto=format&n=4HyuQPBpu-4xjmQC&q=85&s=d15371678eda8514d135b2d4cc51a56a" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} width="96" height="96" data-path="images/docs/cms/Docs/docs-huawei.png" />
      </div>

      <div>
        <div style={{ fontWeight: '600', fontSize: '1.1rem', marginBottom: '0.25rem' }}>
          Huawei Android Native
        </div>

        <div>
          Configuration SDK pour appareils Huawei utilisant les services push HMS.
        </div>
      </div>
    </div>
  </Card>
</Columns>

### 2. Ajouter la nouvelle méthode `setupDefault`

Pour indiquer au SDK OneSignal de gérer le cycle de vie LiveActivity pour le type `DefaultLiveActivityAttributes`, vous pouvez appeler la méthode `setupDefault`. Cette méthode vous permet d'utiliser à la fois les API [Démarrer Live Activity](/reference/start-live-activity) et [Mettre à jour Live Activity](/reference/update-live-activity-api) pour démarrer/mettre à jour/terminer la Live Activity par défaut.

<CodeGroup>
  ```javascript React Native/Expo theme={null}
  import { OneSignal } from 'react-native-onesignal'

  //Push To Start
  OneSignal.LiveActivities.setupDefault()

  //Launching the Live Activity from within the app (not needed for push to start)
  const activityId = "my_activity_id"
  const attributes = { title: "Sample Title" } ;
  const content = { message: { en: "message" } };
  OneSignal.LiveActivities.startDefault(activityId, attributes, content);

  ```

  ```csharp Unity theme={null}
  using OneSignalSDK;

  //Push To Start
  OneSignal.LiveActivities.SetupDefault();

  //Launching the Live Activity from within the app (not needed for push to start)
  string activityId = "my_activity_id";

  OneSignal.LiveActivities.StartDefault(
    activityId,
    new Dictionary<string, object>() {
        { "title", "Welcome!" }
    },
    new Dictionary<string, object>() {
        { "message", new Dictionary<string, object>() {
            { "en", "Hello World!"}
        }},
    });
  ```

  ```javascript Cordova/Ionic theme={null}
  /*Cordova*/

  //Push To Start
  window.plugins.OneSignal.LiveActivities.setupDefault();

  //Launching the Live Activity from within the app (not needed for push to start)
  const activityId = "my_activity_id";
  const attributes = { title: "Sample Title" };
  const content = { message: { en: "message" } };
  window.plugins.OneSignal.LiveActivities.startDefault(
    activityId,
    attributes,
    content
  );

  /*Ionic/Capacitor*/
  import OneSignal from "onesignal-cordova-plugin";

  //Push To Start
  OneSignal.LiveActivities.setupDefault();

  //Launching the Live Activity from within the app (not needed for push to start)
  const activityId = "my_activity_id";
  const attributes = { title: "Sample Title" };
  const content = { message: { en: "message" } };
  OneSignal.LiveActivities.startDefault(activityId, attributes, content);
  ```

  ```csharp .NET theme={null}
  using OneSignalSDK;

  //Push To Start
  OneSignal.LiveActivities.SetupDefault();

  //Launching the Live Activity from within the app (not needed for push to start)
  string activityId = "my_activity_id";

  OneSignal.LiveActivities.StartDefault(
    activityId,
    new Dictionary<string, object>() {
        { "title", "Welcome!" }
    },
    new Dictionary<string, object>() {
        { "message", new Dictionary<string, object>() {
            { "en", "Hello World!"}
        }},
    });
  ```

  ```javascript Flutter theme={null}
  import 'package:onesignal_flutter/onesignal_flutter.dart';

  OneSignal.LiveActivities.setupDefault()

  //Launching the Live Activity from within the app (not needed for push to start)
  const String activityId = "my_activity_id";
  OneSignal.LiveActivities.startDefault(activityId!, {
    "title": "Welcome!"
    }, {
    "message": {"en": "Hello World!"},
  });
  ```
</CodeGroup>

### 3. Créer un Widget Activity

<Steps>
  <Step title="Mettre à jour votre Info.plist">
    Dans Xcode, ouvrez le `Info.plist` de votre cible principale, ajoutez la clé `Supports Live Activities` en tant que **Boolean**, et définissez-la sur `YES`.

    <Frame caption="Ajouter la clé Supports Live Activities à Info et définir sa valeur sur Boolean YES">
      <img src="https://mintcdn.com/onesignal/yt4lRKoquAlWvRvF/images/live-activities/info-la-setting.png?fit=max&auto=format&n=yt4lRKoquAlWvRvF&q=85&s=e839231401651b71d0ae8d48614ec130" width="2166" height="1488" data-path="images/live-activities/info-la-setting.png" />
    </Frame>

    <Note>
      Lors de la mise à jour des Live Activities, vous avez la possibilité de définir une "priorité" qu'Apple utilise pour déterminer l'urgence de la mise à jour. Apple dispose de seuils internes pour limiter les demandes qui utilisent trop fréquemment l'indicateur de priorité élevée.

      Si vos cas d'utilisation pour les Live Activities nécessitent des mises à jour de haute priorité plus fréquentes, vous pouvez ajouter la clé `NSSupportsLiveActivitiesFrequentUpdates` à votre Info.plist en tant que type Boolean défini sur YES comme indiqué dans la [documentation développeur d'Apple](https://developer.apple.com/documentation/activitykit/starting-and-updating-live-activities-with-activitykit-push-notifications#Determine-the-update-frequency). Les utilisateurs verront une boîte de dialogue lorsque la Live Activity dépasse son budget push, et s'ils autorisent la Live Activity à continuer, le budget sera automatiquement augmenté pour une expérience utilisateur fluide.
    </Note>
  </Step>

  <Step title="Créer une Widget Extension">
    Dans Xcode, allez dans **Fichier > Nouveau > Cible... > Widget Extension**.

    <Frame caption="Ajouter une nouvelle cible Widget Extension pour votre application dans Xcode.">
      <img src="https://mintcdn.com/onesignal/FXJz6yFfOqztaEND/images/live-activities/live-activity-widget-extension.png?fit=max&auto=format&n=FXJz6yFfOqztaEND&q=85&s=60a52d6484203c4d6af21bc3a7da5e62" width="2166" height="1488" data-path="images/live-activities/live-activity-widget-extension.png" />
    </Frame>

    Sélectionnez et appuyez sur **Suivant**.

    Configurez la Widget Extension en fournissant un nom (exemple : `OneSignalWidget`) et assurez-vous que **Include Live Activity** est sélectionné. Ensuite, cliquez sur **Terminer**.

    <Frame caption="Options de Widget Extension pour une Live Activity.">
      <img src="https://mintcdn.com/onesignal/yt4lRKoquAlWvRvF/images/live-activities/OneSignalWidget.png?fit=max&auto=format&n=yt4lRKoquAlWvRvF&q=85&s=47412314963f6fbd58fd2c7d3a529322" width="2166" height="1488" data-path="images/live-activities/OneSignalWidget.png" />
    </Frame>

    Cliquez sur **Don't Activate** si vous êtes invité à activer le schéma.

    <Frame caption="Options de Widget Extension pour une Live Activity.">
      <img src="https://mintcdn.com/onesignal/yt4lRKoquAlWvRvF/images/live-activities/la-scheme-activation.png?fit=max&auto=format&n=yt4lRKoquAlWvRvF&q=85&s=d3a2207ff2b5988c63c2abd631a72541" width="2166" height="1488" data-path="images/live-activities/la-scheme-activation.png" />
    </Frame>
  </Step>

  <Step title="Ajouter OneSignalXCFramework à votre Podfile">
    Trouvez le nom de votre cible d'extension widget dans la liste des Cibles de votre projet. Le nom de l'exemple est `OneSignalWidgetExtension`.

    <Frame caption="Trouver le nom de votre cible d'extension widget">
      <img src="https://mintcdn.com/onesignal/yt4lRKoquAlWvRvF/images/live-activities/cocoapods-la-extension-name.png?fit=max&auto=format&n=yt4lRKoquAlWvRvF&q=85&s=850a91387539587802306a66771435eb" width="2166" height="1488" data-path="images/live-activities/cocoapods-la-extension-name.png" />
    </Frame>

    Ouvrez votre `Podfile` et ajoutez le code suivant. Remplacez `OneSignalWidgetExtension` par le nom de votre cible d'extension widget.

    ```ruby Podfile theme={null}
    target 'OneSignalWidgetExtension' do
      #use_frameworks!
      pod 'OneSignalXCFramework', '>= 5.0.0', '< 6.0'
    end
    ```

    Fermez Xcode et exécutez `pod repo update && pod install` pour installer le pod `OneSignalLiveActivities`.
  </Step>
</Steps>

### 4. Configurer le fichier LiveActivity.swift

Dans Xcode, ouvrez le fichier *WidgetExtensionLiveActivity.swift*.

Ouvrez le panneau Inspecteur sur le côté droit de l'écran. Dans **Target Membership**, cliquez sur le bouton **+** et sélectionnez votre cible Runner.

<Frame caption="Autoriser l'appartenance à la cible principale">
  <img src="https://mintcdn.com/onesignal/FXJz6yFfOqztaEND/images/live-activities/target-membership.png?fit=max&auto=format&n=FXJz6yFfOqztaEND&q=85&s=3315253623dfec6c13a56ff30a156772" width="2392" height="1488" data-path="images/live-activities/target-membership.png" />
</Frame>

Mettez à jour le contenu de *WidgetExtensionLiveActivity.swift* avec la mise en page Live Activity par défaut suivante. Les valeurs dans ce Widget peuvent être modifiées selon ce que vous souhaitez afficher sur le widget, la méthode setupDefault gérera la définition de la structure pour ces attributs.

```swift Swift theme={null}
import ActivityKit
import WidgetKit
import SwiftUI
import OneSignalLiveActivities

// Your struct name might be different here
@available(iOS 16.2, *)
struct OneSignalWidgetLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: DefaultLiveActivityAttributes.self) { context in
            // Lock screen / banner UI
            VStack {
                Spacer()

                Text("Title: " + (context.attributes.data["title"]?.asString() ?? ""))
                    .font(.headline)

                Spacer()

                HStack {
                    Spacer()
                    Text(context.state.data["message"]?.asDict()?["en"]?.asString() ?? "Default Message")
                    Spacer()
                }

                Text("INT: " + String(context.state.data["intValue"]?.asInt() ?? 0))
                Text("DBL: " + String(context.state.data["doubleValue"]?.asDouble() ?? 0.0))
                Text("BOL: " + String(context.state.data["boolValue"]?.asBool() ?? false))

                Spacer()
            }
            .activitySystemActionForegroundColor(.black)
            .activityBackgroundTint(.white)

        } dynamicIsland: { _ in
            DynamicIsland {
                // Expanded UI
                DynamicIslandExpandedRegion(.leading) {
                    Text("Leading")
                }
                DynamicIslandExpandedRegion(.trailing) {
                    Text("Trailing")
                }
                DynamicIslandExpandedRegion(.bottom) {
                    Text("Bottom")
                    // More content
                }
            } compactLeading: {
                Text("L")
            } compactTrailing: {
                Text("T")
            } minimal: {
                Text("Min")
            }
            .widgetURL(URL(string: "http://www.apple.com"))
            .keylineTint(Color.red)
        }
    }
}

```

***

## Tester la Live Activity

1. Démarrez l'application

2. Consultez tous les champs possibles dans notre [référence API Démarrer Live Activity](/reference/start-live-activity). La structure de ces champs peut différer selon la façon dont vous avez configuré votre interface utilisateur. Par exemple :

* `"event_updates"` : Ce sont les données dynamiques qui peuvent être mises à jour après le démarrage de la Live Activity (tout ce qui suit `context.state` dans l'exemple de code). Comme nous avons context.state.data, nous ajouterions un objet data à ce champ et tous les champs supplémentaires qu'il contient comme le dictionnaire message que nous avons ajouté dans l'exemple de code. Pour l'utilisation, voir l'exemple de requête ci-dessous.
* `"event_attributes"` : Ce sont les données statiques définies dans la requête push to start, et qui conservent la même valeur jusqu'à ce que la Live Activity soit supprimée ou écrasée.

3. Lors de l'utilisation de push to start, vous définissez le `"activity_id"` dans la requête, plutôt que dans le code. L'utilisation d'Activity ID différents démarrera de nouvelles Live Activities. L'utilisation du même Activity ID écrasera le widget qui utilise actuellement cet ID.

4. Assurez-vous d'avoir modifié l'[ID d'application OneSignal](./keys-and-ids) dans le chemin de votre url, et la [clé API Rest](./keys-and-ids#rest-api-key) dans l'en-tête Authorization. Le type `DefaultActivityAttributes` ne peut pas être modifié si vous utilisez la configuration par défaut. Veuillez également noter que le type d'activité ajouté à votre chemin est sensible à la casse et doit correspondre à ce qui est défini soit par vous, soit à l'activité par défaut utilisée dans l'exemple ci-dessous.

```curl curl theme={null}
curl --request POST \
     --url https://api.onesignal.com/apps/YOUR_APP_ID/activities/activity/DefaultLiveActivityAttributes \
     --header 'Authorization: key YOUR_REST_API_KEY' \
     --header 'Content-Type: application/json' \
     --header 'accept: application/json' \
     --data '
{
  "event": "start",
  "event_updates": {
    "data": {
      "message": {
        "en": "The message is nested in context.state.data[\"message\"] as a dictionary"
      },
      "intValue": 10,
      "doubleValue": 3.14,
      "boolValue": true
    }
  },
  "event_attributes": {
    "data": {
      "title": "this is set when the LA starts and does not get updated after"
    }
  },
  "activity_id": "my-activity-id",
  "name": "OneSignal Notification Name",
  "contents": {
    "en": "English Message"
  },
  "headings": {
    "en": "English Message"
  },
  "sound": "beep.wav",
  "priority": 10
}'
```

***

## Méthodes de bas niveau

Ce sont des méthodes optionnelles à utiliser si vous souhaitez générer votre propre jeton Push To Start, qui a également été ajouté dans la dernière version du SDK. L'utilisation de ces méthodes nécessite d'interagir davantage avec Xcode et de générer votre propre jeton pour Push To Start avec Swift. Vous pouvez trouver un guide à ce sujet [ici](https://github.com/OneSignal/OneSignal-iOS-SDK/pull/1377#:~:text=Alternative%20\(low%20level\)%20method%20to%20setup%20Live%20Activities%20with%20OneSignal).

<CodeGroup>
  ```javascript React Native/Expo theme={null}
  //Setting the Push To Start Token
  OneSignal.LiveActivities.setPushToStartToken(activityType: string, token: string)

  //Removing the Push To Start Token
  OneSignal.LiveActivities.removePushToStartToken(activityType: string)

  ```

  ```csharp Unity theme={null}
  //Setting the Push To Start Token
  OneSignal.LiveActivities.SetPushToStartToken(string activityType, string token)

  //Removing the Push To Start Token
  OneSignal.LiveActivities.RemovePushToStartToken(string activityType)
  ```

  ```javascript Cordova/Ionic theme={null}
  /* Cordova */
  //Setting the Push To Start Token
  window.plugins.OneSignal.LiveActivities.setPushToStartToken(activityType: string, token: string)

  //Removing the Push To Start Token
  window.plugins.OneSignal.LiveActivities.removePushToStartToken(activityType: string)

  /* Ionic */
  //Setting the Push To Start Token
  OneSignal.LiveActivities.setPushToStartToken(activityType: string, token: string)

  //Removing the Push To Start Token
  OneSignal.LiveActivities.removePushToStartToken(activityType: string)
  ```

  ```csharp .NET theme={null}
  //Setting the Push To Start Token
  OneSignal.LiveActivities.SetPushToStartToken(string activityType, string token)

  //Removing the Push To Start Token
  OneSignal.LiveActivities.RemovePushToStartToken(string activityType)
  ```

  ```javascript Flutter theme={null}
  //Setting the Push To Start Token
  OneSignal.LiveActivities.setPushToStartToken(String activityType, String token)

  //Removing the Push To Start Token
  OneSignal.LiveActivities.removePushToStartToken(String activityType)
  ```
</CodeGroup>

***
