Los Clips de Aplicaciónes del iOS 14 de Apple – La Guía Definitiva de los Desarrolladores por AppsFlyer

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 Clips de Aplicaciones 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 Clip de Aplicación.

¿Por qué Clips de Aplicaciones? ¿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…

 

Saltarse la fila sin perjudicar tu privacidad

Los Clips de Aplicaciones 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 Clips de Aplicaciones 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 Clip de Aplicación 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 Clips de Aplicaciones requieren que los desarrolladores de aplicaciones comprendan algunos conceptos nuevos y desarrollen el Clip de Aplicación junto con su aplicación, lo que puede requerir cierta refactorización.

———————–

*Aviso importante

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

———————–

En mi primer intento, envié mi aplicación y mi Clip de Aplicación a la App Store, donde recibí un mensaje de error que decía que mi Clip de Aplicación “actualmente no puede ser enviado”. Esto significaba que no podía verificar la documentación de Apple para algunos flujos, y tenía que usar los gráficos de Apple.

Tan pronto como la oportunidad de presentar un Clip de Aplicación esté disponible, actualizaremos y mejoraremos esta guía.

 

Aquí tienes un desglose de lo que discutiremos en esta guía (haz clic para navegar entre las secciones):

El Flujo de Activación de un Clip de Aplicación

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

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

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

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

Esto es lo que sigue:

    1. El sistema iOS detecta que la etiqueta NFC es una Activación del Clip de Aplicación 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 Clip de Aplicación 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:

      1. https://megacoffee.com/buy/paris/table/6 – El Clip de Aplicación 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í.
      2. https://scooter.me/rent?scooter_id=3456 – El Clip de Aplicación se abre en el menú de alquiler con una identificación de scooter ya instalada. El Clip de Aplicación puede notificar al usuario que su período de alquiler está a punto de terminar. Este flujo requiere una notificación del Clip de Aplicación, 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 Clip de Aplicación asociado, pero puede tener varias tarjetas presentadas por el mismo Clip de Aplicación. Cada Tarjeta de App Clip está asociada a una única experiencia del Clip de Aplicación. Las experiencias del Clip de Aplicaciones se explican en detalles aquí. 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 Clip de Aplicación, 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 Clips de Aplicaciones 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 Clips de Aplicaciones.
      3. Presentar un botón de llamada a la acción (CTA), que informa al usuario de las principales funcionalidades que se esperan del Clip de Aplicación, 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.
    4. Cuando se hace clic en el CTA de la tarjeta, el iOS descarga el Clip de Aplicación de la App Store. Esto se hace rápidamente ya que el tamaño máximo de un Clip de Aplicación 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.
    5. El URL de Activación se pasa al Clip de Aplicación 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/

[Obtén la Guía] Todo lo que los Desarrolladores Necesitan Saber sobre Deep Linking

    1. Cuando el Clip de Aplicación 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í.

<Volver al desglose>

 

Activaciones y Experiencias para los Clips de Aplicaciones de Apple

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

 

Las Activaciones

Un Clip de Aplicación 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 Clip de Aplicación” 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:
<meta name="apple-itunes-app" content="app-clip-bundle-id=com.coffeeshop.retailapp.Clip, app-id=12345ABCD">

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.

 

   iMessages 

  • Cuando un usuario comparte un enlace a un sitio que muestra un Smart Banner, el mensaje presentará un banner que activará un Clip de Aplicación.
  • El URL de Activación en este caso será el URL del sitio compartido.

 

   Etiqueta NFC 

  • Un toque en una etiqueta (tag) que esté asociada a un Clip de Aplicación, 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. 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 Clip de Aplicación. Como ya se ha dicho, Apple aún no ha revelado cómo colocar el URL de un Clip de Aplicación detrás de un código QR estándar.

   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 Clip de Aplicación. La verificación de la URL de Activación del Clip de Aplicación se explica detalladamente aquí.

Cada Activación del Clip de Aplicación 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 Clip de Aplicación 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 Clip de Aplicación es el propietario del dominio.

iOS 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 Clips de Aplicaciones 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 Clip de Aplicación podría aumentar el número de búsquedas de archivos de la AASA, y este mecanismo propuesto podría ayudar a disminuir esto.

(Esta imagen es de la App Store Connect)

El estado de esta caché en relación con las URL de Activación definidas para un Clip de Aplicación 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 Clip de Aplicación 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.

 

<Volver al desglose>

 

Las Experiencias de Clips de Aplicaciones 

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

La Experiencia de Clips de Aplicaciones 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 Clip de Aplicación. Mostrará la Experiencia de Clip de Aplicación junto con la URL que tiene el prefijo coincidente especificado. 

Por ejemplo, crear una Experiencia de Clip de Aplicación 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 Clip de Aplicación 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 Clips de Aplicaciones

En App Store Connect, en la página “nueva versión de la aplicación”, debes configurar una Experiencia de Clip de Aplicación 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 Clip de Aplicación.
  • Una llamada a la acción (CTA) que aparece en el botón que los usuarios pulsarán para lanzar el Clip de Aplicación.

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

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

Si el sistema verifica un Clip de Aplicación, 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 Clip de Aplicación a una localización física.
  • Asocia una URL de Activación con tu Clip de Aplicación.

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 Clip de Aplicación.

(Esta imagen es de la App Store Connect)

(Esta imagen es de la App Store Connect)

(Esta imagen es de la App Store Connect)

<Volver al desglose>

 

Desarrollo de un Clip de Aplicación

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 Clip de Aplicación:

  • Creación de un Clip de Aplicación.
  • 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 Clip de Aplicación.
  • Extrayendo la URL de Activación de NSUserActivity tanto en la aplicación completa como en el Clip de Aplicación.
  • Notificaciones.
  • Pasar los datos del Clip de Aplicación a la aplicación completa usando el grupo de la aplicación.
  • Verificando la localización.
  • Recomendando la aplicación completa del Clip de Aplicación usando SKOverlay.

 

<Volver al desglose>

 

Limitaciones del Clip de Aplicación

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 Clip de Aplicación 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 Clip de Aplicación 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 Clip de Aplicación 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

 

<Volver al desglose>

 

Probando los Clips de Aplicaciones del iOS 14

Los Clips de Aplicaciones 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 Clip de Aplicación, 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 Clip de Aplicación 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 Clip de Aplicación 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 Clip de Aplicación a la App Store, puedes definir Activaciones de un Clip de Aplicación en la pestaña TestFlight. Cada Activación se define con su URL de Activación.

(Esta imagen es de la App Store Connect)

(Esta imagen es de la App Store Connect)

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

 

<Volver al desglose>    

 

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 Clip de Aplicación 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 Clip de Aplicación 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.