Añadir un target de iOS App Clip

Esta guía describe cómo añadir manualmente otro target de iOS App Clip que renderice con Flutter a tu proyecto Flutter existente o proyecto add-to-app.

Para ver una muestra que funcione, consulta el ejemplo de App Clip en GitHub.

Abre tu proyecto de Xcode para iOS, como ios/Runner.xcworkspace para aplicaciones Flutter completas.

2.1

Haz clic en tu proyecto en el Project Navigator para mostrar la configuración del proyecto.

Presiona + en la parte inferior de la lista de targets para añadir un nuevo target.

2.2

Selecciona el tipo App Clip para tu nuevo target.

2.3

Introduce los detalles de tu nuevo target en el cuadro de diálogo.

Selecciona Storyboard para Interface.

Selecciona el mismo idioma que tu target original para Language.

(En otras palabras, para simplificar la configuración, no crees un target de App Clip en Swift para un target principal en Objective-C, y viceversa).

2.4

En el siguiente cuadro de diálogo, activa el nuevo esquema (scheme) para el nuevo target.

2.5

De vuelta en la configuración del proyecto, abre la pestaña Build Phases. Arrastra Embedded App Clips por encima de Thin Binary.

3.1

En el Project Navigator, en el grupo de App Clip recién creado, elimina todo excepto Info.plist y <app clip target>.entitlements.

Mover archivos a la papelera.

3.2

Si no utilizas el archivo SceneDelegate.swift, elimina la referencia al mismo en el Info.plist.

Abre el archivo Info.plist en el grupo de App Clip. Elimina la entrada completa del diccionario para Application Scene Manifest.

Este paso no es necesario para proyectos add-to-app ya que estos proyectos tienen sus configuraciones y versiones de compilación personalizadas.

4.1

De vuelta en la configuración del proyecto, selecciona la entrada del proyecto en lugar de cualquier target.

En la pestaña Info, bajo el grupo desplegable Configurations, expande las entradas de Debug, Profile y Release.

Para cada una, selecciona el mismo valor en el menú desplegable para el target de App Clip que la entrada seleccionada para el target de aplicación normal.

Esto le da a tu target de App Clip acceso a las configuraciones de compilación requeridas de Flutter.

Establece el iOS Deployment Target en al menos 16.0 para aprovechar el límite de tamaño de 15MB.

4.2

En el archivo Info.plist del grupo de App Clip, establece:

• Build version string (short) como $(FLUTTER_BUILD_NAME)
• Bundle version como $(FLUTTER_BUILD_NUMBER)

Asumiendo que la intención es mostrar la misma interfaz de usuario de Flutter en la aplicación estándar que en el App Clip, comparte el mismo código y assets.

Para cada uno de los siguientes: Main.storyboard, Assets.xcassets, LaunchScreen.storyboard, GeneratedPluginRegistrant.m y AppDelegate.swift (y Supporting Files/main.m si usas Objective-C), selecciona el archivo y luego, en la primera pestaña del inspector, incluye también el target de App Clip en el grupo de casillas de verificación de Target Membership.

En este caso, no elimines todo lo indicado en el Paso 3. En su lugar, utiliza el andamiaje (scaffolding) y las APIs de iOS add-to-app para realizar un lanzamiento personalizado de Flutter. Por ejemplo, para mostrar una ruta personalizada de Flutter.

Este es un paso estándar para el desarrollo de App Clips. Consulta la documentación oficial de Apple.

6.1

Abre el archivo <app clip target>.entitlements. Añade un tipo de Array Associated Domains. Añade una fila al array con appclips:<tu bundle id>.

6.2

Este mismo derecho (entitlement) de dominios asociados también debe añadirse a tu aplicación principal.

Copia el archivo <app clip target>.entitlements de tu grupo de App Clip a tu grupo de aplicación principal y cámbiale el nombre a el mismo que el de tu target principal, como Runner.entitlements.

Abre el archivo y elimina la entrada Parent Application Identifiers del archivo de derechos (entitlements) de la aplicación principal (deja esa entrada en el archivo de derechos de la App Clip).

6.3

De vuelta en la configuración del proyecto, selecciona el target de la aplicación principal, abre la pestaña Build Settings. Establece el ajuste Code Signing Entitlements a la ruta relativa del segundo archivo de derechos (entitlements) creado para la aplicación principal.

Estos pasos no son necesarios para add-to-app.

7.1

Para el target de Swift, establece el ajuste de compilación Objective-C Bridging Header a Runner/Runner-Bridging-Header.h.

En otras palabras, el mismo ajuste que en la configuración de compilación del target de la aplicación principal.

7.2

Ahora abre la pestaña Build Phases. Presiona el signo + y selecciona New Run Script Phase.

Arrastra esa nueva fase por debajo de la fase Dependencies.

Expande la nueva fase y añade esta línea al contenido del script:

/bin/sh "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build

Desmarca Based on dependency analysis.

En otras palabras, el mismo ajuste que en las fases de compilación (build phases) del target de la aplicación principal.

Esto asegura que tu código Dart de Flutter se compile al ejecutar el target de App Clip.

7.3

Presiona el signo + y selecciona New Run Script Phase de nuevo. Déjala como la última fase.

Esta vez, añade:

/bin/sh "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed_and_thin

Desmarca Based on dependency analysis.

En otras palabras, el mismo ajuste que en las fases de compilación (build phases) del target de la aplicación principal.

Esto asegura que tu aplicación y motor de Flutter se incrusten en el paquete (bundle) de la App Clip.

8.1

Abre el Podfile de tu proyecto Flutter o proyecto host de add-to-app.

Para aplicaciones Flutter completas, reemplaza la siguiente sección:

target 'Runner' do
  use_frameworks!
  use_modular_headers!
​
  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end

por:

use_frameworks!
use_modular_headers!
flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
​
target 'Runner'
target '<name of your App Clip target>'

En la parte superior del archivo, descomenta también platform :ios, '13.0' y establece la versión al menor valor de los Deployment Target de iOS de los dos targets.

Para add-to-app, añade a:

target 'MyApp' do
  install_all_flutter_pods(flutter_application_path)
end

por:

target 'MyApp' do
  install_all_flutter_pods(flutter_application_path)
end
​
target '<name of your App Clip target>'
  install_all_flutter_pods(flutter_application_path)
end

8.2

Desde la línea de comandos, entra en el directorio de tu proyecto Flutter y luego instala el pod:

cd ios
pod install

Ahora puedes ejecutar tu target de App Clip desde Xcode seleccionando tu target de App Clip en el menú desplegable de esquemas (schemes), seleccionando un dispositivo con iOS 16 o superior y presionando ejecutar.

Para probar el lanzamiento de un App Clip desde el principio, consulta también el documento de Apple sobre Probar la experiencia de lanzamiento de tu App Clip.

Desafortunadamente, flutter attach no puede autodescubrir la sesión de Flutter en un App Clip debido a las restricciones de permisos de red.

Debes entonces copiarla y pegarla en el comando flutter attach para conectarte.

Por ejemplo:

flutter attach --debug-uri <copied URI>