> ## 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: Notificações push com carrossel de imagens

> Como implementar um carrossel de imagens em notificações push do OneSignal para iOS usando Swift.

O iOS fornece um protocolo [UNNotificationContentExtension](https://developer.apple.com/documentation/usernotificationsui/unnotificationcontentextension?language=objc) como ponto de entrada para uma extensão de aplicativo de conteúdo de notificação. Isso pode ser usado para exibir uma interface customizada para as notificações do seu aplicativo. Este guia de exemplo explica como usar isso para criar um carrossel dentro de uma notificação do iOS.

<Frame caption="Imagem mostrando um carrossel em uma notificação push">
  <img src="https://files.readme.io/8ba64c7-RPReplay_Final1606950566.gif" />
</Frame>

## 1. Adicionar uma extensão de conteúdo de notificação

<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">
  No Xcode, selecione 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">
  Selecione "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">
  Confirme a seleção na janela 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">
  Selecione activate para fazer debug
</Card>

## 2. Adicionar código ao seu aplicativo

[Baixe o OSNotificationContentExtension](https://github.com/jfishman1/OSNotificationContentExtension) do Github e substitua o `OSNotificationContentExtension` no seu projeto Xcode pelo mesmo arquivo do Github.

Você deve ver os seguintes arquivos adicionados:

<Frame caption="Arquivos em 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. Definir sua categoria de notificação

Este exemplo [Declara o tipo de notificação acionável](https://developer.apple.com/documentation/usernotifications/declaring_your_actionable_notification_types) dentro do `didFinishLaunchingWithOptions` do 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. Enviar sua notificação push

Ao [Enviar mensagens push](./push) você pode definir a categoria iOS e dados customizados.

### Categoria iOS

Use `OSNotificationCarousel` como a categoria iOS:

<Tabs>
  <Tab title="Dashboard">
    Defina em "Platform Settings" > **Send to Apple iOS** > "Category"

    <Frame caption="Opções da plataforma iOS no painel do 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">
    Defina com o [parâmetro de API](/reference/push-notification) `ios_category`.
  </Tab>
</Tabs>

### Dados customizados

O OneSignal não tem uma opção para fazer upload de múltiplas imagens por notificação.

Em vez disso, você deve listar as URLs das imagens separadas por vírgula `,`

<Tabs>
  <Tab title="Dashboard">
    Defina em "Advanced Settings" > "Additional Data"

    Para a "Key" defina `images` e para o "Value" defina a lista de URLs separadas por vírgula sem aspas.

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

    Exemplo, copiar e colar:

    <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">
    Use o [parâmetro de API](/reference/push-notification) `data` assim:

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

Uma vez que você receba o push, você precisará pressionar longamente ou deslizar para a esquerda e clicar em "View" para expandir a notificação dependendo da versão do iOS.

### Leitura adicional

* [Documentação da Apple para declarar seus tipos de notificação acionáveis](https://developer.apple.com/documentation/usernotifications/declaring_your_actionable_notification_types)
* [Post útil no Medium por Ahmet Keskin](https://medium.com/nsistanbul/carousel-notification-in-ios-5a1e8239d786)

***
