# Personnalisation des notifications push iOS

Lorsqu'un appareil iOS reçoit une notification contenant une alerte, le système affiche le contenu de l'alerte en deux étapes. Initialement, il affiche une bannière abrégée avec le titre, le sous-titre et deux à quatre lignes de corps de texte de la notification. Si l'utilisateur appuie sur la bannière abrégée, iOS affiche l'interface de notification complète, y compris toutes les actions liées à la notification. Le système fournit l'interface pour la bannière abrégée, mais vous pouvez personnaliser l'interface complète en utilisant une extension d'application de contenu de notification.

<img src="/ios-push-notifications-ios-push-customization-1.webp" alt=""/>

L'extension d'application de contenu de notification gère un contrôleur de vue qui affiche votre interface de notification personnalisée. Ce contrôleur de vue peut compléter ou remplacer l'interface système par défaut pour vos notifications. Vous pouvez utiliser votre contrôleur de vue pour :

* Personnaliser l'emplacement des éléments, y compris le titre, le sous-titre et le corps de texte de l'alerte.
* Remplacer les polices ou les styles des éléments de l'interface.
* Afficher des données spécifiques à l'application — par exemple, des données stockées dans des clés spécifiques à l'application de la charge utile de la notification.
* Inclure des images personnalisées ou une image de marque.

Votre extension d'application doit configurer son contrôleur de vue en utilisant les données immédiatement disponibles, telles que le contenu de la notification et les fichiers présents dans le bundle de votre extension d'application. Si vous utilisez un groupe d'applications pour partager des données entre votre application et votre extension d'application, vous pouvez également utiliser tous les fichiers trouvés dans le groupe d'applications. Pour garantir que vos notifications sont livrées en temps opportun, configurez les vues aussi rapidement que possible. N'effectuez aucune tâche de longue durée, comme essayer de récupérer des données sur le réseau.

<Aside type="caution">
Les extensions d'application de contenu de notification ne sont prises en charge que dans les applications iOS.
</Aside>

### Ajouter l'extension d'application de contenu de notification à votre projet

Pour ajouter une extension d'application de contenu de notification à votre application iOS :

1. Choisissez **File** > **New** > **Target** dans Xcode.
2. Sélectionnez **Notification Content Extension** dans iOS Application Extension.
3. Cliquez sur **Next**.
4. Fournissez un **nom** pour votre extension d'application.
5. Cliquez sur **Finish**.

### Ajouter des vues à votre contrôleur de vue

Le modèle fourni par Xcode inclut un storyboard et un contrôleur de vue que vous pouvez configurer. Construisez votre interface de notification personnalisée en ajoutant des vues à votre contrôleur de vue. Par exemple, utilisez des étiquettes pour afficher le titre, le sous-titre et le corps de texte de la notification. Vous pouvez également ajouter des vues d'image et des vues qui affichent du contenu non interactif. Vous n'avez pas besoin de fournir de contenu initial pour vos vues.

Vous pouvez ajouter des contrôles interactifs (par exemple, des boutons ou des interrupteurs) dans iOS 12 et versions ultérieures. Pour plus d'informations, consultez la section Prise en charge des contrôles interactifs.

<Aside type="caution">
N'ajoutez pas de contrôleurs de vue supplémentaires à votre extension d'application ou à votre fichier storyboard. Votre extension d'application doit contenir exactement un seul contrôleur de vue.
</Aside>

### Configurer votre contrôleur de vue

Utilisez la méthode `didReceive(_:)` de votre contrôleur de vue pour mettre à jour ses étiquettes et autres vues. La charge utile de la notification contient les données à utiliser lors de la configuration de votre contrôleur de vue. Vous pouvez également utiliser des données provenant des autres fichiers de votre extension d'application. La [Liste 1](https://developer.apple.com/documentation/usernotificationsui/customizing_the_appearance_of_notifications#2950663) montre une version de cette méthode qui récupère le titre et le corps de texte de la charge utile de la notification et assigne les chaînes de caractères à deux contrôles [`UILabel`](https://developer.apple.com/documentation/uikit/uilabel), qui sont stockés en tant qu'outlets sur le contrôleur de vue.

<Tabs>
<TabItem label="Swift">
```swift
// Configuration de l'interface de notification à l'exécution

func didReceive(_ notification: UNNotification) {
   self.bodyText?.text = notification.request.content.body
   self.headlineText?.text = notification.request.content.title
}
```
</TabItem>
</Tabs>

Si une deuxième notification arrive alors que votre contrôleur de vue est déjà visible, le système appelle à nouveau la méthode `didReceive(_:)` avec la nouvelle charge utile de la notification.

### Prise en charge des contrôles interactifs
Dans iOS 12 et versions ultérieures, vous pouvez activer les interactions utilisateur dans vos notifications personnalisées. Cela vous permet d'ajouter des contrôles interactifs, tels que des boutons et des interrupteurs, à votre interface personnalisée.

Pour activer les interactions utilisateur :

1. Ouvrez le fichier `info.plist` de votre extension de contenu de notification.
2. Ajoutez la clé `UNNotificationExtensionUserInteractionEnabled` à vos attributs d'extension. Donnez-lui une valeur booléenne, définie sur `YES`.

<img src="/ios-push-notifications-ios-push-customization-2.webp" alt="Activation des interactions utilisateur dans le fichier info.plist de l'extension de notification"/>

### Ajouter Apple Pay à votre extension de notification push (vue d'exemple)
<br />
<img
  src="/ios-push-notifications-ios-push-customization-3.webp"
  alt=""
  style={{ display: "block", margin: "0 auto", maxWidth: "60%", height: "auto" }}
  width="400"
/>

### Exemple de bloc de code avec le bouton Apple Pay dans l'extension de notification push

<Tabs>
<TabItem label="Swift">
```swift
import UIKit
import Foundation
import UserNotifications
import UserNotificationsUI
import PassKit

class NotificationViewController: UIViewController, UNNotificationContentExtension, PKPaymentAuthorizationViewControllerDelegate {


    func paymentAuthorizationViewControllerDidFinish(_ controller: PKPaymentAuthorizationViewController) {
        controller.dismiss(animated: true, completion: nil)
    }


    @IBOutlet weak var buyWithApplePayButton: UIButton!
    @IBOutlet weak var containerView: UIView!
    @IBOutlet weak var payInAppButton: UIButton!
    @IBOutlet weak var segmentCustom: UISegmentedControl!

    private var amount: NSDecimalNumber = 0;

    override func viewDidLoad() {
        super.viewDidLoad()

        buttonCustomisation()

        amount = NSDecimalNumber.init(value: 5)
    }

    func buttonCustomisation () {
        self.buyWithApplePayButton.layer.masksToBounds = true
        self.buyWithApplePayButton.layer.cornerRadius = 10
        self.payInAppButton.layer.masksToBounds = true
        self.payInAppButton.layer.cornerRadius = 10
        self.containerView.layer.borderColor = UIColor.gray.cgColor
        self.containerView.layer.borderWidth = 0.7
        self.containerView.layer.masksToBounds = true
        self.containerView.layer.cornerRadius = 20
    }

    func didReceive(_ notification: UNNotification) {
        // Configuring the notification interface at runtime
    }

    @IBAction func buyWithApplePayAction(_ sender: Any) {
        let request = PKPaymentRequest()
        request.merchantIdentifier = "merchant.com.sample.ApplePayAction"
        request.supportedNetworks = [PKPaymentNetwork.visa, PKPaymentNetwork.masterCard, PKPaymentNetwork.amex]
        request.merchantCapabilities = PKMerchantCapability.capability3DS
        request.countryCode = "US"
        request.currencyCode = "USD"

        request.paymentSummaryItems = [
            PKPaymentSummaryItem(label: "Some Product", amount: amount)
        ]

        let applePayController = PKPaymentAuthorizationViewController(paymentRequest: request)
        applePayController?.delegate = self
        self.present(applePayController!, animated: true, completion: nil)
    }

    @IBAction func payInAppButtonAction(_ sender: Any) {
        print("pay in app button tapped")
    }

    @IBAction func segmentAction(_ sender: Any) {
        switch segmentCustom.selectedSegmentIndex {
        case 0:
            amount = NSDecimalNumber.init(value: 5)
            break
        case 1:
            amount = NSDecimalNumber.init(value: 10)
            break
        case 2:
            amount = NSDecimalNumber.init(value: 20)
            break
        default:
            amount = NSDecimalNumber.init(value: 5)
            break
        }
    }
}
```
</TabItem>
</Tabs>