Personalización de notificaciones push en iOS

Cuando un dispositivo iOS recibe una notificación que contiene una alerta, el sistema muestra el contenido de la alerta en dos etapas. Inicialmente, muestra un banner abreviado con el título, subtítulo y de dos a cuatro líneas de texto del cuerpo de la notificación. Si el usuario presiona el banner abreviado, iOS muestra la interfaz de notificación completa, incluyendo cualquier acción relacionada con la notificación. El sistema proporciona la interfaz para el banner abreviado, pero usted puede personalizar la interfaz completa usando una extensión de aplicación de contenido de notificación.

La extensión de aplicación de contenido de notificación gestiona un controlador de vista que muestra su interfaz de notificación personalizada. Este controlador de vista puede complementar o reemplazar la interfaz predeterminada del sistema para sus notificaciones. Puede usar su controlador de vista para:

• Personalizar la ubicación de los elementos, incluyendo el título, subtítulo y texto del cuerpo de la alerta.
• Sustituir diferentes fuentes o estilos para los elementos de la interfaz.
• Mostrar datos específicos de la aplicación, por ejemplo, datos almacenados en claves específicas de la aplicación en el payload de la notificación.
• Incluir imágenes personalizadas o branding.

La extensión de su aplicación debe configurar su controlador de vista utilizando los datos disponibles de inmediato, como el contenido de la notificación y los archivos presentes en el paquete de su extensión de aplicación. Si utiliza un grupo de aplicaciones para compartir datos entre su aplicación y su extensión de aplicación, también puede usar cualquier archivo que se encuentre en el grupo de aplicaciones. Para asegurarse de que sus notificaciones se entreguen de manera oportuna, configure las vistas lo más rápido posible. No realice tareas de larga duración, como intentar recuperar datos a través de la red.

Precaución

Las extensiones de aplicación de contenido de notificación solo son compatibles con aplicaciones de iOS.

Añadir la extensión de aplicación de contenido de notificación a su proyecto

Para añadir una extensión de aplicación de contenido de notificación a su aplicación de iOS:

1. Elija File > New > Target en Xcode.
2. Seleccione Notification Content Extension desde iOS Application Extension.
3. Haga clic en Next.
4. Proporcione un nombre para su extensión de aplicación.
5. Haga clic en Finish.

Añadir vistas a su controlador de vista

La plantilla proporcionada por Xcode incluye un storyboard y un controlador de vista para que usted los configure. Construya su interfaz de notificación personalizada añadiendo vistas a su controlador de vista. Por ejemplo, use etiquetas para mostrar el título, subtítulo y texto del cuerpo de la notificación. También puede añadir vistas de imagen y vistas que muestren contenido no interactivo. No necesita proporcionar ningún contenido inicial para sus vistas.

Puede añadir controles interactivos (por ejemplo, botones o interruptores) en iOS 12 y versiones posteriores. Para más información, consulte Soportar Controles Interactivos.

Precaución

No añada controladores de vista adicionales a su extensión de aplicación o archivo de storyboard. Su extensión de aplicación debe contener exactamente un controlador de vista.

Configurar su controlador de vista

Use el método didReceive(_:) de su controlador de vista para actualizar sus etiquetas y otras vistas. El payload de la notificación contiene los datos a utilizar al configurar su controlador de vista. También puede usar datos de los otros archivos de su extensión de aplicación. El Listado 1 muestra una versión de este método que recupera el título y el texto del cuerpo del payload de la notificación y asigna las cadenas a dos controles UILabel, que se almacenan como outlets en el controlador de vista.

Swift

// Configurando la interfaz de notificación en tiempo de ejecución

func didReceive(_ notification: UNNotification) {
   self.bodyText?.text = notification.request.content.body
   self.headlineText?.text = notification.request.content.title
}

Si llega una segunda notificación cuando su controlador de vista ya está visible, el sistema llama de nuevo al método didReceive(_:) con el nuevo payload de la notificación.

Soportar controles interactivos

En iOS 12 y versiones posteriores puede habilitar las interacciones del usuario en sus notificaciones personalizadas. Esto le permite añadir controles interactivos, como botones e interruptores, a su interfaz personalizada.

Para habilitar las interacciones del usuario:

1. Abra el archivo info.plist de su Extensión de Contenido de Notificación.
2. Añada la clave UNNotificationExtensionUserInteractionEnabled a los atributos de su extensión. Asígnele un valor booleano, establecido en YES.

Añadir Apple Pay a su extensión de notificación push (vista de ejemplo)

Ejemplo de bloque de código con el botón de Apple Pay en la extensión de Notificación Push

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