Menu

Push Notifications para IOS

pushnative - September 21, 2017 por Nicolas Molina
ionic3.6.1ionic-native4.2.1ionic-app-scripts2.1.4cordova-cli7.0.1ionic-cli3.10.3

Ya hemos hecho la configuración de push notifications para Android, así que ahora en este artículo vamos a hacer las configuraciones para push notifications en IOS.

OneSignal es un servicio que provee push notifications de forma gratuita y varias empresas tienen su sistema de push con este servicio.

Ahora vamos a implementar push notifications para IOS, en el artículo anterior ya creamos una cuenta en OneSignal, si aún no la tienes revisa el artículo anterior donde creamos la cuenta paso a paso.

Notifications para Android

Antes de iniciar con la configuración para IOS debes tener estos requisitos:

  • Una cuenta en OneSignal
  • El AppId que genero OneSignal

Si no lo tienes recuerda que esto lo hicimos en el artículo anterior. Notifications para Android

Generar certificado

Para poder desarrollar y hacer apps para IOS se debe tener una cuenta como desarrollador en Apple, esto cuesta 99 USD al año, si no tienes esta cuenta no podrás generar ningún certificado (Apple Style).

Debes en la cuenta de apple developer tener creado tu AppID, registrar tu dispositvo de pruebas y crear el Provision Profile .

Para generar el certificado existen dos maneras una manual y la otra es usar la herramienta de OneSignal que se conecta a la cuenta de apple y genera este el certificado. Esta herramienta se llama provisionator.

Provisionator

Desde esta herramienta ingresar con tu correo y contraseña de la cuenta de Apple y el se conecta a tu App.

Después de seguir los pasos de provisionator debes tener como resultado un archivo .p12 con una contraseña, así:

Ahora debes ir la plataforma de OneSignal y configurar la app para IOS:

Ahora se debe subir el archivo generado por el provisionator, así:

Agregar: Service Extenion

Se debe tener un dispositivo IOS físico (iPhone, iPad, iPod Touch) ya que los emuladores no soportan probar el sistema de notificaciones. A partir de aquí vamos a realizar todo el proceso con una Mac y un Ipod

Debemos abrir el proyecto en Xcode para esto debemos generarlo con ionic, así:

ionic cordova build ios --prod

Recuerda que debes tener tu entorno preparado en la docs de cordova esta como.

Si trabajas con la ultima version de cordova para IOS (4.5.0), antes de compilar debes remover el plugin de cordova-plugin-console, puedes ver más detalle aquí

Después de esto debes abrir Xcode y abrir el archivo **.xcworkspace que se encuentra dentro de platforms/ios/**.xcworkspace, así:

Ahora luego de tener abierto Xcode con el proyecto generado por ionic, debemos ir a:

  • File > new > target
  • Seleccionar Notification Service Extension y oprimir Next.
  • Se pone como nombre OneSignalNotificationServiceExtension y oprimir Finish.
  • Después va a aparecer un mensaje de este tipo:
  • Oprime Cancel.
  • Ahora debemos abrir el archivo NotificationService.m, que se encuentra en platforms/ios/OneSignalNotificationServiceExtension/NotificationService.m y pegamos el siguiente código en el archivo.
#import <OneSignal/OneSignal.h>

#import "NotificationService.h"

@interface NotificationService ()

@property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property (nonatomic, strong) UNNotificationRequest *receivedRequest;
@property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent;

@end

@implementation NotificationService

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
    self.receivedRequest = request;
    self.contentHandler = contentHandler;
    self.bestAttemptContent = [request.content mutableCopy];
    
    [OneSignal didReceiveNotificationExtensionRequest:self.receivedRequest withMutableNotificationContent:self.bestAttemptContent];
    
    self.contentHandler(self.bestAttemptContent);
}

- (void)serviceExtensionTimeWillExpire {
    // Called just before the extension will be terminated by the system.
    // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
    
    [OneSignal serviceExtensionTimeWillExpireRequest:self.receivedRequest withMutableNotificationContent:self.bestAttemptContent];
    
    self.contentHandler(self.bestAttemptContent);
}

@end

OneSignal + Xcode

Lo primero que debemos hacer es configurar cocoapods, para poder gestionar las dependencias dentro un proyecto IOS se usa cocoapods que es el gestor dependencias como el gradle(https://gradle.org/){:target=”_blank”} en Android.

Para verificar que cocoapods está instalado se corre el siguiente comando en la terminal:

pod --version

Si no está instalado, se debe instalar con:

sudo gem install cocoapods

y luego hacemos pod init en la terminal estando ubicados en platforms/ios/, debes verificar que el archivo platforms/ios/Podfile quede así:

target 'project_name' do
  pod 'OneSignal', '>= 2.5.2', '< 3.0'
end

target 'OneSignalNotificationServiceExtension' do
  pod 'OneSignal', '>= 2.5.2', '< 3.0'
end

project_name, es el nombre de la carpeta de la app.

Luego estando ubicados en platforms/ios/, ejecutamos los siguientes comandos en la terminal.

pod repo update
pod install

Ahora de nuevo vamos a ir a Xcode y habilitar las capacidades de push de la aplicación, así:

Ya casi para finalizar debemos ir al archivo AppDelegate.m que se encuentra en platforms/ios/yourNameApp/Classes/AppDelegate.m y debe quedar así:


#import "AppDelegate.h"
#import "MainViewController.h"
#import <OneSignal/OneSignal.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions
{
    // Replace '11111111-2222-3333-4444-0123456789ab' with your OneSignal App ID.
    [OneSignal initWithLaunchOptions:launchOptions
                              appId:@"11111111-2222-3333-4444-0123456789ab"
   				 handleNotificationAction:nil
                            settings:@{kOSSettingsKeyAutoPrompt: @false}];
   OneSignal.inFocusDisplayType = OSNotificationDisplayTypeNotification;
   
   // Recommend moving the below line to prompt for push after informing the user about
   //   how your app will use them.
   [OneSignal promptForPushNotificationsWithUserResponse:^(BOOL accepted) {
        NSLog(@"User accepted notifications: %d", accepted);
   }];

    self.viewController = [[MainViewController alloc] init];
    return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

Ahora finalmente puedes conectar el dispositivo de pruebas y compilar la aplicación desde XCode.

Resultado:


¿Quieres aprender mas sobre Push Notification con Ionic?

Tenemos un curso que te puede ayudar. El primer mes es gratis.

Ir al Curso

Ver código

¡Compártelo!