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
- 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.
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.
Para qualquer alteração feita na configuração, é necessário [DI-1627]Cronapp PWA e [DI-1627]Cronapp PWA novamente o PWA.
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, 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) 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
- 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.
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 no navegador mobile e siga os passos da figura 3.
Figura 3 - Instalando o PWA
Instalando PWA Web