PWA (Progressive Web App) é uma aplicação híbrida entre web e mobile, desenvolvido para se comportar como um aplicativo nativo. Ele pode ser instalado pelo navegador, por isso não é necessário publicá-lo na loja de aplicativos. Como vantagens, podemos destacar: as aplicações são leves e atualizadas sem ação do usuário, parte do conteúdo pode ficar disponível offline e é responsivo. O tutorial irá mostrar todo passo para que seja configurado o PWA no Cronapp tanto no web quanto no mobile.
Pré-requisitos
Antes de começar a seguir os passos do tutorial é preciso ter certeza de que se tem um ambiente minimamente preparado para reproduzir o exemplo. Abaixo estão os requisitos principais.
Requisitos:
Projeto do tipo web ou mobile criado. Caso haja dúvidas de como criar esse tipo de projeto, clique aqui.
Passo-a-passo
Após o pré-requisito ser definido, seguiremos com os passos de configuração do PWA Web e Mobile.
Instalando o plugin
Siga os passos abaixo para instalar o Plugin Cronapp PWA em seu projeto Cronapp.
Figura 1 - Instalando plugin PWA
- Acesse Plugin no menu do sistema e selecione a opção Instalar Plugins;
- Selecione a categoria General e avance ou pesquise pelo nome "Cronapp PWA";
- Selecione Cronapp PWA, clique em Avançar e, em seguida, em Finalizar.
| Dica |
|---|
Sempre que instalar um novo plugin, recomendamos Recompilar e Reabrir o Projeto. |
Configuração
Após o projeto ser Recompilado, iremos configurar o PWA tanto para Mobile quanto para Web.
| Aviso |
|---|
Para qualquer alteração feita na aba PWA da janela de Configuração dos dispositivos móveis (figura 2), é necessário desinstalar e instalar novamente a aplicação com o PWA no dispositivo (computador ou Smartphone). |
| Nota |
|---|
Todos os campos da configuração do PWA devem estar preenchidos para que funcione corretamente. |
Configuração Mobile
Para ir à janela de configuração, acesse no menu do sistema Dispositivos Móveis > Configurações e em seguida selecione a aba PWA e siga os passos da Figura 2 para configurar.
Figura 2 - Configurando a parte Mobile do PWA
- Insira um nome para a sua aplicação PWA, que será exibido ao usuário final.
- Insira uma descrição sobre a sua aplicação PWA.
- Insira a URL completa do projeto, como estamos instalando o PWA mobile em modo Debug, estamos inserindo a URL da página de login mobile. É necessário que possua o protocolo https.
- Defina uma cor de fundo para a aplicação PWA.
- Defina uma cor para o tema de sua aplicação PWA.
- Por fim, selecione o ícone que será exibido ao usuário, de preferência uma imagem com dimensões iguais (em forma de quadrado).
Salve as configurações.
Configuração Web
Caso deseje configurar o PWA também no ambiente web, acesse novamente Dispositivos Móveis > Configurações e em seguida selecione a aba PWA para agora configurar a parte web da aplicação PWA
Figura 2.1 - Configurando a parte web do PWA
- Insira um nome para a sua aplicação PWA, que será exibido ao usuário final.
- Insira uma descrição sobre a sua aplicação PWA.
- Insira a URL completa do projeto, como estamos instalando o PWA web, estamos inserindo a URL da página de login web. É necessário que possua o protocolo https.
- Defina uma cor de fundo para a aplicação PWA.
- Defina uma cor para o tema de sua aplicação PWA.
- Por fim, selecione o ícone que será exibido ao usuário, de preferência uma imagem com dimensões iguais (Em forma de quadrado) e por fim, salve as configurações.
| Âncora | ||||
|---|---|---|---|---|
|
Instalação do PWA
Após a aplicação ser configurada, execute o projeto para iniciarmos a instalação, os procedimentos deste tópico não funcionarão em janela anônima.
| Informações |
|---|
É possível também instalar o PWA por meio do bloco de programação Instalar PWA. |
Instalando PWA no computador
Execute o projeto web no navegador como mostrado na figura 3 e execute os passos.
Figura 3 - Instalando o PWA Web
- Clique no ícone de download que irá aparecer ao executar o PWA Web.
- Clique em Instalar.
Instalando PWA no dispositivo móvel
Após acessar a URL da aplicação com o PWA (web ou mobile), os passos para a instalação no dispositivo móvel é o mesmo que o mostrado na figura 3.2
Figura 3.1 - Instalando o PWA em um dispositivo móvel
- Após abrir a aplicação no navegador mobile, clique em Adicionar o app <nome da aplicação> à tela inicial.
- Clique em Adicionar e instalará um aplicativo PWA no seu celular.
| Âncora | ||||
|---|---|---|---|---|
|
Desinstalação
Passos para desinstalar o PWA.
| Informações |
|---|
O PWA pode ser desinstalado pelo desinstalador padrão do sistema operacional. |
Desinstalando PWA no computador
Para desinstalar o PWA, siga os passos da figura 4.
Figura 4 - Desinstalando o PWA no navegador do computador
- Clique nos 3 pontos na parte superior do projeto PWA em execução.
- Clique em Desinstalar <nome do app>.
- Selecione a caixa para remover também os dados que ficaram armazenados no navegador.
- Por fim, clique em Remover.
Desinstalando PWA no dispositivo móvel
O processo para desinstalar o PWA do dispositivo móvel varia de dispositivo para dispositivo, pois será desinstalado da mesma forma que qualquer tipo de aplicativo. Abaixo, segue uma imagem ilustrativa do aplicativo sendo desinstalado.
Figura 4.1 - Imagem ilustrativa da desinstalação do PWA em um Smartphone Android
Nessa página
| Índice |
|---|