Pular para o conteúdo principal

Guia PWA

Um Progressive Web App (PWA) é uma aplicação web que oferece uma experiência semelhante à de um aplicativo nativo, mas que é acessada através de um navegador, podendo ser instalada no dispositivo do usuário para ser usada offline, recebendo notificações e com integração com o sistema operacional. Construídos com tecnologias web como HTML, CSS e JavaScript, os PWAs combinam a confiabilidade, a instalação e os recursos de um aplicativo com a acessibilidade, a multiplataforma e a indexação de um site.

Configurações na Application​

Certifique-se de que sua aplicação já esteja publicada antes de realizar as configurações. Recomendamos a escolha de uma fonte e um ícone para o seu aplicativo.

App Configs

Ative o PWA marcando a opção como "true".

PWA config

Configurações Adicionais no Inspector​

Display​

  • BROWSER: Abre em uma aba convencional do navegador. A PWA é aberta em uma aba normal do navegador, como um site comum. Aparência: A barra de endereço e a interface completa do navegador são mantidas.

  • FULLSCREEN: Utiliza toda a área de exibição disponível, sem mostrar elementos da tela do usuário. A PWA é exibida em tela cheia, usando a área total da tela do dispositivo. Aparência: Todos os elementos da interface do navegador e do sistema são ocultados, proporcionando uma experiência imersiva. Uso: Ideal para jogos, galerias de fotos ou qualquer aplicação onde a imersão visual é crucial. Ex: Android / iOS

Display Fullscreen Android

Display Fullscreen iOS

  • STANDALONE: O aplicativo terá a aparência de um aplicativo independente, podendo incluir uma janela diferente e seu próprio ícone no inicializador de aplicativos. Este é o modo mais comum e recomendado para PWAs. A aplicação é exibida em uma janela própria, como um aplicativo nativo. Aparência: A barra de endereço e outros elementos da interface do navegador são ocultados, mas elementos da interface do sistema, como a barra de status (em dispositivos móveis), permanecem visíveis. Uso: Oferece a experiência de aplicativo mais autêntica para o usuário. Ex: Android / iOS

Display Standalone Android

Display Standalone iOS

  • MINIMAL-UI: O aplicativo terá a aparência de um aplicativo independente, com um conjunto mínimo de elementos de UI para controlar a navegação. Este modo é semelhante ao standalone, mas mantém um conjunto mínimo de controles de navegação do navegador. Aparência: O que é mantido pode variar entre os navegadores, mas geralmente inclui botões de voltar e recarregar. A barra de endereço não é editável. Uso: É uma boa opção para aplicações com várias páginas ou navegação complexa, garantindo que o usuário ainda possa usar os controles básicos do navegador.

Display Minimal UI Android

Display Minimal UI iOS

Orientation​

Define a orientação padrão para todos os contextos de navegação top-level.

  • any: A PWA pode ser exibida em qualquer orientação: retrato ou paisagem.
  • natural: A tela pode ser exibida na sua orientação natural definida pelo sistema operacional do dispositivo, seja retrato-primário ou paisagem-primário.
  • portrait: A PWA só poderá ser exibida em qualquer uma das duas orientações de retrato (portrait-primary ou portrait-secondary).
  • landscape: A PWA só poderá ser exibida em qualquer uma das duas orientações de paisagem (landscape-primary ou landscape-secondary).

Theme Color​

Configuração da cor no topo da tela.

BackgroundColor​

Configuração da cor de fundo da aplicação.

Exemplo de Configurações​

Exemplo configs

App Icon iOS​

App Icon Config

Caso queira utilizar um ícone diferente do sistema Android, você pode utilizar o iOS Icon e selecionar um ícone. Ex: Android / iOS

Após a instalação, confira o resultado no menu de aplicativos do seu dispositivo. 🙂

App Icons