Partilhar via

Comece a desenvolver um aplicativo Web PWA ou híbrido para Android

Este guia irá ajudá-lo a começar a criar um aplicativo Web híbrido ou um Aplicativo Web Progressivo (PWA) 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 componentes certos, os aplicativos baseados na Web podem funcionar em um dispositivo Android de uma maneira que parece para os usuários muito semelhante a um aplicativo nativo.

Recursos de um aplicativo Web PWA ou híbrido

Existem dois tipos principais de aplicações Web que podem ser instaladas em dispositivos Android. A principal diferença é se o código do aplicativo está incorporado em um pacote de aplicativo (híbrido) ou hospedado em um servidor Web (pwa).

  • Hybrid web apps: Code (HTML, JS, CSS) é empacotado em um APK e pode ser distribuído através 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) vive 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 Web Fiável.

PWAs e aplicativos Web híbridos são muito semelhantes a um aplicativo Android nativo na medida em que:

  • 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
  • Trabalhar Offline (sem ligação à Internet)

Os PWAs também têm algumas características únicas:

  • Pode ser instalado na tela inicial do Android diretamente da web (sem uma App Store)
  • Além disso, pode ser instalado pela Google Play Store usando um Trusted Web Activity
  • Pode ser descoberto através de pesquisa na web ou compartilhado através de um link de URL
  • Confie num(a) de 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 Córdova

Apache Cordova é uma estrutura de código aberto que pode simplificar a comunicação entre o seu código JavaScript que vive num WebView nativo e a plataforma Android nativa usando plugins. Esses plugins expõem endpoints JavaScript que podem ser chamados a partir do seu código e que permitem chamar APIs nativas de dispositivos Android. Alguns exemplos de plugins Cordova incluem acesso a serviços do dispositivo, como status da bateria, acesso a arquivos, vibração / toques, etc. Normalmente, esses recursos não estão disponíveis para aplicativos Web ou navegadores.

Existem duas distribuições populares de Córdova:

  • PhoneGap: O suporte foi descontinuado pela Adobe.

  • Iónico

Iónico

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). Ionic permite-lhe usar Angular ou React.

Observação

Existe uma nova versão do Ionic que usa uma alternativa ao Córdova, chamada Capacitor. Esta alternativa usa contentores para tornar a sua aplicação mais acessível na web.

Comece a usar o Ionic instalando as ferramentas necessárias

Para começar a criar um aplicativo Web PWA ou híbrido com o Ionic, você deve primeiro instalar as seguintes ferramentas:

Crie um novo projeto com Ionic Cordova e Angular

Instale Ionic e 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 "Tabs" digitando o comando:

ionic start photo-gallery tabs

Vá para a pasta da aplicação:

cd photo-gallery

Execute o aplicativo em seu navegador da Web:

ionic serve

Para obter mais informações, consulte os docs do Ionic Cordova Angular. Visite a seção Transformar o seu aplicativo Angular em um PWA nos documentos do Ionic para saber como mover o seu aplicativo de híbrido para PWA.

Crie um novo projeto com Ionic Capacitor e Angular

Instale o Ionic e o Cordova-Res digitando o seguinte na 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 digitando o comando:

ionic start photo-gallery tabs --type=angular --capacitor

Vá para a pasta da aplicação:

cd photo-gallery

Adicione componentes para tornar o aplicativo um PWA:

npm install @ionic/pwa-elements

Importe @ionic/pwa-elements adicionando 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 a documentação do Ionic Capacitor Angular. Visite a secção Tornar a sua aplicação Angular um PWA da documentação do Ionic para saber como converter a sua aplicação de híbrida para PWA.

Crie um novo projeto com Ionic e React

Instale a CLI Ionic digitando o seguinte em sua linha de comando:

npm install -g @ionic/cli

Crie um novo projeto com o React inserindo o comando:

ionic start myApp blank --type=react

Vá para a pasta da aplicação:

cd myApp

Execute o aplicativo em seu navegador da Web:

ionic serve

Para obter mais informações, consulte a documentação do Ionic React. Visite a seção Transformar a sua aplicação React numa PWA da documentação Ionic para saber como transformar a sua aplicação de híbrida para uma PWA.

Teste seu aplicativo Ionic em um dispositivo ou emulador

Para testar a sua aplicação Ionic num dispositivo Android, ligue o seu dispositivo (certifique-se de que está primeiro ativado para desenvolvimento) e, em seguida, na sua linha de comandos, introduza:

ionic cordova run android

Para testar seu aplicativo Ionic em um emulador de dispositivo Android, você deve:

  1. Instale os componentes necessários -- Java Development Kit (JDK), Gradle e Android SDK.

  2. Criar um dispositivo virtual Android (AVD): Consulte o [Guia do desenvolvedor do Android]](https://developer.android.com/studio/run/managing-avds.html).

  3. Digite o comando para o Ionic criar e implantar seu aplicativo no emulador: ionic cordova emulate [<platform>] [options]. Neste caso, o comando deve ser:

ionic cordova emulate android --list

Consulte o Emulador Cordova na documentação do Ionic para obter mais informações.