Ejecuta Apps de Chrome en dispositivos móviles con Apache Cordova

La cadena de herramientas para ejecutar apps de Chrome en dispositivos móviles se encuentra en una etapa inicial para desarrolladores. No dudes en enviarnos tus comentarios a través de la Herramienta de seguimiento de errores de GitHub, nuestro foro para desarrolladores de apps para Chrome en Stack Overflow o nuestra página para desarrolladores de G+.

Una app de Chrome que se ejecute en computadoras y dispositivos móviles

Descripción general

Puedes ejecutar tus apps de Chrome en iOS y Android mediante una cadena de herramientas basada en Apache Cordova, un framework de código abierto para dispositivos móviles que permite compilar apps con capacidades nativas mediante HTML, CSS y JavaScript.

Apache Cordova une el código web de la aplicación con un shell de aplicación nativo y te permite distribuir tu app web híbrida a través de Google Play o la App Store de Apple. Para usar Apache Cordova con una app de Chrome existente, usa la herramienta de línea de comandos cca (c ordova c hrome a pp).

Recursos adicionales

Empecemos.

Paso 1: Instala las herramientas de desarrollo

La cadena de herramientas de las apps de Chrome para dispositivos móviles puede orientarse a iOS 6 o superior, y a Android 4.x o superior.

Dependencias de desarrollo para todas las plataformas

  • Se requiere la versión 0.10.0 de Node.js (o una posterior) con npm:

    • Windows: Instala Node.js con los ejecutables de instalación que se pueden descargar desde nodejs.org.
    • OS X o Linux: Los archivos ejecutables de instalación también están disponibles en nodejs.org. Si quieres evitar la necesidad de tener acceso con permisos de administrador, tal vez sea más conveniente instalarlo a través de nvm. Ejemplo:
    curl https://raw.github.com/creationix/nvm/master/install.sh | sh
source ~/.bash_profile || source ~/.profile || source ~/.bashrc
nvm install 0.10
nvm alias default 0.10

Orientación a Android

Cuando desarrolles una aplicación para Android, también deberás instalar:

  • Java JDK 7 (o posterior)
  • SDK de Android versión 4.4.2 (o posterior)
    • Instala el SDK de Android y las Herramientas para desarrolladores de Android que se incluyen en el paquete de ADT para Android.
    • Agrega sdk/tools y sdk/platform-tools a tu variable de entorno PATH.
    • OS X: La versión de Eclipse que incluye el SDK de Android requiere JRE 6. Si al abrir Eclipse.app no se te pide que instales JRE 6, descárgalo a través de Mac App Store.
    • Linux: El SDK de Android requiere bibliotecas de compatibilidad de 32 bits. En Ubuntu, puedes obtenerlos mediante apt-get install ia32-libs.
  • Apache Ant

Segmentación para iOS

Ten en cuenta que el desarrollo para iOS solo se puede realizar en OS X. Además, deberás instalar lo siguiente:

  • Xcode 5 (o versiones posteriores), que incluye las herramientas de línea de comandos de Xcode
  • ios-deploy (necesario para implementar en un dispositivo iOS)
    • npm install -g ios-deploy
  • ios-sim (necesario para implementar en el simulador de iOS)
    • npm install -g ios-sim
  • Opcional: Regístrate como desarrollador de iOS
    • Esto es necesario para realizar pruebas en dispositivos reales y para enviar contenido a la tienda de aplicaciones.
    • Puedes omitir el registro si solo tienes previsto usar los simuladores para iPhone y iPad.

Instala la herramienta de línea de comandos de cca

Instala cca a través de npm:

npm install -g cca

Para actualizar la cadena de herramientas más tarde con versiones nuevas, usa npm update -g cca.

Para confirmar que todo esté instalado correctamente, ejecuta este comando desde la línea de comandos:

cca checkenv

Verás el número de versión de cca que se generó y la confirmación de la instalación del SDK de Android o iOS.

Paso 2: Crea un proyecto

Para crear un proyecto predeterminado de la app de Chrome para dispositivos móviles en un directorio llamado YourApp, ejecuta lo siguiente:

cca create YourApp

Si ya compilaste una app de Chrome y deseas portarla a una plataforma móvil, puedes usar la marca --link-to para crear un symlink hacia ella:

cca create YourApp --link-to=path/to/manifest.json

Si, en cambio, deseas copiar tus archivos existentes de las apps de Chrome, puedes usar la marca --copy-from:

cca create YourApp --copy-from=path/to/manifest.json

¿Todavía no tienes tu propia aplicación de Chrome? Prueba una de las muchas Apps de Chrome de ejemplo compatibles con dispositivos móviles.

Paso 3: Desarrollo

Puedes compilar y ejecutar tu aplicación de dos maneras:

  • Opción A: Desde la línea de comandos, mediante la herramienta cca
  • Opción B: Con un IDE, como Eclipse o Xcode. El uso de un IDE es completamente opcional (pero a menudo útil) para ayudarte con el lanzamiento, la configuración y la depuración de tu aplicación móvil híbrida.

Opción A: Desarrollo y compilación con la línea de comandos

Desde la raíz de la carpeta del proyecto generada por cca:

Android

  • Para ejecutar tu app en Android Emulator, haz lo siguiente: cca emulate android
    • Nota: Esta acción requiere que hayas configurado un emulador. Puedes ejecutar android avd para configurar esto. Ejecuta android para descargar imágenes adicionales del emulador. Para que las imágenes de Intel se ejecuten más rápido, instala HAXM de Intel.
  • Para ejecutar tu app en un dispositivo Android conectado: cca run android

iOS

  • Para ejecutar la app en el simulador de iOS, haz lo siguiente: cca emulate ios
  • Para ejecutar la app en un dispositivo iOS conectado, haz lo siguiente: cca run ios

Opción B: Desarrolla y compila con un IDE

Android

  1. En Eclipse, selecciona File -> Import.
  2. Elige Android > Existing Android Code Into Workspace.
  3. Importa desde la ruta de acceso que acabas de crear con cca.
    • Deberías tener dos proyectos para importar, uno de los cuales es *-CordovaLib.
  4. Haz clic en el botón Reproducir para ejecutar la app.
    • Deberás crear una configuración de ejecución (como con todas las aplicaciones de Java). Por lo general, se te solicitará esto la primera vez de forma automática.
    • También deberás administrar tus dispositivos o emuladores la primera vez.

iOS

  1. Para abrir el proyecto en Xcode, escribe lo siguiente en una ventana de terminal:

    cd YourApp
open platforms/ios/*.xcodeproj

  2. Asegúrate de crear el objetivo correcto.

    En la parte superior izquierda (junto a los botones Ejecutar y Detener), hay un menú desplegable para seleccionar el proyecto y el dispositivo de destino. Asegúrate de que esté seleccionada YourApp y no CordovaLib.

  3. Haz clic en el botón Reproducir.

Realiza cambios en el código fuente de tu app

Tus archivos HTML, CSS y JavaScript se encuentran en el directorio www de la carpeta del proyecto de CCA.

Importante: Después de realizar cambios en www/, debes ejecutar cca prepare antes de implementar tu aplicación. Si ejecutas cca build, cca run o cca emulate desde la línea de comandos, el paso de preparación se realiza automáticamente. Si desarrollas apps con Eclipse/XCode, debes ejecutar cca prepare de forma manual.

Depuración

Puedes depurar tu app de Chrome en dispositivos móviles de la misma manera en que depuras aplicaciones de Cordova.

Paso 4: Próximos pasos

Ahora que tienes una app de Chrome para dispositivos móviles que funciona, hay muchas formas de mejorar la experiencia en dispositivos móviles.

Manifiesto de los dispositivos móviles

Hay ciertos parámetros de configuración de las aplicaciones de Chrome que solo se aplican a las plataformas móviles. Creamos un archivo www/manifest.mobile.json para contenerlos, y se hace referencia a los valores específicos en esta guía y en la documentación del complemento.

Debes ajustar los valores aquí según corresponda.

Íconos

Las aplicaciones para dispositivos móviles necesitan unas pocas resoluciones de ícono más que las aplicaciones de Chrome para computadoras de escritorio.

En Android, se necesitan los siguientes tamaños:

  • 36px, 48px, 78px, 96px

En el caso de las aplicaciones para iOS, los tamaños requeridos difieren en función de si admite iOS 6 o iOS 7. La cantidad mínima de íconos requeridos es:

  • iOS 6: 57 px, 72 px, 114 px y 144 px
  • iOS 7: 72px, 120px, 152px

Una lista completa de íconos se vería de la siguiente manera en tu archivo manifest.json:

"icons": {
  "16": "assets/icons/icon16.png",
  "36": "assets/icons/icon36.png",
  "48": "assets/icons/icon48.png",
  "57": "assets/icons/icon57.png",
  "72": "assets/icons/icon72.png",
  "78": "assets/icons/icon78.png",
  "96": "assets/icons/icon96.png",
  "114": "assets/icons/icon114.png",
  "120": "assets/icons/icon120.png",
  "128": "assets/icons/icon128.png",
  "144": "assets/icons/icon144.png",
  "152": "assets/icons/icon152.png"
}

Los íconos se copiarán en los lugares apropiados para cada plataforma cada vez que ejecutes cca prepare.

Pantallas de presentación

Las apps en iOS muestran una breve pantalla de presentación mientras se carga la app. En platforms/ios/[AppName]/Resources/splash, se incluye un conjunto de pantallas de presentación de Cordova predeterminadas.

Los tamaños necesarios son los siguientes:

  • 320px x 480px + 2x
  • 768 px x 1024 px + 2x (iPad vertical)
  • 1,024 px x 768 px + 2x (iPad horizontal)
  • 640px x 1146px

cca no modifica las imágenes de la pantalla de presentación.

Paso 5: Publicar

En el directorio platforms de tu proyecto, tienes dos proyectos nativos completos: uno para Android y otro para iOS. Puedes compilar versiones de lanzamiento de estos proyectos y publicarlas en Google Play o en la App Store de iOS.

Publicar en Play Store

Para publicar tu aplicación para Android en Play Store:

  1. Actualiza los dos IDs de versión de Android y, luego, ejecuta cca prepare:

    • android:versionName se configura con la clave version en www/manifest.json (esto también establece la versión de tu aplicación empaquetada para computadoras de escritorio).
    • android:versionCode se configura con la clave versionCode en www/manifest.mobile.js.

  2. Edita (o crea) platforms/android/ant.properties y configura las propiedades key.store y key.alias (como se explica en los documentos para desarrolladores de Android).

  3. Compila tu proyecto:

    ./platforms/android/cordova/build --release

  4. Busca el .apk firmado ubicado dentro de platforms/android/ant-build/.

  5. Sube la aplicación firmada a Google Play Console.

Publicar en la App Store de iOS

  1. Para actualizar la versión de la app, configura la clave CFBundleVersion en www/manifest.mobile.js y, luego, ejecuta cca prepare.

  2. Abre el archivo de proyecto de Xcode que se encuentra en el directorio platforms/ios:

    abrir plataformas/ios/*.xcodeproj

  3. Sigue la Guía de distribución de apps de Apple.

Consideraciones especiales

Si eres nuevo en las Apps de Chrome, el mayor inconveniente es que algunas funciones web están inhabilitadas. Sin embargo, varios de ellos sí funcionan actualmente en Cordova.

Es posible que una app de Chrome no funcione de inmediato en un dispositivo móvil. Estos son algunos problemas comunes de la portabilidad a dispositivos móviles:

  • Problemas de diseño con pantallas pequeñas, especialmente en orientación vertical.
    • Solución sugerida: Usa las consultas de medios CSS a fin de optimizar el contenido para pantallas más pequeñas.
  • Se ignorarán los tamaños de ventana de las apps de Chrome configurados a través de chrome.app.window, y se usarán las dimensiones nativas del dispositivo.
    • Solución sugerida: Quita las dimensiones de ventana hard-coded y diseña tu app teniendo en cuenta diferentes tamaños.
  • Será difícil presionar los botones y los vínculos pequeños con un dedo.
    • Solución sugerida: Ajusta los objetivos táctiles para que tengan, al menos, 44 x 44 puntos.
  • Comportamiento inesperado cuando se cuenta con el desplazamiento del mouse, que no existe en pantallas táctiles
    • Solución sugerida: Además de colocar el cursor sobre un elemento, activa elementos de la IU como menús desplegables y información sobre la herramienta al presionarlo.
  • Un retraso de 300 ms en la presión.

APIs de Chrome compatibles

Muchas de las principales API de Chrome están disponibles para las aplicaciones de Chrome para dispositivos móviles, incluidas las siguientes:

  • identidad: permite que los usuarios accedan con OAuth2
  • pagos: Vende artículos virtuales en tu app para dispositivos móviles.
  • pushMessaging: Envía mensajes a tu app desde tu servidor.
  • sockets: Enviar y recibir datos a través de la red mediante TCP y UDP.
  • notificaciones (solo en Android): envía notificaciones enriquecidas desde tu aplicación para dispositivos móviles.
  • storage: Almacena y recupera datos de pares clave-valor de manera local.
  • syncFileSystem: almacena y recupera archivos respaldados por Google Drive.
  • alarmas: Ejecutan tareas periódicamente.
  • idle: Detecta cuándo cambia el estado inactivo de la máquina.
  • power: Anula las funciones de administración de energía del sistema.

Sin embargo, no todas las APIs de JavaScript de Chrome se implementan. Y no todas las funciones de escritorio de Chrome están disponibles en dispositivos móviles:

  • sin etiqueta <webview>
  • sin IndexedDB
  • sin getUserMedia()
  • sin NaCl

Puedes hacer un seguimiento del progreso en nuestra página de estado de la API.

Herramienta para desarrolladores de apps de Chrome

La Herramienta para desarrolladores de apps de Chrome (ADT) para Android es una app para Android independiente que te permite descargar y ejecutar una app de Chrome sin configurar la cadena de herramientas de desarrollo como se describió anteriormente. Usa el ADT para Chrome cuando quieras obtener rápidamente una vista previa de una app de Chrome existente (ya empaquetada como .crx) en tu dispositivo Android.

Actualmente, el complemento ADT de Chrome para Android se encuentra en una versión previa a la versión alfa. Para probarlo, consulta las notas de la versión de ChromeADT.apk para obtener instrucciones de instalación y uso.