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 abaixo irá mostrar todos os passos 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.

Instalar o plugin

Siga os passos abaixo para instalar o Plugin Cronapp PWA em seu projeto Cronapp.

Image Removed

Figura 1 - Instalando plugin PWA

Para obter o plugin Cronapp PWA, acesse o botão do Menu do sistema > Plugin > Instalar Plugin para abrir a janela de instalação de plugins, pesquise por "pwa", selecione Cronapp PWA, clique em Avançar e, em seguida, em Finalizar.

Image Added

Figura 1 - Instalando plugin PWA

Configuração

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

Aba PWA: Mobile e Web

Para ir à janela de configuração, acesse clique no botão do menu do sistema > Dispositivos Móveis > Configurações e, em seguida, selecione a aba PWAe siga os passos da Figura 2 para configurar. 
. Veja abaixo a descrição dos campos para a configuração da aplicação Mobile e Web.

Image AddedImage Removed

Figura 2 - Configurando a parte Mobile do PWAo PWA

1. Nome do App PWA: nome da
Insira um nome para a
2. sua aplicação PWA,
que
3. será exibido ao usuário final.
Insira uma
4. Descrição do App PWA: descrição sobre a sua aplicação PWA.
Insira a
5. 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.
6. Defina uma cor de fundo para a aplicação PWA.
7. Defina uma cor para o tema de sua aplicação PWA.
8. Por fim, selecione uma imagem para ser o ícone que será exibido ao usuário. Essa imagem deve conter dimensões iguais (quadrada), exemplo: 1024px por 1024px.

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

Image Removed

Figura 2.1 - Configurando a parte web do PWA

1. Inicial do App PWA:insira a URL completa da aplicação.
   Para aplicações mobile, utilize a URL da aplicação mobile; na parte web, utilize a URL da aplicação web. É necessário que o endereço possua o protocolo https no endereço.
2. Cor de Plano de Fundo: defina
3. Insira um nome para a sua aplicação PWA, que será exibido ao usuário final.
4. Insira uma descrição sobre a sua aplicação PWA.
5. 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.
6. Defina uma cor de fundo para a aplicação PWA.
7. Defina Cor do Tema: defina uma cor para o tema de sua aplicação PWA.
8. Por fim, Ícone do App PWA: selecione uma imagem para ser o ícone que será exibido ao usuário. Essa imagem deve conter dimensões iguais (quadrada), exemplo: 1024px por 1024px.

Salve as configurações.

Instalação do PWA

Após a aplicação ser configurada, execute o projeto para iniciarmos a instalação , os a partir de um browser (mobile ou web). Os procedimentos deste tópico não funcionarão em janela anônima. Para os passos abaixo, utilizamos navegadores Chrome web e mobile.

Instalar aplicação PWA no computador

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

Image Modified

Figura 3 - Instalando o PWA Web

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

Instalar aplicação PWA no Smartphone

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 são semelhantes ao que foi apresentado na figura 3.2

Image Removed

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

Clique no ícone de menu ("≡") no canto superior direito perto da barra de endereço, em seguida escolha a opção "Instalar aplicativo" (destaque 1 da figura 3.1), um pop-up será exibido, clique em "Instalar" (2), por fim, um modal será exibido, clique em "Adicionar à tela inicial" (3) para concluir a instalação do PWA.

Image Added

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