- Criado por Wesley Miranda de Oliveira, última alteração em 19/07/2022
Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
« Anterior Versão 31 Próxima »
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 desinstalar e instalar 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 mobile no navegador como mostrado na figura 3 e execute os passos.
Figura 3 - Instalando o PWA Mobile
- Clique no ícone de download que irá aparecer ao executar o PWA Mobile.
- 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
- Clique no ícone de download que irá aparecer ao executar o PWA Web.
- 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
- Após abrir o projeto, clique em Adicionar o app Posto à tela inicial.
- 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
- Clique nos 3 pontos na parte superior do projeto PWA em execução.
- Clique em Desinstalar Posto.
- Selecione a caixa para remover também os dados que ficaram armazenados no navegador.
- 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
- Sem rótulos