Skip to content
Alebat

iOS

Luego de seguir los pasos indicados en la introducción, tendremos nuestra app iOS abierta en Xcode.

Configuración de la “splash-screen”

En el script capacitor-ios tenemos incluido el comando de instalación. Desde Xcode añadimos la imagen al directorio Assets/Splash. Desde el archivo capacitor.config.ts podemos realizar su configuración.

Terminal window
SplashScreen: {
      'launchShowDuration': 1500,
      'launchAutoHide': true,
      'launchFadeOutDuration': 500,
    },

Configuración del icono de la app

Desde Xcode añadimos la imagen al directorio Assets/AppIcon. Este debe ser de 1024x1024 px, si no dará error.

Notificaciones Push

Paso 1: Instalar Capacitor Push Notifications Plugin. Si aún no lo has hecho, instala el plugin de notificaciones push de Capacitor:

Terminal window
npm install @capacitor/push-notifications
npx cap sync

Paso 2: Solicitar y Registrar Permisos. Solicita los permisos necesarios y registra tu aplicación para recibir notificaciones push. Para ello, copia lo siguiente en tu fichero AppDelegate:

 func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        FirebaseApp.configure()


        // Configurar el delegado de notificaciones
        UNUserNotificationCenter.current().delegate = self


        // Solicitar permiso para notificaciones
        let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
        UNUserNotificationCenter.current().requestAuthorization(options: authOptions) { _, _ in }
                application.registerForRemoteNotifications()


        // Configurar el delegado de Firebase Messaging
        Messaging.messaging().delegate = self


        Thread.sleep(forTimeInterval: 1) // Tiempo de pantalla de inicio
        return true
    }


    func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
        Messaging.messaging().apnsToken = deviceToken
    }


    // Sacamos el token por consola
    func messaging(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String?) {
        print("Firebase registration token: \(String(describing: fcmToken))")
        let dataDict: [String: String] = ["token": fcmToken ?? ""]
        NotificationCenter.default.post(name: Notification.Name("FCMToken"), object: nil, userInfo: dataDict)
    }


    // Métodos delegados de UNUserNotificationCenterDelegate para manejar notificaciones
    func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
        completionHandler([.alert, .badge, .sound])
    }


    func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) {
        completionHandler()
    }

Paso 3: Registra los permisos de las Push Notifications en Apple.

  • Dirígete a la configuración de tu app, y luego a la pestaña de “Signing & Capabilities”.

  • Pulsa en ” + Capability” y selecciona Push Notifications.

  • Luego deberás registrar tu cuenta de desarrollador de Apple, el Team y el Bundle Identifier.

  • Registra la app en developer.apple usando el mismo appId que en capacitor.config.ts y crea un Key-ID para las notificaciones de la app.

  • Habilita el servicio APN desde la misma web.

  • Doc. de Apple

Paso 4: Configura tu proyecto en Firebase.

  • Crea tu proyecto en Firebase y sigue los pasos indicados.
  • Descarga el archivo GoogleService-Info.plist y guárdalo en el directorio principal de tu app iOS arrastrándolo al Xcode.
  • Luego dentro de la misma consola, ve a la pestaña Cloud Messaging y agrega la APNs generada en el paso anterior en tu cuenta de Apple. En ID de clave tienes que poner el ID que te dan al generar la clave (está incluido en el nombre del fichero), y en ID de equipo tu TeamID de Apple.

Enlaces con explicaciones del proceso:

  • Ten en cuenta que en los enlaces se usa Astro como proyecto web, por ende los pasos no son exactamente iguales, úsalo solo como guía visual.

  • Youtube

  • Foro

Ejemplo de configuración del “capacitor.config.ts”

import type { CapacitorConfig } from "@capacitor/cli";


const config: CapacitorConfig = {
  appId: "com.alebat.knotgroup",
  appName: "KG Corporativo",
  webDir: "dist",
  bundledWebRuntime: false,
  server: {
    url: "http://192.168.0.167:3000", // Url local
    cleartext: true,
    errorPath: "/",
    androidScheme: "https",
  },
  ios: {
    contentInset: "always",
  },
  plugins: {
    PushNotifications: {
      presentationOptions: ["badge", "sound", "alert"],
    },
    SplashScreen: {
      launchShowDuration: 1500,
      launchAutoHide: true,
      launchFadeOutDuration: 500,
    },
  },
};


export default config;

  • server: Con esta propiedad podemos ejecutar la app en el emulador en tiempo real, sin compilar. Muy útil para el desarrollo de la misma. Ejecutamos npm run dev -- --host y luego npx cap run ios.

  • ios: Para que la app no interfiera con el “safe-area” de la pantalla.

  • PushNotifications: Configuración de las notificaciones.

  • SplashScreen: Configuración de la LaunchScreen.

Configuración opcional para no ocupar el safe-area

Modificar el archivo: CAPBridgeViewController: UIViewController

Se le añade el método proporcionado a continuación, es el que configura la vista padre:

override public final func loadView() {
    // load the configuration and set the logging flag
    let configDescriptor = instanceDescriptor()
    let configuration = InstanceConfiguration(with: configDescriptor, isDebug: CapacitorBridge.isDevEnvironment)
    CAPLog.enableLogging = configuration.loggingEnabled
    logWarnings(for: configDescriptor)


    setStatusBarDefaults()
    setScreenOrientationDefaults()


    // get the web view
    let assetHandler = WebViewAssetHandler(router: router())
    assetHandler.setAssetPath(configuration.appLocation.path)
    assetHandler.setServerUrl(configuration.serverURL)
    let delegationHandler = WebViewDelegationHandler()
    prepareWebView(with: configuration, assetHandler: assetHandler, delegationHandler: delegationHandler)


    // Create a container view to respect the safe area
    let containerView = UIView()
    containerView.translatesAutoresizingMaskIntoConstraints = false
    view = containerView


    // Add the webView to the containerView
    if let webView = webView {
        containerView.addSubview(webView)
        webView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            webView.topAnchor.constraint(equalTo: containerView.safeAreaLayoutGuide.topAnchor),
            webView.leadingAnchor.constraint(equalTo: containerView.safeAreaLayoutGuide.leadingAnchor),
            webView.trailingAnchor.constraint(equalTo: containerView.safeAreaLayoutGuide.trailingAnchor),
            webView.bottomAnchor.constraint(equalTo: containerView.safeAreaLayoutGuide.bottomAnchor)
        ])
    }


    // create the bridge
    capacitorBridge = CapacitorBridge(with: configuration,
                                      delegate: self,
                                      cordovaConfiguration: configDescriptor.cordovaConfiguration,
                                      assetHandler: assetHandler,
                                      delegationHandler: delegationHandler)
    capacitorDidLoad()


    if configDescriptor.instanceType == .fixed {
        updateBinaryVersion()
    }
}

subida de app a apple store

Hay que poner Any IOs device para compilar la app

Después hay que archivar la app, esto lo que hace es compilar la app y prepararla en el formato ipa para subirla a apple

Aqui le damos a distribute para comenzar el proceso de conexion con appple

Pregunta que donde lo queremos subir y le decimos que a apple store

Aqui nos muestra un resumen de lo que vamos a subir, le damos a upload y debería de salir un tick en verde si todo ha ido bien