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..
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 o App PWA, que será exibido ao usuário final.
- Insira uma descrição sobre o seu App PWA.
- Insira a URL completa do projeto, é necessário que possua o protocolo https.
- Defina uma de fundo para a aplicação PWA.
- Defina uma cor para o tema do seu projeto 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).