Comece a desenvolver um aplicativo da Web PWA ou híbrido para Android
Este guia ajudará você a começar a criar um aplicativo Web híbrido ou PWA (Progressive Web App) no Windows usando uma única base de código HTML/CSS/JavaScript que pode ser usada na Web e em plataformas de dispositivos (Android, iOS, Windows).
Usando as estruturas e os componentes certos, os aplicativos baseados na Web podem funcionar em um dispositivo Android de uma maneira que parece muito semelhante a um aplicativo nativo.
Recursos de um aplicativo Web PWA ou híbrido
Existem dois tipos principais de aplicativos da web que podem ser instalados em dispositivos Android. A principal diferença é se o código do aplicativo está inserido em um pacote de aplicativo (híbrido) ou hospedado em um servidor Web (pwa).
Aplicativos da Web híbridos: o código (HTML, JS, CSS) é empacotado em um APK e pode ser distribuído por meio da Google Play Store. O mecanismo de visualização é isolado do navegador de internet dos usuários, sem compartilhamento de sessão ou cache.
Progressive Web Apps (PWAs): o código (HTML, JS, CSS) reside na Web e não precisa ser empacotado como um APK. Os recursos são baixados e atualizados conforme necessário usando um Service Worker. O navegador Chrome renderizará e exibirá seu aplicativo, mas parecerá nativo e não incluirá a barra de endereço normal do navegador, etc. Você pode compartilhar armazenamento, cache e sessões com o navegador. Isso é basicamente como instalar um atalho para o navegador Chrome em um modo especial. Os PWAs também podem ser listados na Google Play Store usando a Atividade confiável na Web.
PWAs e aplicativos da web híbridos são muito semelhantes a um aplicativo Android nativo, pois:
- Pode ser instalado através da App Store (Google Play Store e/ou Microsoft Store)
- Tenha acesso a recursos nativos do dispositivo, como câmera, GPS, Bluetooth, notificações e lista de contatos
- Trabalhe offline (sem conexão com a internet)
Os PWAs também têm alguns recursos exclusivos:
- Pode ser instalado na tela inicial do Android diretamente da web (sem uma App Store)
- Além disso, pode ser instalado através da Google Play Store usando uma atividade confiável na Web
- Pode ser descoberto por meio de pesquisa na web ou compartilhado por meio de um link de URL
- Conte com um Service Worker para evitar a necessidade de empacotar código nativo
Você não precisa de uma estrutura para criar um aplicativo híbrido ou PWA, mas existem algumas estruturas populares que serão abordadas neste guia, incluindo PhoneGap (com Cordova) e Ionic (com Cordova ou Capacitor usando Angular ou React).
Apache Cordova
O Apache Cordova é uma estrutura de código aberto que pode simplificar a comunicação entre seu código JavaScript que reside em um WebView nativo e a plataforma Android nativa usando plug-ins. Esses plug-ins expõem endpoints JavaScript que podem ser chamados do seu código e usados para chamar APIs nativas de dispositivos Android. Alguns exemplos de plug-ins Cordova incluem acesso a serviços do dispositivo, como status da bateria, acesso a arquivos, vibração / toques, etc. Esses recursos normalmente não estão disponíveis para aplicativos Web ou navegadores.
Existem duas distribuições populares de Cordova:
PhoneGap: O suporte foi descontinuado pela Adobe.
Ionic
O Ionic é uma estrutura que ajusta a interface do usuário (UI) do seu aplicativo para corresponder à linguagem de design de cada plataforma (Android, iOS, Windows). O Ionic permite que você use Angular ou React.
Observação
Existe uma nova versão do Ionic que usa uma alternativa ao Cordova, chamada Capacitor. Essa alternativa usa contêineres para tornar seu aplicativo mais amigável para a Web.
Comece a usar o Ionic instalando as ferramentas necessárias
Para começar a criar um PWA ou aplicativo Web híbrido com o Ionic, você deve primeiro instalar as seguintes ferramentas:
Node.js para interagir com o ecossistema iônico. Baixe o NodeJS para Windows ou siga o guia de instalação do NodeJS usando o Windows Subsystem for Linux (WSL). Você pode querer considerar o uso do Node Version Manager (nvm) se estiver trabalhando com vários projetos e versões do NodeJS.
VS Code para escrever seu código. Baixe o VS Code para Windows. Talvez você também queira instalar a Extensão Remota do WSL se preferir criar seu aplicativo com uma linha de comando do Linux.
Windows Terminal para trabalhar com sua interface de linha de comando (CLI) preferida. Instale o Terminal do Windows da Microsoft Store.
Git para controle de versão. Baixe o Git.
Crie um novo projeto com Ionic Cordova e Angular
Instale o Ionic e o Cordova digitando o seguinte em sua linha de comando:
npm install -g @ionic/cli cordova
Crie um aplicativo Ionic Angular usando o modelo de aplicativo "Guias" digitando o comando:
ionic start photo-gallery tabs
Altere para a pasta do aplicativo:
cd photo-gallery
Execute o aplicativo em seu navegador da web:
ionic serve
Para obter mais informações, consulte os documentos do Ionic Cordova Angular. Visite a seção Tornando seu aplicativo Angular um PWA dos documentos do Ionic para saber como mover seu aplicativo de um híbrido para um PWA.
Crie um novo projeto com Capacitor Iônico e Angular
Instale o Ionic e o Cordova-Res digitando o seguinte em sua linha de comando:
npm install -g @ionic/cli native-run cordova-res
Crie um aplicativo Ionic Angular usando o modelo de aplicativo "Tabs" e adicionando Capacitor digitando o comando:
ionic start photo-gallery tabs --type=angular --capacitor
Altere para a pasta do aplicativo:
cd photo-gallery
Adicione componentes para tornar o aplicativo um PWA:
npm install @ionic/pwa-elements
Importar @ionic/pwa-elements por adicione o seguinte ao seu src/main.ts arquivo:
import { defineCustomElements } from '@ionic/pwa-elements/loader';
// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);
Execute o aplicativo em seu navegador da web:
ionic serve
Para obter mais informações, consulte os documentos do Ionic Capacitor Angular. Visite a seção Tornando seu aplicativo Angular um PWA dos documentos do Ionic para saber como mover seu aplicativo de um híbrido para um PWA.
Crie um novo projeto com Ionic e React
Instale a CLI do Ionic digitando o seguinte em sua linha de comando:
npm install -g @ionic/cli
Crie um novo projeto com o React digitando o comando:
ionic start myApp blank --type=react
Altere para a pasta do aplicativo:
cd myApp
Execute o aplicativo em seu navegador da web:
ionic serve
Para obter mais informações, consulte os documentos do Ionic React. Visite a seção Tornando seu aplicativo React um PWA dos documentos do Ionic para saber como mover seu aplicativo de um híbrido para um PWA.
Testar seu aplicativo Ionic em um dispositivo ou emulador
Para testar seu aplicativo Ionic em um dispositivo Android, conecte seu dispositivo (certifique-se de que ele esteja ativado primeiro para desenvolvimento) e, em seguida, na linha de comando, digite:
ionic cordova run android
Para testar seu aplicativo Ionic em um emulador de dispositivo Android, você deve:
Instale os componentes necessários: Java Development Kit (JDK), Gradle e o SDK do Android.
Criar um dispositivo virtual Android (AVD): consulte o [Guia do desenvolvedor Android]](https://developer.android.com/studio/run/managing-avds.html).
Insira o comando para que o Ionic crie e implante seu aplicativo no emulador:
ionic cordova emulate [<platform>] [options]. Nesse caso, o comando deve ser:
ionic cordova emulate android --list
Consulte o Emulador do Cordova nos documentos do Ionic para obter mais informações.
Recursos adicionais
Windows developer