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

O conjunto de ferramentas para a execução de apps do Chrome em dispositivos móveis está na versão inicial do pré-lançamento para desenvolvedores. Fique à vontade para dar seu feedback usando o Issue Tracker do GitHub, nosso fórum de desenvolvedores de apps do Chrome, o Stack Overflow ou a página de desenvolvedores do Google+.

Um app do Chrome executado em computadores e dispositivos móveis

Informações gerais

É possível executar apps do Chrome em Android e iOS usando um conjunto de ferramentas baseado no Apache Cordova (link em inglês), um framework de desenvolvimento para dispositivos móveis de código aberto que cria apps para dispositivos móveis com recursos nativos usando HTML, CSS e JavaScript.

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

Outros recursos

Vamos lá!

Etapa 1: instalar as ferramentas de desenvolvimento

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

Dependências de desenvolvimento para todas as plataformas

  • É necessário o Node.js versão 0.10.0 (ou mais recente) com npm:

    • 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ê quiser evitar a necessidade de acesso raiz, pode ser mais prático instalar via nvm. Exemplos
    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

Segmentar Android

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

  • Java JDK 7 (ou mais recente)
  • SDK do Android versão 4.4.2 (ou mais recente)
    • Instale o SDK e as Ferramentas para desenvolvedores Android que acompanham o Android ADT Bundle.
    • Adicione sdk/tools e sdk/platform-tools à sua variável de ambiente PATH.
    • OS X: a versão do Eclipse que acompanha o SDK do Android requer o JRE 6. Se você não solicitar a instalação do JRE 6 ao abrir o Eclipse.app, procure-o na Mac App Store.
    • Linux: o SDK do Android requer bibliotecas de suporte de 32 bits. No Ubuntu, acesse-os via: apt-get install ia32-libs.
  • Apache Ant

Segmentação para 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ária 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 para enviar à app store.
    • Você pode pular o registro se planeja usar apenas os simuladores do iPhone/iPad.

Instale a ferramenta de linha de comando cca.

Instale cca por meio do 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ê vai 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 do app do Chrome para dispositivos móveis em um diretório chamado YourApp, execute:

cca create YourApp

Se você já tiver criado um app do Chrome e quiser fazer a portabilidade dele para uma plataforma para dispositivos móveis, use a flag --link-to e crie um link simbólico para ele:

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

Para copiar os arquivos de apps do Chrome, use a flag --copy-from:

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

Ainda não tem seu próprio app do Chrome? Teste um dos vários apps de exemplo do Google Chrome com suporte para dispositivos móveis.

Etapa 3: desenvolver

Você pode criar e executar seu 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ê tenha configurado um emulador. Execute android avd para configurar isso. Faça o download de mais imagens do emulador executando android. Para agilizar a execução das imagens de Intel, instale o HAXM da Intel (link em inglês).
  • 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. Escolha Android > Existing Android Code Into Workspace.
  3. Importe do caminho que você acabou de criar com cca.
    • Você terá dois projetos para importar, um dos quais é *-CordovaLib.
  4. Clique no botão "Play" para executar o app.
    • Você precisará criar uma configuração de execução (como acontece com todos os aplicativos Java). Geralmente, isso é solicitado automaticamente pela primeira vez.
    • Também vai ser necessário 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 destino 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.

Fazer mudanças no código-fonte do app

Os arquivos HTML, CSS e JavaScript estão no diretório www da pasta do projeto da CCa.

Importante: depois de fazer alterações no www/, execute 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 Eclipse/XCode, execute cca prepare manualmente.

Depuração

É possível depurar seu aplicativo do Google Chrome em dispositivos móveis da mesma forma que você depura aplicativos do Cordova.

Etapa 4: próximas etapas

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

Manifesto de dispositivo móvel

Existem determinadas configurações de apps do Chrome que só se aplicam a plataformas para dispositivos móveis. Criamos um arquivo www/manifest.mobile.json para conter esses valores, e os valores específicos são referenciados na documentação do plug-in e neste guia.

Ajuste os valores aqui de acordo.

Ícones

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

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

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

Para apps iOS, os tamanhos necessários variam caso o app ofereça suporte ao iOS 6 ou ao iOS 7. O número mínimo de ícones necessários é:

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

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

Apps no iOS mostram uma tela de apresentação breve enquanto são carregados. 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 px x 1024 px + 2x (iPad retrato)
  • 1024 px x 768 px + 2x (iPad no formato paisagem)
  • 640 px 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á-las 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 das versões do Android e execute cca prepare:

    • android:versionName é definido usando a chave version em www/manifest.json. Isso também define a versão do aplicativo 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 Android.

  3. Crie seu projeto:

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

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

  5. Faça upload do aplicativo assinado para o Console do desenvolvedor do Google Play.

Publicar na App Store do iOS

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

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

    plataformas abertas/ios/*.xcodeproj

  3. Siga o Guia do App Distribution da Apple.

Considerações especiais

Se você nunca usou os Apps do Chrome, o maior problema é que alguns recursos da Web estão desativados. No entanto, vários deles funcionam atualmente no Cordova.

Um aplicativo 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 de apps do Chrome definidos em chrome.app.window serão ignorados, usando as dimensões nativas do dispositivo.
    • Correção sugerida:remova as dimensões de janela codificadas. Crie seu app com tamanhos diferentes em mente.
  • Botões e links pequenos são difíceis de tocar com um dedo.
    • Correção sugerida:ajuste as áreas de toque para pelo menos 44 x 44 pontos.
  • Comportamento inesperado ao passar o cursor do mouse, o que não existe em telas sensíveis ao toque.
    • Correção sugerida:além de passar o cursor, ative elementos da interface, como menus suspensos e dicas, ao tocar.
  • Um atraso de toque de 300 ms.

APIs compatíveis do Chrome

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

  • identity: os usuários fazem login com o OAuth2.
  • payments: venda produtos virtuais em seu app para dispositivos móveis
  • pushMessaging: envia mensagens do servidor para o app.
  • sockets: enviam e recebem dados pela rede usando TCP e UDP
  • notificações (somente Android): envie notificações detalhadas do seu aplicativo para dispositivos móveis.
  • storage: armazena e recupera dados de chave-valor localmente
  • syncFileSystem: armazena e recupera arquivos em backup no Google Drive.
  • alarmes: executa 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 Chrome JavaScript são implementadas. Nem todos os recursos do Chrome para computador estão disponíveis para dispositivos móveis:

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

Acompanhe o progresso na nossa página de Status da API.

Ferramenta para desenvolvedores de apps do Chrome

A Chrome Apps Developer Tool (ADT) para Android é um app Android autônomo que permite fazer o download e executar um app do Chrome sem configurar o conjunto de ferramentas de desenvolvimento, conforme descrito acima. Use o Chrome ADT quando quiser visualizar rapidamente um app do Chrome já empacotado como .crx no dispositivo Android.

O Chrome ADT 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.