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:

1. 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

1. Acesse Plugin no menu do sistema e selecione a opção Instalar Plugins;
2. Selecione a categoria General e avance ou pesquise pelo nome "Cronapp PWA";
3. Selecione Cronapp PWA, clique em Avançar e, em seguida, em Finalizar.

Configuração

Após o projeto ser Recompilado, iremos configurar o PWA tanto para Mobile quanto para Web.

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

1. Insira um nome para a sua aplicação PWA, que será exibido ao usuário final.
2. Insira uma descrição sobre a sua aplicação PWA.
3. Insira a URL completa do projeto, como estamos instalando o PWA mobile, estamos inserindo a URL da página de login mobile. É necessário que possua o protocolo https.
4. Defina uma cor de fundo para a aplicação PWA.
5. Defina uma cor para o tema de sua aplicação PWA.
6. 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.

Configuração Web 

Caso deseje configurar o PWA também, 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

1. Insira um nome para a sua aplicação PWA, que será exibido ao usuário final.
2. Insira uma descrição sobre a sua aplicação PWA.
3. 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.
4. Defina uma cor de fundo para a aplicação PWA.
5. Defina uma cor para o tema de sua aplicação PWA.
6. 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.

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.

Instalando o PWA Mobile

Execute o projeto mobile no navegador como mostrado na figura 3 e execute os passos.

Figura 3 - Instalando o PWA Mobile

1. Clique no ícone de download que irá aparecer ao executar o PWA Mobile.
2. Clique em Instalar.

Instalando PWA Web

Execute o projeto web no navegador como mostrado na figura 3 e execute os passos.

Figura 3.1 - Instalando o PWA Web

1. Clique no ícone de download que irá aparecer ao executar o PWA Web.
2. Clique em Instalar.

Instalando o PWA em um dispositivo móvel

Após acessar a URL do projeto em execução, seja web ou mobile, os passos para a instalação no dispositivo móvel é o mesmo que o mostrado na figura 3.2

Figura 3.2 - Instalando o PWA em um dispositivo móvel

1. Após abrir o projeto, clique em Adicionar o app Posto à tela inicial.
2. Clique em Adicionar e instalará um aplicativo PWA do projeto no seu celular.

Desinstalação

Passos para desinstalar o PWA.

Desinstalando o PWA em um computador

Para desinstalar o PWA, siga os passos da figura 4.

Figura 4 - Desinstalando o PWA no navegador do computador

1. Clique nos 3 pontos na parte superior do projeto PWA em execução.
2. Clique em Desinstalar Posto.
3. Selecione a caixa para remover também os dados que ficaram armazenados no navegador.
4. Por fim, clique em Remover.

Desinstalando o PWA em um 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 5 - Imagem ilustrativa da desinstalação do PWA  em um celular