> ## 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.

# iOS : Notifications push à carrousel d'images

> Comment implémenter un carrousel d'images dans les notifications push iOS OneSignal en utilisant Swift.

iOS fournit un protocole [UNNotificationContentExtension](https://developer.apple.com/documentation/usernotificationsui/unnotificationcontentextension?language=objc) comme point d'entrée pour une extension d'application de contenu de notification. Cela peut être utilisé pour afficher une interface personnalisée pour les notifications de votre application. Ce guide d'exemple explique comment l'utiliser pour créer un carrousel dans une notification iOS.

<Frame caption="Image montrant un carrousel dans une notification push">
  <img src="https://files.readme.io/8ba64c7-RPReplay_Final1606950566.gif" />
</Frame>

## 1. Ajouter une extension de contenu de notification

<Card img="https://mintcdn.com/onesignal/ciRrThfP6xMpI7GY/images/docs/00355f9-Screen_Shot_2020-11-30_at_9.32.26_PM.png?fit=max&auto=format&n=ciRrThfP6xMpI7GY&q=85&s=80e43cac5c764bd0538169f9de8b6743" horizontal="true" width="600" height="315" data-path="images/docs/00355f9-Screen_Shot_2020-11-30_at_9.32.26_PM.png">
  Dans Xcode, sélectionnez Fichier > Nouveau > Cible...
</Card>

<Card img="https://mintcdn.com/onesignal/Xl2NHJvxakrK4JbL/images/docs/efd0fde-Screen_Shot_2020-11-30_at_3.10.58_PM.png?fit=max&auto=format&n=Xl2NHJvxakrK4JbL&q=85&s=1050faa9adf15303846a0cdee4cb0bab" horizontal="true" width="600" height="431" data-path="images/docs/efd0fde-Screen_Shot_2020-11-30_at_3.10.58_PM.png">
  Sélectionnez "Notification Content Extension"
</Card>

<Card img="https://mintcdn.com/onesignal/6v_cVPknFpo5qSVB/images/docs/0a0fa6a-Screen_Shot_2020-11-30_at_6.44.46_PM.png?fit=max&auto=format&n=6v_cVPknFpo5qSVB&q=85&s=9779778bc953998e3e0ec96642d33e50" horizontal="true" width="600" height="429" data-path="images/docs/0a0fa6a-Screen_Shot_2020-11-30_at_6.44.46_PM.png">
  Confirmez la sélection dans la fenêtre qui apparaît
</Card>

<Card img="https://mintcdn.com/onesignal/6tscVAtiSqz353kV/images/docs/ActivateContentExtension.png?fit=max&auto=format&n=6tscVAtiSqz353kV&q=85&s=8e0cf29704f3e01163074be168c3a597" horizontal="true" width="567" height="409" data-path="images/docs/ActivateContentExtension.png">
  Sélectionnez activer pour déboguer
</Card>

## 2. Ajouter du code à votre application

[Téléchargez OSNotificationContentExtension](https://github.com/jfishman1/OSNotificationContentExtension) depuis Github et remplacez le `OSNotificationContentExtension` dans votre projet Xcode par le même fichier de Github.

Vous devriez voir les fichiers suivants ajoutés :

<Frame caption="Fichiers sous Content Extension">
  <img src="https://mintcdn.com/onesignal/6v_cVPknFpo5qSVB/images/docs/0de83b8-Screen_Shot_2020-11-30_at_8.58.01_PM.png?fit=max&auto=format&n=6v_cVPknFpo5qSVB&q=85&s=ab382c7011a4481ab5cc91ce6d1a09cd" width="261" height="125" data-path="images/docs/0de83b8-Screen_Shot_2020-11-30_at_8.58.01_PM.png" />
</Frame>

## 3. Définir votre catégorie de notification

Cet exemple [Déclare le type de notification actionnable](https://developer.apple.com/documentation/usernotifications/declaring_your_actionable_notification_types) dans le `didFinishLaunchingWithOptions` d'AppDelegate.swift.

<CodeGroup>
  ```swift Swift theme={null}
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

      //START Authorize OS Notification Carousel Category
      if #available(iOS 10.0, *) {
          let options: UNAuthorizationOptions = [.alert]
          UNUserNotificationCenter.current().requestAuthorization(options: options) { (authorized, error) in
              if authorized {
                  let categoryIdentifier = "OSNotificationCarousel"
                  let carouselNext = UNNotificationAction(identifier: "OSNotificationCarousel.next", title: "👉", options: [])
                  let carouselPrevious = UNNotificationAction(identifier: "OSNotificationCarousel.previous", title: "👈", options: [])
                  let carouselCategory = UNNotificationCategory(identifier: categoryIdentifier, actions: [carouselNext, carouselPrevious], intentIdentifiers: [], options: [])
                  UNUserNotificationCenter.current().setNotificationCategories([carouselCategory])
              }
          }
      }
      //END Authorize OS Notification Carousel Category

      return true
  }
  ```
</CodeGroup>

## 4. Envoyer votre notification push

Lors de l'[envoi de messages push](./push), vous pouvez définir la catégorie iOS et les données personnalisées.

### Catégorie iOS

Utilisez `OSNotificationCarousel` comme catégorie iOS :

<Tabs>
  <Tab title="Tableau de bord">
    Définissez sous "Paramètres de plateforme" > **Envoyer vers Apple iOS** > "Catégorie"

    <Frame caption="Options de plateforme iOS sur le tableau de bord OneSignal">
      <img src="https://mintcdn.com/onesignal/6tscVAtiSqz353kV/images/docs/OSNotificationCarousel.png?fit=max&auto=format&n=6tscVAtiSqz353kV&q=85&s=2e0ff19d9f383aae03d510a34fc2c7fe" width="1101" height="848" data-path="images/docs/OSNotificationCarousel.png" />
    </Frame>
  </Tab>

  <Tab title="API">
    Définissez avec le [paramètre API](/reference/push-notification) `ios_category`.
  </Tab>
</Tabs>

### Données personnalisées

OneSignal n'a pas d'option pour télécharger plusieurs images par notification.

Au lieu de cela, vous devez lister les URL d'images séparées par une virgule `,`

<Tabs>
  <Tab title="Tableau de bord">
    Définissez sous "Paramètres avancés" > "Données supplémentaires"

    Pour la "Clé", définissez `images` et pour la "Valeur", définissez la liste d'URL séparées par des virgules sans guillemets.

    <Frame>
      <img src="https://mintcdn.com/onesignal/4HyuQPBpu-4xjmQC/images/docs/d07200a-Screen_Shot_2020-11-30_at_9.19.59_PM.png?fit=max&auto=format&n=4HyuQPBpu-4xjmQC&q=85&s=1f4911116d4c3a944d1aa282d6566359" width="635" height="307" data-path="images/docs/d07200a-Screen_Shot_2020-11-30_at_9.19.59_PM.png" />
    </Frame>

    Exemple, copier-coller :

    <CodeGroup>
      ```text text theme={null}
      https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg,https://cdn.pixabay.com/photo/2013/11/28/10/36/road-220058_960_720.jpg,https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067_960_720.png,https://cdn.pixabay.com/photo/2015/01/28/23/35/landscape-615429_960_720.jpg,https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg
      ```
    </CodeGroup>
  </Tab>

  <Tab title="API">
    Utilisez le [paramètre API](/reference/push-notification) `data` comme ceci :

    <CodeGroup>
      ```json json theme={null}
      data: {
        "images" : "https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg,https://cdn.pixabay.com/photo/2013/11/28/10/36/road-220058_960_720.jpg,https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067_960_720.png,https://cdn.pixabay.com/photo/2015/01/28/23/35/landscape-615429_960_720.jpg,https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg"
      }
      ```
    </CodeGroup>
  </Tab>
</Tabs>

### Envoyer la notification push

Une fois que vous recevez la notification push, vous devrez appuyer longuement ou balayer vers la gauche et cliquer sur "Afficher" pour développer la notification selon la version iOS.

### Lectures complémentaires

* [Documentation d'Apple pour déclarer vos types de notification actionnables](https://developer.apple.com/documentation/usernotifications/declaring_your_actionable_notification_types)
* [Article Medium utile par Ahmet Keskin](https://medium.com/nsistanbul/carousel-notification-in-ios-5a1e8239d786)

***