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. Sinta-se à vontade para dar enviar seu feedback usando o Issue Tracker do GitHub, nosso fórum de desenvolvedores de apps do Chrome, em Stack Overflow ou nossa página para desenvolvedores do G+.

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

Visão geral

Você pode executar apps do Chrome no Android e no iOS usando um conjunto de ferramentas baseado no Apache Cordova, um framework de código aberto para desenvolvimento de apps para dispositivos móveis com dados recursos 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 que você distribuir seu app da Web híbrido pelo Google Play e/ou pela Apple App Store. Para usar o Apache Cordova com um Aplicativo do Google Chrome existente, você usa a 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 superior) com npm é obrigatório:

    • Windows: instale o Node.js usando os executáveis de instalação que podem ser baixados no nodejs.org.
    • OS X ou Linux: os executáveis de instalação também estão disponíveis em nodejs.org. Se você Para evitar a necessidade de acesso root, pode ser mais conveniente fazer a instalação via 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

Direcionado 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 acompanham o Android ADT.
    • Adicione sdk/tools e sdk/platform-tools à variável de ambiente PATH.
    • OS X: a versão do Eclipse que acompanha o SDK do Android requer o JRE 6. Se abrir O Eclipse.app não solicita a instalação do JRE 6. Faça o download pela Mac App Store.
    • Linux: o SDK do Android requer bibliotecas de suporte de 32 bits. No Ubuntu, acesse estes dados via: apt-get install ia32-libs:
  • Apache Ant (link em inglês)

Segmenta o iOS

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

  • Xcode 5 (ou superior), 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 implantar no simulador de iOS)
    • npm install -g ios-sim
  • Opcional: registrar-se como desenvolvedor iOS
    • Isso é necessário para testes em dispositivos reais e envio para a app store.
    • É possível pular o registro se você planeja usar apenas os simuladores para iPhone/iPad.

Instale a ferramenta de linha de comando cca.

Instale cca via npm:

npm install -g cca

Para atualizar o conjunto de ferramentas posteriormente 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 seu SDK para Android ou iOS. e instalação.

Etapa 2: criar um projeto

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

cca create YourApp

Se você já criou um Aplicativo do Google Chrome e deseja transferi-lo para uma plataforma móvel, você pode usar o a sinalização --link-to para criar um link simbólico:

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

Para copiar seus arquivos de apps do Chrome, use a sinalização --copy-from:

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

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

Etapa 3: desenvolver

Você pode 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 IDE, como Eclipse ou Xcode. O uso de um IDE é totalmente opcional, mas geralmente úteis) para ajudar no lançamento, na configuração e na depuração do seu aplicativo móvel híbrido.

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 requer que você configure um emulador. Execute android avd para configurar isso. Execute android para fazer o download de outras imagens do emulador. Para que as imagens da inteligência sejam executadas com mais rapidez, instalar o HAXM da Intel.
  • 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 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). Você geralmente recebe solicitado pela primeira vez automaticamente.
    • 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 destino certo.

    No canto superior esquerdo (ao lado dos botões Run e Stop), há um menu suspenso para selecionar o projeto de destino e dispositivo. 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 mudanças em www/, execute cca prepare antes de implantar o para o aplicativo. Se você estiver executando cca build, cca run ou cca emulate na linha de comando, o a etapa de preparação é feita automaticamente. Se você estiver desenvolvendo usando Eclipse/XCode, execute cca prepare manualmente.

Depuração

Você pode depurar o app do Chrome no dispositivo móvel 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 no dispositivos móveis.

Manifesto para dispositivos móveis

Algumas configurações do app Chrome se aplicam apenas a plataformas móveis. Criamos um www/manifest.mobile.json para contê-las, e os valores específicos são referenciados ao longo a documentação do plug-in e este guia.

Ajuste os valores aqui de acordo.

Ícones

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

No Android, os seguintes tamanhos são necessários:

  • 36, 48, 78 e 96 pixels

Para apps iOS, os tamanhos necessários serão diferentes se você oferecer suporte ao iOS 6 ou ao iOS 7. O número mínimo de ícones necessários é:

  • iOS 6: 57, 72, 114 e 144 pixels
  • iOS 7: 72, 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

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

Os tamanhos necessários são:

  • 320px x 480px + 2x
  • 768 px x 1.024 px + 2x (iPad retrato)
  • 1.024 px x 768 px + 2 x (paisagem para iPad)
  • 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 uma para iOS. É possível criar versões de lançamento desses projetos e publicá-las no Google Play ou no na App Store do iOS.

Publicar na Play Store

Para publicar seu app Android na Play Store:

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

    • android:versionName é definido usando a chave version em www/manifest.json (isso define a do seu aplicativo empacotado para computador também).
    • android:versionCode é definido usando a chave versionCode em www/manifest.mobile.js.

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

  3. Crie seu projeto:

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

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

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

Publicar na App Store do iOS

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

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

    open plataformas/ios/*.xcodeproj

  3. Siga o Guia do App Distribution da Apple.

Considerações especiais

Se você é um novo usuário de Aplicativos do Google Chrome, o maior problema é que alguns recursos da Web estão desativados. No entanto, vários deles funcionam atualmente no Cordova.

Um Aplicativo do Google 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 quando na orientação retrato.
  • Os tamanhos de janela de apps do Chrome definidos por chrome.app.window serão ignorados. dimensões nativas do dispositivo.
    • Correção sugerida:remova as dimensões de janela codificadas. projetar seu app com diferentes tamanhos em mente.
  • Botões e links pequenos são difíceis de tocar com o dedo.
    • Correção sugerida:ajuste as áreas de toque para pelo menos 44 x 44 pontos.
  • Comportamento inesperado ao passar o cursor, 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 de ferramentas, tocar.
  • Um atraso de 300 ms no toque.

APIs do Chrome compatíveis

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

  • identidade: usuários que fazem login usando OAuth2
  • pagamentos: venda produtos virtuais no seu aplicativo para dispositivos móveis
  • pushMessaging: enviam mensagens por push para o app a partir do seu servidor
  • Soquetes: enviam e recebem dados pela rede usando TCP e UDP
  • notificações (somente Android): envie notificações avançadas do seu aplicativo para dispositivos móveis.
  • storage: armazenar e recuperar dados de chave-valor localmente
  • syncFileSystem: armazena e recupere arquivos com backup no Google Drive
  • alarmes: executam 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. E nem todos os recursos do Chrome para computador são disponíveis para dispositivos móveis:

  • sem tag <webview>
  • não IndexedDB
  • sem getUserMedia()
  • sem NaCl

Você pode acompanhar o progresso na nossa página Status da API.

Ferramentas para desenvolvedores de apps do Chrome

A Ferramenta do desenvolvedor de aplicativos do Google Chrome (ADT) para Android é um aplicativo Android autônomo que permite que você fazer o download e executar um Aplicativo do Google Chrome sem configurar o conjunto de ferramentas de desenvolvimento conforme descrito acima. Usar o Chrome ADT quando quiser visualizar rapidamente um app do Chrome já empacotado como um arquivo .crx no seu dispositivo Android.

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