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. Siéntete libre de dar enviarnos tus comentarios mediante la Herramienta de seguimiento de errores de GitHub, nuestro foro para desarrolladores de apps de Chrome, en Stack Overflow o nuestra página de G+ Developers.

Descripción general

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

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

Recursos adicionales

• Hay algunas consideraciones especiales que debes tener en cuenta cuando desarrolles con Cordova: incluimos una lista en la sección de consideraciones.
• Para ver qué APIs de Chrome son compatibles con dispositivos móviles, visita la página Estado de la API.
• Para obtener una vista previa de tu app de Chrome en un dispositivo Android sin la cadena de herramientas, usa las Apps de Chrome. Herramienta para desarrolladores (ADT)

Empecemos.

Paso 1: Instala tus herramientas para desarrolladores

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 de Node.js (o una posterior) con npm:

  • Windows: Instala Node.js con los archivos 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 Si deseas evitar la necesidad de tener acceso al directorio raíz, es posible que te resulte más conveniente realizar la instalación 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 versiones posteriores)
• 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 viene con el SDK de Android requiere JRE 6. Si se abre Eclipse.app no te solicita que instales JRE 6. Debes obtenerlo a través de Mac App Store.
  • Linux: El SDK de Android requiere bibliotecas de compatibilidad de 32 bits. En Ubuntu, puedes obtenerlas mediante el siguiente comando: apt-get install ia32-libs
• Apache Ant
  • Agrega apache-ant-x.x.x/bin a tu variable de entorno PATH.

Segmentación para iOS

Ten en cuenta que el desarrollo para iOS solo puede realizarse 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 implementarse 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 datos 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 tarde con nuevos lanzamientos: npm update -g cca.

Confirma que todo esté instalado correctamente ejecutando este comando desde la línea de comandos:

cca checkenv

Verás el número de versión de cca y la confirmación sobre tu SDK de iOS o Android instalación.

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 creaste una app de Chrome y quieres transferirla a una plataforma móvil, puedes usar el La marca --link-to para crear un symlink:

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

Si deseas copiar los 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 app de Chrome? Prueba una de las muchas Apps de ejemplo de Chrome con los dispositivos móviles asistencia.

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: Mediante un IDE, como Eclipse o Xcode. El uso de un IDE es completamente opcional (pero útiles) para ayudarte con el lanzamiento, la configuración y la depuración de tu aplicación híbrida para dispositivos móviles.

Opción A: Desarrolla y compila 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, usa el siguiente código: cca emulate android
  • Nota: Para ello, debes tener configurado un emulador. Puedes ejecutar android avd para configurar esta opción. Ejecuta android para descargar imágenes adicionales del emulador. Para que las imágenes de inteligencia se ejecuten más rápido, instalar HAXM de Intel
• Para ejecutar tu app en un dispositivo Android conectado: cca run android

iOS

• Para ejecutar tu app en el simulador de iOS, sigue estos pasos: cca emulate ios
• Para ejecutar tu app en un dispositivo iOS conectado: cca run ios
  • Nota: Debes tener configurado un perfil de aprovisionamiento para tu dispositivo.

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.
   • Debes esperar 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 (al igual que con todas las aplicaciones de Java). Generalmente recibes este se solicita la primera vez automáticamente.
   • 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 adecuado.

   En la parte superior izquierda (junto a los botones Ejecutar y Detener), hay un menú desplegable para seleccionar el proyecto de destino y dispositivo. Asegúrate de que esté seleccionado 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 de tu proyecto de cca.

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

Depuración

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

Paso 4: Próximos pasos

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

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 www/manifest.mobile.json para que los contenga, y se hace referencia a los valores específicos en todo momento la documentación del complemento y 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, estos tamaños son necesarios:

• 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 requerida es la siguiente:

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

En tu archivo manifest.json, una lista completa de íconos se vería de la siguiente manera:

"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 de cada plataforma cada vez que los ejecutes. cca prepare

Pantallas de presentación

En iOS, las apps muestran una breve pantalla de presentación mientras se carga. Conjunto de presentación predeterminada de Cordova pantallas se incluyen en platforms/ios/[AppName]/Resources/splash.

Los tamaños necesarios son los siguientes:

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

En este momento, 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 Android. una para iOS. Puedes compilar versiones de actualización de estos proyectos y publicarlas en Google Play o en la App Store de iOS.

Cómo publicar en Play Store

Si deseas publicar tu aplicación para Android en Play Store, haz lo siguiente:

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

   • android:versionName se establece con la clave version en www/manifest.json (esto establece la de la aplicación empaquetada 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 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 archivo .apk firmado ubicado en platforms/android/ant-build/.

5. Sube la aplicación firmada a la Consola para desarrolladores de Google Play.

Publicar en la App Store de iOS

1. Actualiza la versión de la app configurando 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 la Guía de App Distribution de Apple.

Consideraciones especiales

Si es la primera vez que usas las Apps de Chrome, el mayor problema 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. Algunos problemas habituales relacionados con la portabilidad a dispositivos móviles:

• Problemas de diseño en pantallas pequeñas, especialmente en orientación vertical.
  • Corrección sugerida: Usa las consultas de medios de CSS para optimizar tu contenido para pantallas más pequeñas.
• Se ignorarán los tamaños de ventana de la app de Chrome que se establezcan a través de chrome.app.window, y no se usará la dimensiones nativas del dispositivo.
  • Corrección sugerida: Quita las dimensiones de ventana hard-coded. diseñar tu aplicación con diferentes tamaños en en la mente.
• Será difícil presionar con un dedo los botones y vínculos pequeños.
  • Corrección sugerida: Ajusta los objetivos táctiles para que tengan un mínimo de 44 × 44 puntos.
• Comportamiento inesperado cuando se confía en el desplazamiento del mouse, que no existe en las pantallas táctiles.
  • Corrección sugerida: Además de colocar el cursor sobre los elementos, activa elementos de la IU, como cuadros de información y menús desplegables en presiona.
• Un retraso de toque de 300 ms.
  • Corrección sugerida: Usa el polyfill FastClick de FT Labs de JavaScript.
  • Lea este artículo de HTML5Rocks para obtener información general.

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:

• identidad: Permiten que los usuarios accedan con OAuth2.
• pagos: Vende bienes virtuales dentro de tu aplicación 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 Android): Envía notificaciones enriquecidas desde tu aplicación 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 de Google Drive.
• alarmas: Ejecutan tareas periódicamente.
• 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 se implementan. Además, no todas las funciones del escritorio de Chrome disponibles en dispositivos móviles:

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

Puedes realizar un seguimiento del progreso en nuestra página Estado de la API.

Herramienta para desarrolladores de apps de Chrome

La herramienta para desarrolladores de aplicaciones de Chrome (ADT) para Android es una aplicación de Android independiente que te permite hacer lo siguiente: 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 quieres obtener rápidamente una vista previa de una app de Chrome existente (que ya se empaqueta como un archivo .crx) en tu dispositivo Android.

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