> ## 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: Notificaciones push con carrusel de imágenes

> Cómo implementar un carrusel de imágenes en notificaciones push de iOS de OneSignal usando Swift.

iOS proporciona un protocolo [UNNotificationContentExtension](https://developer.apple.com/documentation/usernotificationsui/unnotificationcontentextension?language=objc) como punto de entrada para una extensión de aplicación de contenido de notificaciones. Esto se puede usar para mostrar una interfaz personalizada para las notificaciones de tu aplicación. Esta guía de ejemplo explica cómo usar esto para crear un carrusel dentro de una notificación de iOS.

<Frame caption="Imagen que muestra un carrusel en una notificación push">
  <img src="https://files.readme.io/8ba64c7-RPReplay_Final1606950566.gif" />
</Frame>

## 1. Agregar una extensión de contenido de notificaciones

<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">
  En Xcode, selecciona File > New > Target...
</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">
  Selecciona "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">
  Confirma la selección en la ventana que aparece
</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">
  Selecciona activar para depurar
</Card>

## 2. Agregar código a tu aplicación

[Descarga OSNotificationContentExtension](https://github.com/jfishman1/OSNotificationContentExtension) desde Github y reemplaza el `OSNotificationContentExtension` en tu proyecto de Xcode con el mismo archivo de Github.

Deberías ver los siguientes archivos agregados:

<Frame caption="Archivos bajo 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. Establecer tu categoría de notificación

Este ejemplo [Declara el tipo de notificación accionable](https://developer.apple.com/documentation/usernotifications/declaring_your_actionable_notification_types) dentro de AppDelegate.swift `didFinishLaunchingWithOptions`.

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

      //INICIO Autorizar categoría de carrusel de notificación OS
      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])
              }
          }
      }
      //FIN Autorizar categoría de carrusel de notificación OS

      return true
  }
  ```
</CodeGroup>

## 4. Enviar tu notificación push

Al [enviar mensajes push](./push) puedes establecer la categoría de iOS y datos personalizados.

### Categoría de iOS

Usa `OSNotificationCarousel` como la categoría de iOS:

<Tabs>
  <Tab title="Dashboard">
    Establécelo en "Platform Settings" > **Send to Apple iOS** > "Category"

    <Frame caption="Opciones de plataforma iOS en el panel de 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">
    Establécelo con el [parámetro de API](/reference/push-notification) `ios_category`.
  </Tab>
</Tabs>

### Datos personalizados

OneSignal no tiene una opción para cargar múltiples imágenes por notificación.

En su lugar, debes listar las URLs de las imágenes separadas por una coma `,`

<Tabs>
  <Tab title="Dashboard">
    Establécelo en "Advanced Settings" > "Additional Data"

    Para la "Key" establece `images` y para el "Value" establece la lista de URLs separadas por comas sin comillas.

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

    Ejemplo, copia y pega:

    <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">
    Usa el [parámetro de API](/reference/push-notification) `data` de esta manera:

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

### Enviar la notificación push

Una vez que recibas la notificación push, necesitarás presionar prolongadamente o deslizar hacia la izquierda y hacer clic en "View" para expandir la notificación, dependiendo de la versión de iOS.

### Lectura adicional

* [Documentación de Apple para declarar tus tipos de notificación accionables](https://developer.apple.com/documentation/usernotifications/declaring_your_actionable_notification_types)
* [Publicación útil de Medium por Ahmet Keskin](https://medium.com/nsistanbul/carousel-notification-in-ios-5a1e8239d786)

***