Introdução desenvolver um aplicativo Web PWA ou Híbrido para Android
Este guia ajudará você a começar a criar um aplicativo Web híbrido ou aplicativo Web progressivo (PWA) em Windows usando uma única base de código HTML/CSS/JavaScript que pode ser usada na Web e em plataformas de dispositivo (Android, iOS Windows).
Usando as estruturas e componentes corretos, os aplicativos baseados na Web podem trabalhar em um dispositivo Android de uma maneira que se pareça com usuários muito semelhantes a um aplicativo nativo.
Recursos de um aplicativo Web PWA ou Híbrido
Há dois tipos principais de aplicativos 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 Web híbridos: Código (HTML, JS, CSS) é empacotado em uma APK e pode ser distribuído por meio da Google Play Store. O mecanismo de exibição é isolado do navegador da Internet dos usuários, sem compartilhamento de sessão ou cache.
PWAs (Aplicativos Web progressivos): o código (HTML, JS, CSS) vive na Web e não precisa ser empacotado como uma 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ços do navegador normal, etc. Você pode compartilhar armazenamento, cache e sessões com o navegador. Isso é basicamente como instalar um atalho no navegador Chrome em um modo especial. As PWAs também podem ser listadas na Google Play Store usando a Atividade Da Web Confiável.
PWAs e aplicativos Web híbridos são muito semelhantes a um aplicativo nativo Android na medida em que eles:
- Pode ser instalado por meio do App Store (Google Play Store e/ou Microsoft Store)
- Ter acesso a recursos nativos do dispositivo, como câmera, GPS, Bluetooth, notificações e lista de contatos
- Trabalhar offline (sem conexão com a Internet)
As PWAs também têm alguns recursos exclusivos:
- Pode ser instalado na tela inicial Android diretamente da Web (sem um App Store)
- Além disso, pode ser instalado por meio da Google Play Store usando uma atividade da Web confiável
- Pode ser descoberto por meio de pesquisa na Web ou compartilhado por meio de um link de URL
- Contar 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 há 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
Apache Cordova é uma estrutura de software livre que pode simplificar a comunicação entre o código JavaScript que reside em um WebView nativo e a plataforma de Android nativa usando plug-ins. Esses plug-ins expõem pontos de extremidade JavaScript que podem ser chamados do código e usados para chamar APIs nativas do dispositivo Android. Alguns exemplos de plug-ins Cordova incluem acesso a serviços de dispositivo, como status da bateria, acesso a arquivos, vibração/toque, etc. Esses recursos normalmente não estão disponíveis para aplicativos Web ou navegadores.
Há 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 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
Há uma nova versão do Ionic que usa uma alternativa a Cordova, chamada Capacitor. Essa alternativa usa contêineres para tornar seu aplicativo mais amigável para a Web.
Introdução com o Ionic instalando as ferramentas necessárias
Para começar a criar um aplicativo Web PWA ou híbrido com o Ionic, primeiro você deve instalar as seguintes ferramentas:
Node.js para interagir com o ecossistema Ionic. Baixe o NodeJS para Windows ou siga o guia de instalação do NodeJS usando Subsistema do Windows para Linux (WSL). Talvez você queira considerar o uso do Node Version Manager (nvm) se estiver trabalhando com vários projetos e versão do NodeJS.
VS Code para escrever seu código. Baixe 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.
Terminal do Windows para trabalhar com sua CLI (interface de linha de comando) preferencial. Instale Terminal do Windows do Microsoft Store.
Git para controle de versão. Baixe o Git.
Criar um novo projeto com Ionic Cordova e Angular
Instale o Ionic e o Cordova inserindo o seguinte em sua linha de comando:
npm install -g @ionic/cli cordova
Crie um aplicativo Ionic Angular usando o modelo de aplicativo "Tabs" inserindo o comando:
ionic start photo-gallery tabs
Altere para a pasta do aplicativo:
cd photo-gallery
Execute o aplicativo no navegador da Web:
ionic serve
Para obter mais informações, consulte os documentos do Angular Ionic Cordova. Visite o aplicativo Making your Angular uma seção PWA dos documentos Ionic para saber como mover seu aplicativo de ser um híbrido para um PWA.
Criar um novo projeto com o Capacitor Ionic e Angular
Instale o Ionic e Cordova-Res inserindo 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 o Capacitor inserindo 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
Importe,adicione @ionic/pwa-elements o seguinte ao arquivo src/main.ts :
import { defineCustomElements } from '@ionic/pwa-elements/loader';
// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);
Execute o aplicativo no navegador da Web:
ionic serve
Para obter mais informações, consulte os documentos do Angular do Capacitor Ionic. Visite o aplicativo Making your Angular uma seção PWA dos documentos Ionic para saber como mover seu aplicativo de ser um híbrido para um PWA.
Criar um novo projeto com Ionic e React
Instale a CLI Ionic inserindo o seguinte em sua linha de comando:
npm install -g @ionic/cli
Crie um novo projeto com React inserindo o comando:
ionic start myApp blank --type=react
Altere para a pasta do aplicativo:
cd myApp
Execute o aplicativo no navegador da Web:
ionic serve
Para obter mais informações, consulte os documentos do Ionic React. Visite o aplicativo Making your React uma seção PWA dos documentos Ionic para saber como mover seu aplicativo de ser 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 (verifique se ele está habilitado primeiro para desenvolvimento) e, em seguida, na linha de comando, insira:
ionic cordova run android
Para testar seu aplicativo Ionic em um emulador de dispositivo Android, você deve:
Instale os componentes necessários – JDK (Java Development Kit), 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 do Ionic para compilar e implantar seu aplicativo no emulador:
ionic cordova emulate [<platform>] [options]. Nesse caso, o comando deve ser:
ionic cordova emulate android --list
Consulte a Emulator cordova nos documentos Iônicos para obter mais informações.