¡Gracias!

Los App Clips del iOS 14 de Apple – La guía definitiva de los desarrolladores por AppsFlyer

Apple's ios 14 apps clips guide
INTRODUCCIÓN

Actualizado tras el lanzamiento de iOS 14

Con el lanzamiento del iOS 14, vemos a los Clips de Aplicaciones (App Clips) como un paso innovador de Apple.

En AppsFlyer vemos a los App Clips de Apple como el futuro y la evolución de las aplicaciones, especialmente para las aplicaciones que no se usan diariamente. Hemos desarrollado esta completa guía para ayudarte a desarrollar tu primer App Clip.

¿Por qué App Clips? ¿Por qué ahora?

Imaginemos por un momento que entras en una cafetería y notas que hay una larga fila. Junto a la caja registradora, ves un cartel que te invita a saltarte la cola y comprar tu café a través de la aplicación de la cafetería.

¿Alguna idea?

Déjame decirme que la mía sería: “De ninguna manera voy a instalar una aplicación que ocupe un preciado espacio en mi dispositivo”. Entonces me llevaría a preguntarme qué tipo de datos recogerán sobre mi vida y probablemente me enviarán spam. No, gracias. Y todo esto solo para saltarme la fila…

Sáltate la cola sin renunciar a la privacidad

Los App Clips están a punto de cambiar tu forma de pensar y, además, probablemente cambien la forma en que interactuamos con nuestro entorno utilizando nuestros dispositivos móviles. Los App Clips de iOS 14 te permiten realizar actividades “aquí y ahora” utilizando tu dispositivo casi al instante sin perjudicar tu privacidad o compartir tu geolocalización.

En el ejemplo de la cafetería, el código QR invocará un App Clip que te identificará mediante el inicio de la sesión de Apple y podrás comprar utilizando el Apple Pay, lo que te permitirá completar la compra en segundos, saltándote efectivamente la fila.

Los App Clips requieren que los desarrolladores de aplicaciones comprendan algunos conceptos nuevos y desarrollen el App Clip junto con su aplicación, lo que puede requerir cierta refactorización.

Aviso importante: Este blog se basa en el desarrollo real de un App Clip que fue estudiado a fondo con una cuidadosa documentación utilizando una compilación de todos los App Clips relacionados con los videos de la WWDC 2020. Mira la aplicación completa y el App Clip emparejado aquí.

App clip invocation flow
CAPÍTULO1

El Flujo de Activación de un App Clip

Esta sección cubrirá el ciclo de vida de un App Clip: desde un usuario que interactúa con un App Clip hasta los diversos métodos de cambio a la aplicación completa.

Flujo de activación de un App Clip

Los App Clips comienzan cuando un usuario interactúa con una Activación (Invocation).

Las Activaciones son un concepto muy importante en los App Clips, de la que hablaremos detalladamente.

Supongamos que un usuario marcó una etiqueta NFC, que es una Activación de un App Clip.

Esto es lo que sigue:

  1. El sistema iOS detecta que la etiqueta NFC es una Activación del App Clip y extrae una “URL de Activación”.
    La URL de Activación define la funcionalidad que se espera de esta Activación. Se pasará al App Clip junto con todos los datos necesarios para dirigir al usuario a la funcionalidad requerida para dar servicio a la etiqueta NFC. Si la aplicación ya está instalada, se lanzará la aplicación y se pasará el URL de Activación tal como se pasa en el flujo de un Enlace Universal (Universal Link).Aquí tienes algunos ejemplos:
    • https://megacoffee.com/buy/paris/table/6 – El App Clip se abre en el menú de compras de la sucursal de París donde la tabla #6 ya está puesta en las preferencias. El usuario se identifica a través del inicio de sesión de Apple, paga con Apple Pay, y listo, el pedido está finalizado. Este flujo requiere la verificación de la localidad, explicado en detalles aquí.
    • https://scooter.me/rent?scooter_id=3456 – El App Clip se abre en el menú de alquiler con una identificación de scooter ya instalada. El App Clip puede notificar al usuario que su período de alquiler está a punto de terminar. Este flujo requiere una notificación del App Clip, explicado en detalles aquí.
  2. El iOS verifica el URL de Activación que es efectivamente válido, leyendo un archivo de Apple-App-Site-Association (AASA) del dominio del URL de Activación. La configuración del archivo AASA se explica en detalles aquí.
  3. Una vez que se verifica el URL de Activación, el iOS presenta una Tarjeta de App Clip al usuario. Una aplicación solo puede tener un App Clip asociado, pero puede tener varias tarjetas presentadas por el mismo App Clip.
Flujo de activación de un App Clip

Cada Tarjeta de App Clip está asociada a una única experiencia del App Clip.

El sistema iOS muestra la Tarjeta de App Clip de la experiencia que más se aproxima a la URL de Activación en la que el usuario ha hecho clic. La Tarjeta de App Clip es entonces presentada, sin ninguna interacción del desarrollador o código involugrado. 

La Tarjeta d App Clip sirve para algunos propósitos:

  1. Presentar al usuario una introducción general a las funcionalidades del App Clip, que es similar a la página de aplicaciones de la App Store en el flujo completo de descarga de aplicaciones. Esto podría presentarse como una foto de la cafetería con una breve descripción del negocio.
  2. Establecer los permisos del desarrollador y permitir al usuario la opción de desactivarlos. Ten en cuenta que los App Clips del iOS 14 tienen muy pocos permisos y contienen una lista muy pequeña. Como una ventaja adicional, los usuarios ganarán confianza con la política de privacidad mejorada de los App Clips.
  3. Presentar un botón de llamada a la acción (CTA), que informa al usuario de las principales funcionalidades que se esperan del App Clip, por ejemplo: alquilar, comprar, compartir, hacer check-in, etc.
  4. Colocar un pequeño banner que direcciona al usuario a la versión completa de la aplicación en la App Store.

Cuando se hace clic en el CTA de la tarjeta, el iOS descarga el App Clip de la App Store. Esto se hace rápidamente ya que el tamaño máximo de un App Clip es de 10MB. Como referencia, este es un tamaño bastante decente, ya que las aplicaciones más recientes tienen un tamaño promedio de 38MB.

TEl URL de Activación se pasa al App Clip a través del NSUserActivity. El desarrollador utiliza el URL para crear un deep link a las funcionalidades especificadas. El desarrollador puede utilizar parámetros del URL, por ejemplo, en el siguiente enlace, el desarrollador puede extraer el nombre de la sucursal y el numero de la tabla: https://megacoffee.com/buy/paris/table/

Cuando el App Clip se carga inicialmente, muestra un banner que dirigirá al usuario a la aplicación completa en la App Store. El desarrollador puede mostrar el banner nuevamente usando SKOverlay. Lo explicamos detalladamente aquí.

Tarjeta de App Clips
Apps clips invocations
CAPÍTULO 2

Activaciones y Experiencias para los App Clips de Apple

Esta sección describe en detalle cómo se activa un App Clip, qué Tarjeta de App Clip se muestra, qué datos se pasan al App Clip y cómo.

Un App Clip se genera a través de una Activación. Una Activación no es solo un clic, probablemente lo sepas por los Enlaces Universales (Universal Links). Una Activación es un objeto creado por Apple, que actualmente solo las herramientas o las infraestructuras de Apple pueden crear para ti.

Aún sigue sin estar claro cómo se obtiene una “URL del App Clip” que te permitiría simplemente enviar por SMS, o colocarla detrás de un código QR (actualizaremos este proceso cuando Apple proporcione más información).

Los Métodos de Activación

Safari Smart App Banner

Se pueden añadir metadatos al encabezado de un sitio web para crear un Smart App Banner que se presentará en Safari.

Aquí tienes un fragmento de código de muestra que se te pide que añadas:

El app-id se incluye en caso de que el dispositivo funcione con iOS 13 o anterior.

En este caso, el banner dirigirá al usuario a la aplicación completa en la App Store.

Para este clic, la URL que presenta el banner es la URL de Activación.

Smart Banner de la app en Safari

iMessages 

Cuando un usuario comparte un enlace a un sitio que muestra un Smart Banner, el mensaje presentará un banner que activará un App Clip.

El URL de Activación en este caso será el URL del sitio compartido.

Configuración del Smart Banner de la app en Safari

Etiqueta  NFC

  • Un toque en una etiqueta (tag) que esté asociada a un App Clip, activará esto.
  • Dentro de la etiqueta está configurado un URL de Activación.*Apple aún no ha revelado la creación de la etiqueta NFC.

Códigos visuales

  • Apple planea lanzar un código visualmente distinto que presentará una etiqueta NFC en el centro, rodeada de un código circular escaneable. 
  • Como ya se ha dicho, Apple aún no ha revelado cómo colocar el URL de un App Clip detrás de un código QR estándar.
  • Uno de los objetivos de Apple es familiarizar a los usuarios de iOS con que cuando toquen o escaneen este código serán dirigidos a un App Clip.
Códigos visuales: Smart Banner de la app en Safari

Localización

Sugerencias basadas en la localización por Siri – Apple aún no ha compartido la información completa (actualizaciones en breve)

Mapas 

Las etiquetas en un mapa pueden incluir una etiqueta que activa un App Clip. La verificación de la URL de Activación del App Clip se explica detalladamente aquí.

Cada Activación del App Clip está asociada a un URL de Activación. El URL siempre comienza con “https://mygreatapp.com/”. “https” es el esquema y “mygreatapp.com” es el host o dominio.


iOS debe verificar la URL de Activación para asegurarse de que el editor del App Clip es el dueño del dominio. Si no lo es, el usuario probablemente tendrá problemas de fraude y otros actos maliciosos.

Dado que el esquema es “https” (contrario a “http”), la URL de Activación será verificada mediante el certificado SSL, asegurando que el desarrollador del App Clip es el propietario del dominio.

OS verifica el dominio accediendo a un archivo de la Apple-App-Site-Association (AASA). Este archivo se conoce normalmente por verificar los enlaces universales de un dominio determinado.

Para verificar los App Clips de iOS debes añadir la siguiente sección al archivo de la AASA:

{
“appclips”: {
“apps”: [“ABCED12345.com.fruitstore.feedmeapp.Clip”]
}

}

Nota importante sobre los archivos de la AASA: Apple anunció en el WWDC 2020 que tiene la intención de mejorar los mecanismos de acceso a los archivos de la AASA desde los dispositivos. En lugar de que los dispositivos obtengan la AASA directamente del dominio asociado con una aplicación dada, Apple obtendrá los archivos de la AASA y los almacena en un CDN. Los dispositivos accederán al CDN de Apple, y agregarán los archivos de AASA en lecturas y operaciones más optimas.

Como resultado, el App Clip podría aumentar el número de búsquedas de archivos de la AASA, y este mecanismo propuesto podría ayudar a disminuir esto.

Dominios válidos AASA
Estado de la URL del dominio de AASA

El estado de esta caché en relación con las URL de Activación definidas para un App Clip específico se puede encontrar en App Store Connect en “Domain URL Status”

La columna del estado de la caché es lo que impulsa la Activación del App Clip en los dispositivos de los clientes. Al hacer clic en “Debug Status”, Apple puede acceder a tu archivo de la AASA en tiempo real y validar las URL.

Apps clips experiences
CAPÍTULO 3

Las Experiencias de App Clips

El término más importante que hay que entender sobre los App Clips de Apple es, probablemente, su Experiencia.

La Experiencia de App Clips es una acción que se ofrece al usuario, por ejemplo, comprar, alquilar, registrarse en un hotel, etc. Cada experiencia muestra una Tarjeta de App Clip diferente. Si quieres mostrar una Tarjeta de App Clip específica, debes definir una Experiencia específica.

Entonces, ¿Cómo se compara una Activación con una Experiencia, y cómo se muestra la Tarjeta de App Clip más relevante?

Como ya vimos, cada Activación lleva una URL de Activación. iOS compara la URL de Activación con las URLs que registras como parte de tu Experiencia de App Clip. Mostrará la Experiencia de App Clip junto con la URL que tiene el prefijo coincidente especificado. 

Por ejemplo, crear una Experiencia de App Clip con https://myrental.com/rent como URL para cubrir URLs como https://myrental.com/rent/car, https://myrental.com/rent/suv, y así sucesivamente.


Sin embargo, si un negocio tiene múltiples operaciones, se recomienda configurar la Experiencia de App Clips para una o más operaciones, y usar una Tarjeta de App Clip y una URL de Activación diferente para cada operación.

Por ejemplo, https://myrental.com/rent/car/il, https://myrental.com/rent/car/jp, etc.

La Experiencia Estándar de App Clips

En App Store Connect, en la página “nueva versión de la aplicación”debes configurar una Experiencia de App Clip predeterminada y proporcionar los siguientes metadatos para la Tarjeta de App Clip:

  • Image de encabezado.
  • Un subtitulo que proporciona más información sobre el App Clip.
  • Una llamada a la acción (CTA) que aparece en el botón que los usuarios pulsarán para lanzar el App Clip.
Experiencia de App Clips

Se utiliza una Experiencia de App Clip predeterminada para disparar un App Clip desde Smart App Banners y enlaces que los usuarios comparten en la aplicación Messages cuando no se configuran las Experiencias Avanzadas de App Clip.

No se requiere una URL de Activación para registrar una Experiencia de App Clip predeterminada.

Si el sistema verifica un App Clip, mostrará el valor estándar, incluso si no se definió una URL de Activación (mira la próxima sección). De nuevo, esto solo es cierto para Smart App Banners en Safari o los enlaces compartidos para estos sitios en el Messages.

La Experiencia Avanzada de Clips de Aplicaciones

Las Experiencias Avanzadas de Clips de Aplicaciones te permiten hacer lo siguiente:

  • Apoyar todas las Activaciones posibles, incluyendo las Activaciones de etiquetas NFC, y códigos visuales.
  • Asocia tu App Clip a una localización física.
  • Asocia una URL de Activación con tu App Clip.

Como se ha descrito anteriormente, esto permite el uso de varias Tarjetas de App Clips para diversos casos comerciales. Cada experiencia dará lugar a una tarjeta específica, personalizada en la App Store al crear la Experiencia de App Clip.

Experiencia avanzada de App Clips
Nueva experiencia de App Clips
Dashboard de la experiencia de App Clips
Developing an app clip
CAPÍTULO 4

Desarrollo de un App Clip

Para experimentar fácilmente los Clips de Aplicaciones de Apple hemos creado una aplicación de muestra simplificada que demuestra el uso de los Clips de Aplicaciones y su integración con una aplicación completa.

El ejemplo muestra las siguientes características del App Clip:

  • Creación de un App Clip.
  • Configuración de los Derechos de Dominio Asociados tanto para los Clips de Aplicaciones de iOS 14 como para los Universal Links en la aplicación completa.
  • Compartiendo recursos entre la aplicación completa y el App Clip.
  • Extrayendo la URL de Activación de NSUserActivity tanto en la aplicación completa como en el App Clip.
  • Notificaciones.
  • Pasar los datos del App Clip a la aplicación completa usando el grupo de la aplicación.
  • Verificando la localización.
  • Recomendando la aplicación completa del App Clip usando SKOverlay.
App clip limitations
CAPÍTULO 5

Limitaciones del App Clip

Apple impuso varias limitaciones a los Clips de Aplicaciones para permitir a los usuarios disfrutar de una funcionalidad instantánea con la máxima privacidad y transparencia.

Estas limitaciones sirven para que el usuario tenga un mayor control sobre su privacidad y se sienta más seguro con los estándares de privacidad de la aplicación.

  • El tamaño do los Clips de Aplicaciones está limitado a 10MB.
  • Los Clips de Aplicaciones no están incluidos en los backups de iOS (esto es, en realidad, más una característica que una limitación).
  • Los siguientes marcos no están disponibles para Clips de Aplicaciones: CallKit, CareKit, CloudKit, HealthKit, HomeKit, ResearchKit, SensorKit, y Speech. El uso de cualquiera de estos marcos en un App Clip no da lugar a errores en tiempo de complicación, pero sus APIs devuelven valores que indican falta de disponibilidad, datos vacíos o códigos de error en tiempo de ejecución.
  • El Limit App Tracking siempre está activado en los Clips de Aplicaciones de Apple, para proteger la privacidad del usuario y evitar el seguimiento del usuario entre aplicaciones y Clips de Aplicaciones. Los Clips de Aplicaciones no pueden solicitar autorización para rastrear a un usuario con AppTrackingTransparency, y tanto el nombre como el IdentifierForVendor  devuelven una cadena vacía.
  • Los Clips de Aplicaciones no pueden realizar actividades en segundo plano, como la creación de redes en segundo plano con URLSession o mantener conexiones Bluetooth cuando el App Clip no está en uso.
  • Para proteger los datos de los usuarios, los Clips de Aplicaciones de Apple no pueden acceder:
    • Datos de movimiento y aptitud.
    • Apple Music y Medios.
    • Datos de aplicaciones como Contactos, Archivos, Mensajes, Recordatorios y Fotos.
  • Un App Clip no puede compartir datos con ninguna otra aplicación, excepto su correspondiente aplicación completa.
  • Una limitación importante es el acceso a la localización. Los Clips de Aplicaciónes no pueden solicitar el acceso continuo a la localización. Esto puede crear un problema con las Activaciones que están asociadas con una localización geográfica. Es importante verificar que la URL de Activación (por ejemplo, https://mybigcup/seattle/table/17) esté efectivamente en Seattle, para evitar la confusión de que el otro usuario pague la factura de otra persona. Para esto, los Clips de Aplicaciones de Apple permiten a los usuarios verificar la localización del dispositivo dentro de un polígono, en lugar de acceder a una localización exacta. Sin embargo, para el acceso continuo a la localización, puedes solicitar la autorización <Cuando está en uso>, que se restablece automáticamente al día siguiente a las 4:00 AM hora local
Testing iOS 14 app clips
CAPÍTULO 6

Probando los Clips de Aplicaciones del iOS 14

Los App Clips de Apple pueden ser difíciles de probar, ya que el flujo de Activación comienza dentro del sistema e involucra a App Store Connect. Por lo tanto, cuando se crea inicialmente el App Clip, se necesita confiar en las siguientes medidas para probar la Activación:

Probando el procesamiento de la URL de Activación.

Un paso crítico para probar un App Clip es asegurarse de que la URL de Activación entrante sea:

  1. Extraída con éxito de la NSUserActivity.
  2. Analizada correctamente con sus parámetros.
  3. Corra el flujo adecuado.

Al inyectar una URL de Activación en una prueba, los pasos son los siguientes:

  1. Haz clic en “Producto” -> “Editar Esquema”…
  2. Coloca la variable de entorno _XCAppClipURL en el valor de la URL de Activación.
  3. Ejecuta el esquema del App Clip donde deseas. La NSUserActivity mantendrá este valor.

Para ver un ejemplo de este código, haz clic aquí.

Pruébalo después de enviarlo a la App Store Connect

Al enviar la aplicación completa y el App Clip a la App Store, puedes definir Activaciones de un App Clip en la pestaña TestFlight. Cada Activación se define con su URL de Activación.

Los probadores beta de la aplicación reconocen las Activaciones en el TestFlight y ejecutan el App Clip como si se hubiera hecho clic en una Activación usando la URL de Activación como se definió en la etapa anterior.

Limitaciones de las experiencias locales:

  • Es posible activar la App Clip Card mediante dos metodos:
    • Código QRe (Léerlo con el lector de códigos de barras nativo de iOS)
    • Etiqueta NFC
  • Compatible a partir de iOS 14.2 combinado con Xcode 12.2 y superior
  • Las experiencias locales anulan las experiencias avanzadas en App Store Connect
  • Las experiencias locales sólo pueden lanzar una aplicación firmada para desarrollo, Ad Hoc o TestFlight. No puede iniciar una app que ya esté publicada en App Store Connect
Configuración de la experiencia local de Apple App Clips
Experiencia local de Apple App Clips
(Image is taken from iOS device)
Los App Clips registran la experiencia local

Cómo configurar las experiencias locales:

  1. Asegúrate de que tu dispositivo esté habilitado en modo desarrollador
  2. Conecta tu dispositivo iOS 14.2 y superior a Xcode 12.2 y superior mediante un cable
  3. Ve a Experiencias locales – Ajustes > Desarrollador > Experiencias locales (en la sección “PRUEBAS DE APP CLIPS”)
  4. Crea una nueva experiencia seleccionando ‘Registrar experiencia local…’
  5. Crea la experiencia de la misma manera que crearías una experiencia de App Clips avanzada en App Store Connect

Cómo activarlo utilizando la Experiencial Local:

  1. Añade un App Clip a tu dispositivo utilizando los siguiente métodos:
    1. Construye y ejecuta el App Clip con Xcode
    2. Crea un archivo ipa para el App Clip utilizando la funcionalidad Archivo de Xcode, e instálalo en el dispositivo
    3. Distribuye el App Clip a los usuarios a través de TestFlight
  2. Escanea un código QR con el lector de códigos de barras nativo de iOS o etiqueta un NFC. El código QR y el NFC deben codificar una URL de activación que se superponga con la URL definida en la Experiencia Local. Esto se corresponde con las mismas reglas de solapamiento de las Experiencias Avanzadas en App Store Connect.

Pruebas tras el envío a App Store Connect

Al enviar la aplicación completa y el App Clip a la App Store, puedes definir las activaciones del App Clip en la pestaña TestFlight. Cada activación se define con su URL de activación. 

Pruebas tras el envío a App Store Connect
Añadir la activación de App Clip

Los probadores beta de la aplicación reconocen las activaciones en el TestFlight y ejecutan el Clip de la aplicación como si se hiciera clic en una activación utilizando la URL de activación definida en la etapa anterior.

App clips conclusion
CAPÍTULO 7

Conclusión – El here-and-now está aquí

Los Clips de Aplicaciones representan una nueva etapa en la forma como se consumirán y desarrollarán las aplicaciones, a la vez que se proporciona a los usuarios de iOS una mayor funcionalidad instantánea. Esto permite a los diseñadores y desarrolladores una mayor libertad.

La experiencia de los usuarios con Clips de Aplicaciones puede clasificarse en dos fases:

  • Here-and-Now’ – Un App Clip para las interacciones entre el usuario y su entorno inmediato, llevadas a cabo de una manera simple pero altamente segura.
  • ‘On-Going-Universal’ – Una aplicación completa que permite al usuario participar constantemente en la funcionalidad de la aplicación, recibir notificaciones y servicios a nivel mundial. 

Apple hizo un excelente trabajo en la creación de la infraestructura para estas dos fases, y en el diseño de una transformación perfecta entre el App Clip y las fases de la aplicación completa.

Creemos que muchas empresas pueden y deben aprovechar esta nueva tecnología para ofrecer a sus clientes y usuarios un mayor valor y mejores interacciones. Hemos creado esta completa guía para ayudarte a ampliar tus conocimientos sobre los Clips de Aplicaciones de Apple.

Para más información visita la documentación de los Clips de Aplicaciones de Apple.

¿Listo para empezar a tomar buenas
decisiones?