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 todo passo 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:
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.
InstalandoInstalar 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.
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.
Figura 1 - Instalando plugin PWA
| Dica |
|---|
Sempre que instalar um novo plugin, recomendamos Recompilar e Reabrir o Projeto. |
Configuração
Agora iremos acessar no Menu Superior Dispositivos Móveis>Configurações.
Configuração Mobile
Configuração Web
Instalação do PWA
Instalando e desinstalando o PWA Mobile
Instalando e desinstalando o PWA Web
Desinstalação
Desinstalando o PWA Mobile
Desinstalando o PWA WebApós o projeto ser recompilado, iremos configurar o PWA tanto para Mobile quanto para Web.
| Nota |
|---|
Para qualquer alteração feita na aba PWA da janela de Configuração dos dispositivos móveis (figura 2), é necessário desinstalar e instalar novamente a aplicação com o PWA no dispositivo (computador ou Smartphone). |
| Nota |
|---|
Todos os campos da configuração do PWA devem estar preenchidos para que funcione corretamente. |
Aba PWA: Mobile e Web
Para ir à janela de configuração, clique no botão do menu do sistema > Dispositivos Móveis > Configurações e, em seguida, selecione a aba PWA. Veja abaixo a descrição dos campos para a configuração da aplicação Mobile e Web.
Figura 2 - Configurando o PWA
- Nome do App PWA: nome da sua aplicação PWA, será exibido ao usuário final.
- Descrição do App PWA: descrição sobre a sua aplicação PWA.
- URL 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. - Cor de Plano de Fundo: defina uma cor de fundo para a aplicação PWA.
- Cor do Tema: defina uma cor para o tema de sua aplicação PWA.
- Í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.
| Âncora | ||||
|---|---|---|---|---|
|
Instalação do PWA
Após a aplicação ser configurada, execute o projeto para iniciarmos a instalação 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.
| Informações |
|---|
É possível também instalar o PWA por meio do bloco de programação Instalar PWA. |
Instalar aplicação PWA no computador
Execute o projeto web no navegador como mostrado na figura 3 e execute os passos.
Figura 3 - Instalando o PWA Web
- Clique no ícone de download que irá aparecer ao executar o PWA Web.
- 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 são semelhantes ao que foi apresentado na figura 3.
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.
| Nota |
|---|
Em algumas versões do Chrome, o passo apresentado no destaque 1 não é necessário, em seu lugar, o botão "Adicionar à tela inicial" é exibido logo abaixo da tela de login no momento em que a aplicação é carregada. |
Figura 3.1 - Instalando o PWA em um dispositivo móvel
| Âncora | ||||
|---|---|---|---|---|
|
Desinstalação
Passos para desinstalar o PWA.
| Informações |
|---|
O PWA pode ser desinstalado pelo desinstalador padrão do sistema operacional. |
Desinstalar aplicação PWA no 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 <nome do app>.
- Selecione a caixa para remover também os dados que ficaram armazenados no navegador.
- Por fim, clique em Remover.
Desinstalar aplicação PWA no Smartphone
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 4.1 - Imagem ilustrativa da desinstalação do PWA em um Smartphone Android
Nessa página
| Índice |
|---|