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+.
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
- Há algumas considerações especiais que você precisa ter em mente ao desenvolver com o Cordova. Elas foram listadas na seção de considerações.
- Para ver quais APIs do Chrome são compatíveis com dispositivos móveis, acesse a página Status da API.
- Para visualizar seu app do Chrome em um dispositivo Android sem o conjunto de ferramentas, use a Ferramenta para desenvolvedores de apps do Chrome (ADT, na sigla em inglês).
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
esdk/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
- Adicione
apache-ant-x.x.x/bin
à sua variável de ambiente PATH.
- Adicione
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 executandoandroid
. Para agilizar a execução das imagens de Intel, instale o HAXM da Intel (link em inglês).
- Observação: isso exige que você tenha configurado um emulador. Execute
- 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
- Observação: isso requer a configuração de um perfil de provisionamento para seu dispositivo.
Opção B: desenvolver e criar usando um ambiente de desenvolvimento integrado
Android
- No Eclipse, selecione
File
->Import
. - Escolha
Android
>Existing Android Code Into Workspace
. - Importe do caminho que você acabou de criar com
cca
.- Você terá dois projetos para importar, um dos quais é
*-CordovaLib
.
- Você terá dois projetos para importar, um dos quais é
- 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
Abra o projeto no Xcode digitando o seguinte em uma janela de terminal:
cd YourApp open platforms/ios/*.xcodeproj
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ãoCordovaLib
.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:
Atualize os dois IDs das versões do Android e execute
cca prepare
:android:versionName
é definido usando a chaveversion
emwww/manifest.json
. Isso também define a versão do aplicativo empacotado para computador.android:versionCode
é definido usando a chaveversionCode
emwww/manifest.mobile.js
.
Edite (ou crie)
platforms/android/ant.properties
e defina as propriedadeskey.store
ekey.alias
, conforme explicado nos documentos para desenvolvedores Android.Crie seu projeto:
./platforms/android/cordova/build --release
Encontre o .apk assinado localizado em
platforms/android/ant-build/
.Faça upload do aplicativo assinado para o Console do desenvolvedor do Google Play.
Publicar na App Store do iOS
- Atualize a versão do aplicativo definindo a chave
CFBundleVersion
emwww/manifest.mobile.js
e, em seguida, executecca prepare
. Abra o arquivo de projeto Xcode encontrado no diretório
platforms/ios
:plataformas abertas/ios/*.xcodeproj
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.
- Correção sugerida:use as consultas de mídia CSS para otimizar seu conteúdo para telas menores.
- 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.
- Correção sugerida:use o polyfill de JavaScript FastClick by FT Labs.
- Leia este artigo sobre o HTML5Rocks (em inglês) para mais informações.
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.