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 la versión preliminar para desarrolladores. No dudes en enviarnos tus comentarios a través del seguimiento de errores de GitHub, nuestro foro para desarrolladores de apps de Chrome, en Stack Overflow o en nuestra página de desarrolladores de G+.

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

Descripción general

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

Apache Cordova une el código web de tu 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 tus herramientas de desarrollo

La cadena de herramientas de las Apps de Chrome para dispositivos móviles puede tener como objetivo iOS 6 (o versiones posteriores) y Android 4.x (o versiones posteriores).

Dependencias de desarrollo para todas las plataformas

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

    • Windows: Instala Node.js con los ejecutables de instalación que se pueden descargar desde nodejs.org.
    • OS X o Linux: Los ejecutables de instalación también están disponibles en nodejs.org. Si no quieres necesitar acceso de raíz, puede ser 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 lo siguiente:

  • Java JDK 7 (o superior)
  • 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 con 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 se incluye con el SDK de Android requiere JRE 6. Si al abrir Eclipse.app no se te solicita 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, obtén estos a través de apt-get install ia32-libs.
  • Apache Ant

Segmentación para iOS

Ten en cuenta que el desarrollo de 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 enviar la app a la tienda de aplicaciones.
    • Puedes omitir el registro si solo planeas usar los simuladores de iPhone o 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 adelante con versiones nuevas, usa npm update -g cca.

Ejecuta este comando desde la línea de comandos para confirmar que todo esté instalado correctamente:

cca checkenv

Verás el número de versión de cca que se muestra 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 app para Chrome para dispositivos móviles en un directorio llamado YourApp, ejecuta lo siguiente:

cca create YourApp

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

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

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

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

¿Aún no tienes tu propia app de Chrome? Prueba una de las muchas apps de Chrome de ejemplo con compatibilidad con dispositivos móviles.

Paso 3: Desarrolla

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

  • Opción A: Desde la línea de comandos, con la herramienta de cca
  • Opción B: Con un IDE, como Eclipse o Xcode. El uso de un IDE es completamente opcional (pero a menudo útil) para ayudar a iniciar, configurar y depurar tu aplicación para dispositivos móviles híbrida.

Opción A: Desarrollar y compilar con la línea de comandos

Desde la raíz de la carpeta del proyecto generada por cca, haz lo siguiente:

Android

  • Para ejecutar tu app en Android Emulator, haz lo siguiente: cca emulate android
    • Nota: Para ello, debes configurar un emulador. Puedes ejecutar android avd para configurarlo. Ejecuta android para descargar imágenes de emulador adicionales. 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, haz lo siguiente: cca run android

iOS

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

Opción B: Desarrollar y compilar con un IDE

Android

  1. En Eclipse, selecciona File -> Import.
  2. Elige Android > Existing Android Code Into Workspace.
  3. Importa desde la ruta 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 solicita esto la primera vez automáticamente.
    • También deberás administrar tus dispositivos o emuladores por 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 Run y Stop), 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.

Cómo realizar cambios en el código fuente de tu app

Tus archivos HTML, CSS y JavaScript se encuentran en el directorio www de la carpeta de tu 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 con Eclipse/XCode, debes ejecutar cca prepare de forma manual.

Depuración

Puedes depurar tu app de Chrome para dispositivos móviles de la misma manera 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 estos dispositivos.

Manifiesto para dispositivos móviles

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

Debes ajustar los valores aquí según corresponda.

Íconos

Las apps para dispositivos móviles necesitan algunas resoluciones de íconos más que las apps de Chrome para computadoras.

Para 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 la siguiente:

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

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 adecuados para cada plataforma cada vez que ejecutes cca prepare.

Pantallas de presentación

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

Los tamaños necesarios son los siguientes:

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

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

Paso 5: Publica

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.

Cómo publicar en Play Store

Para publicar tu aplicación para Android en Play Store, sigue estos pasos:

  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 configura la versión de la app empaquetada para computadoras de escritorio).
    • android:versionCode se establece con la clave versionCode en www/manifest.mobile.js.

  2. Edita (o crea) platforms/android/ant.properties y establece las propiedades key.store y key.alias (como se explica en la documentación para desarrolladores de Android).

  3. Compila tu proyecto:

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

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

  5. Sube la aplicación firmada a la consola de 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 del proyecto de Xcode que se encuentra en el directorio platforms/ios:

    open platforms/ios/*.xcodeproj

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

Consideraciones especiales

Si es la primera vez que usas las Apps de Chrome, la mayor desventaja es que algunas funciones web están inhabilitadas. Sin embargo, varios de estos sistemas 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 con la portabilidad a dispositivos móviles:

  • Problemas de diseño con pantallas pequeñas, especialmente en orientación vertical.
  • Se ignorarán los tamaños de ventana de la app de Chrome configurados a través de chrome.app.window y, en su lugar, 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.
  • Los botones y vínculos pequeños serán difíciles de presionar con un dedo.
    • Corrección sugerida: Ajusta los objetivos táctiles para que tengan un mínimo de 44 × 44 puntos.
  • Se produce un comportamiento inesperado cuando se usa el desplazamiento del mouse, que no existe en las pantallas táctiles.
    • Solución sugerida: Además de colocar el cursor sobre el elemento, activa los elementos de la IU, como los menús desplegables y las indicaciones sobre herramientas, con una pulsación.
  • Un retraso de 300 ms en la presión.

APIs de Chrome compatibles

Pusimos muchas de las principales API de Chrome a disposición de las Apps de Chrome para dispositivos móviles, entre ellas:

  • identity: Permite que los usuarios accedan con OAuth2.
  • payments: Vende bienes virtuales en tu aplicación para dispositivos móviles.
  • pushMessaging: Envía mensajes a tu app desde tu servidor.
  • Sockets: Envía y recibe datos a través de la red con TCP y UDP.
  • Notificaciones (solo para Android): Envía notificaciones enriquecidas desde tu app para dispositivos móviles.
  • storage: Almacena y recupera datos de pares clave-valor de forma local.
  • syncFileSystem: Almacena y recupera archivos con copia de seguridad en Google Drive.
  • alarmas: Ejecuta tareas de forma periódica.
  • idle: Detecta cuando 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 están implementadas. Además, no todas las funciones de Chrome para computadoras están disponibles en dispositivos móviles:

  • No hay etiqueta <webview>
  • sin IndexedDB
  • no getUserMedia()
  • Sin NaCl

Puedes hacer un seguimiento del progreso en nuestra página 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 de Chrome cuando quieras obtener una vista previa rápida de una app de Chrome existente (ya empaquetada como .crx) en tu dispositivo Android.

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