Executar apps do Chrome em dispositivos móveis com o Apache Cordova

O conjunto de ferramentas para executar apps do Chrome em dispositivos móveis está na versão inicial da prévia para desenvolvedores. Deixe seu feedback no Issue Tracker do GitHub, no nosso fórum para desenvolvedores de apps do Chrome, no Stack Overflow ou na página de desenvolvedores do G+.

Um app do Chrome em execução no computador e no dispositivo móvel

Visão geral

É possível executar os Apps do Chrome no Android e no iOS usando uma toolchain baseada no Apache Cordova, um framework de desenvolvimento móvel de código aberto para criar apps móveis com recursos nativos usando HTML, CSS e JavaScript.

O Apache Cordova envolve o código da Web do seu aplicativo com um shell de aplicativo nativo e permite distribuir seu app da Web híbrido pelo Google Play e/ou pela App Store da Apple. Para usar o Apache Cordova com um app do Chrome existente, use a ferramenta de linha de comando cca (c ordova c hrome a pp).

Outros recursos

Vamos começar.

Etapa 1: instalar as ferramentas de desenvolvimento

O conjunto de ferramentas de Aplicativos do Google Chrome para dispositivos móveis pode ser direcionado ao iOS 6 ou posterior e ao Android 4.x ou posterior.

Dependências de desenvolvimento para todas as plataformas

  • O Node.js versão 0.10.0 (ou mais recente) com npm é obrigatório:

    • Windows: instale o Node.js usando os executáveis de instalação disponíveis para download em nodejs.org.
    • OS X ou Linux: os executáveis de instalação também estão disponíveis em nodejs.org. Se você não quiser precisar de acesso de raiz, talvez seja mais conveniente instalar pelo nvm. Exemplo:
    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

Direcionamento para o Android

Ao desenvolver um aplicativo para Android, também será necessário instalar:

  • Java JDK 7 (ou mais recente)
  • SDK do Android versão 4.4.2 (ou mais recente)
    • Instale o SDK do Android e as ferramentas para desenvolvedores do Android que vêm com o pacote ADT do Android.
    • Adicione sdk/tools e sdk/platform-tools à sua variável de ambiente PATH.
    • OS X: a versão do Eclipse que vem com o SDK do Android requer o JRE 6. Se você não precisar instalar o JRE 6 ao abrir o Eclipse.app, faça o download pela Mac App Store.
    • Linux: o SDK do Android requer bibliotecas de suporte de 32 bits. No Ubuntu, faça o download deles em: apt-get install ia32-libs.
  • Apache Ant

Segmenta o iOS

O desenvolvimento para iOS só pode ser feito no OS X. Além disso, você precisará instalar:

  • Xcode 5 (ou mais recente), que inclui as ferramentas de linha de comando do Xcode
  • ios-deploy (necessário para implantar em um dispositivo iOS)
    • npm install -g ios-deploy
  • ios-sim (necessário para implantar no iOS Simulator)
    • npm install -g ios-sim
  • Opcional: registre-se como desenvolvedor iOS
    • Isso é necessário para testar em dispositivos reais e enviar à app store.
    • Você pode pular o registro se planeja usar apenas os simuladores de iPhone/iPad.

Instale a ferramenta de linha de comando cca.

Instale o cca pelo npm:

npm install -g cca

Para atualizar o conjunto de ferramentas mais tarde com novas versões: npm update -g cca.

Confirme se tudo está instalado corretamente executando este comando na linha de comando:

cca checkenv

Você verá o número da versão de cca gerado e uma confirmação sobre a instalação do SDK para Android ou iOS.

Etapa 2: criar um projeto

Para criar um projeto padrão de app para Chrome para dispositivos móveis em um diretório chamado YourApp, execute:

cca create YourApp

Se você já criou um app do Chrome e quer fazer a portabilidade dele para uma plataforma móvel, use a flag --link-to para criar um symlink:

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

Se você quiser copiar seus arquivos de app Chrome atuais, use a flag --copy-from:

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

Ainda não tem seu próprio app para Chrome? Teste um dos muitos exemplos de apps do Chrome com suporte para dispositivos móveis.

Etapa 3: desenvolvimento

É possível criar e executar o aplicativo de duas maneiras:

  • Opção A: na linha de comando, usando a ferramenta cca ou
  • Opção B: usando um ambiente de desenvolvimento integrado, como Eclipse ou Xcode. O uso de um ambiente de desenvolvimento integrado é totalmente opcional (mas muitas vezes útil) para ajudar a iniciar, configurar e depurar seu aplicativo híbrido para dispositivos móveis.

Opção A: desenvolver e criar usando a linha de comando

Na raiz da pasta do projeto gerada por cca:

Android

  • Para executar o app no Android Emulator: cca emulate android
    • Observação: isso exige que você configure um emulador. Execute android avd para configurar isso. Faça o download de outras imagens do emulador executando android. Para que as imagens da Intel sejam executadas mais rapidamente, instale o Intel HAXM.
  • Para executar o app em um dispositivo Android conectado: cca run android

iOS

  • Para executar o app no iOS Simulator: cca emulate ios
  • Para executar o app em um dispositivo iOS conectado: cca run ios

Opção B: desenvolver e criar usando um ambiente de desenvolvimento integrado

Android

  1. No Eclipse, selecione File -> Import.
  2. Selecione Android > Existing Android Code Into Workspace.
  3. Importe do caminho que você acabou de criar com cca.
    • Você terá dois projetos para importar, sendo um deles *-CordovaLib.
  4. Clique no botão "Play" para executar o app.
    • Você precisa criar uma configuração de execução (como em todos os aplicativos Java). Geralmente, você recebe essa solicitação automaticamente pela primeira vez.
    • Você também vai precisar gerenciar seus dispositivos/emuladores pela primeira vez.

iOS

  1. Abra o projeto no Xcode digitando o seguinte em uma janela de terminal:

    cd YourApp
open platforms/ios/*.xcodeproj

  2. Verifique se você está criando o público-alvo certo.

    No canto superior esquerdo (ao lado dos botões "Run" e "Stop"), há um menu suspenso para selecionar o projeto e o dispositivo de destino. Verifique se YourApp está selecionado, e não CordovaLib.

  3. Clique no botão Play.

Como fazer alterações no código-fonte do app

Seus arquivos HTML, CSS e JavaScript ficam no diretório www da pasta do projeto cca.

Importante: depois de fazer alterações em www/, é necessário executar cca prepare antes de implantar o aplicativo. Se você estiver executando cca build, cca run ou cca emulate na linha de comando, a etapa de preparação será feita automaticamente. Se você estiver desenvolvendo usando o Eclipse/XCode, será necessário executar cca prepare manualmente.

Depuração

Você pode depurar o app do Chrome nos dispositivos móveis da mesma forma que depura os aplicativos do Cordova.

Etapa 4: próximas etapas

Agora que você tem um Aplicativo do Google Chrome para dispositivos móveis que funciona, há muitas maneiras de melhorar a experiência em dispositivos móveis.

Manifesto para dispositivos móveis

Há algumas configurações do app Chrome que só se aplicam a plataformas móveis. Criamos um arquivo www/manifest.mobile.json para conter esses valores, e os valores específicos são referenciados em toda a documentação do plug-in e neste guia.

Ajuste os valores aqui de acordo.

Ícones

Os apps para dispositivos móveis precisam de mais resoluções de ícones do que os Apps do Chrome para computador.

Para Android, são necessários estes tamanhos:

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

Para apps iOS, os tamanhos necessários variam de acordo com o suporte ao iOS 6 ou ao iOS 7. O número mínimo de ícones necessário é:

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

Uma lista completa de ícones ficaria assim no arquivo 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"
}

Os ícones serão copiados para os locais apropriados de cada plataforma sempre que você executar cca prepare.

Telas de apresentação

Os apps iOS mostram uma breve tela de apresentação enquanto o app é carregado. Um conjunto de telas de apresentação padrão do Cordova está incluído em platforms/ios/[AppName]/Resources/splash.

Os tamanhos necessários são:

  • 320px x 480px + 2x
  • 768 x 1.024 + 2x (iPad em modo retrato)
  • 1.024 x 768 + 2x (iPad em modo paisagem)
  • 640 x 1.146 px

No momento, as imagens da tela de apresentação não são modificadas por cca.

Etapa 5: publicar

No diretório platforms do projeto, você tem dois projetos nativos completos: um para Android e outro para iOS. Você pode criar versões de lançamento desses projetos e publicá-los no Google Play ou na App Store do iOS.

Publicar na Play Store

Para publicar seu app Android na Play Store:

  1. Atualize os dois IDs de versão do Android e execute cca prepare:

    • android:versionName é definido usando a chave version em www/manifest.json. Ela também define a versão do seu app empacotado para computador.
    • android:versionCode é definido usando a chave versionCode em www/manifest.mobile.js.

  2. Edite (ou crie) platforms/android/ant.properties e defina as propriedades key.store e key.alias, conforme explicado nos documentos para desenvolvedores do Android.

  3. Crie o projeto:

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

  4. Encontre o .apk assinado localizado em platforms/android/ant-build/.

  5. Faça upload do aplicativo assinado no Google Play Developer Console.

Publicar na App Store do iOS

  1. Atualize a versão do app definindo a chave CFBundleVersion em www/manifest.mobile.js e, em seguida, execute cca prepare.

  2. Abra o arquivo de projeto do Xcode encontrado no diretório platforms/ios:

    abrir platforms/ios/*.xcodeproj

  3. Siga o guia de distribuição de apps da Apple.

Considerações especiais

Se você é novo nos apps do Chrome, o maior problema é que alguns recursos da Web estão desativados. No entanto, várias delas funcionam no Cordova.

Um app do Chrome pode não funcionar imediatamente em dispositivos móveis. Alguns problemas comuns com a portabilidade para dispositivos móveis:

  • Problemas de layout com telas pequenas, especialmente na orientação retrato.
  • Os tamanhos de janela do app Chrome definidos por chrome.app.window serão ignorados e, em vez disso, usarão as dimensões nativas do dispositivo.
    • Correção sugerida:remova as dimensões de janela codificadas; projete seu app pensando em tamanhos diferentes.
  • Botões e links pequenos são difíceis de tocar com um dedo.
    • Correção sugerida:ajuste as áreas de toque para que tenham pelo menos 44 x 44 pontos.
  • Comportamento inesperado ao usar o cursor do mouse, que não existe em telas de toque.
    • Correção sugerida:além de passar o cursor, ative elementos da interface, como menus suspensos e dicas, ao tocar.
  • Um atraso de 300 ms no toque.

APIs do Chrome com suporte

Disponibilizamos muitas das principais APIs do Chrome para os apps do Chrome para dispositivos móveis, incluindo:

  • identidade: usuários de login usando OAuth2
  • pagamentos: venda itens virtuais no seu app para dispositivos móveis.
  • pushMessaging: envia mensagens push do servidor para o app.
  • Soquetes: enviam e recebem dados pela rede usando TCP e UDP.
  • notificações (somente Android): envie notificações ricas do seu app para dispositivos móveis.
  • storage: armazena e recupera dados chave-valor localmente.
  • syncFileSystem: armazena e recupera arquivos com suporte do Google Drive.
  • Alarmes: execute tarefas periodicamente.
  • idle: detecta quando o estado inativo da máquina muda.
  • power: substitui os recursos de gerenciamento de energia do sistema

No entanto, nem todas as APIs JavaScript do Chrome são implementadas. Nem todos os recursos do Chrome para computador estão disponíveis em dispositivos móveis:

  • sem tag <webview>
  • sem IndexedDB
  • no getUserMedia()
  • sem NaCl

É possível acompanhar o progresso na página Status da API.

Ferramenta para desenvolvedores de apps do Chrome

A ferramenta para desenvolvedores de apps do Chrome (ADT) para Android é um app Android independente que permite fazer o download e executar um app do Chrome sem configurar a cadeia de ferramentas de desenvolvimento, conforme descrito acima. Use o Chrome ADT quando quiser visualizar rapidamente um app do Chrome já empacotado como um .crx no dispositivo Android.

O ADT do Chrome para Android está atualmente em uma versão pré-alfa. Para testar, consulte as notas da versão do ChromeADT.apk para ver instruções de instalação e uso.