Lojas desenvolvidas com o VTEX IO Store Framework possuem nativamente um Progressive Web App (PWA), que é um tipo de aplicativo web que oferece uma experiência de usuário semelhante a de um aplicativo nativo, mas executada diretamente em um navegador da web.

Para lojas CMS Portal Legado, consulte o guia Como transformar o site da minha loja em um PWA.

Para configurar um PWA em sua loja, acesse Configurações da Loja > Storefront > Loja no Admin VTEX, e siga as etapas abaixo:

1. Clique na aba PWA.
2. Defina a Cor do tema, Cor de fundo e adicione o Ícone de logotipo Android (512x512, PNG) e Ícone de logotipo iOS (512x512, PNG). As cores devem ser especificadas em código hexadecimal (e.g., #F71963) e os ícones devem ter tamanho 512x512 px e extensão .png.

3. Desça a página e vá para o campo Outras configurações do PWA. Clique na seta para mostrar as outras configurações.

4. Em Outras configurações de PWA, preencha os campos conforme orientações abaixo:

   • URL inicial: URL da página inicial do PWA.
   • Orientação da tela: Formato como o conteúdo é exibido no PWA. Pode ser atribuído um dos seguintes valores: Todas, Natural, Horizontal, Horizontal (primária), Horizontal (secundária), Retrato, Vertical (primária), Vertical (secundária).

   Orientação da tela	Descrição
   Todas	A página pode ser visualizada em qualquer orientação, com o conteúdo se ajustando automaticamente para se adaptar à orientação atual do dispositivo.
   Natural	Configuração padrão de fábrica do dispositivo.
   Horizontal	O conteúdo é exibido apenas na orientação horizontal. É útil para aplicativos ou jogos que são otimizados para uma visualização mais ampla.
   Horizontal (primária)	Orientação horizontal com a parte superior do dispositivo alinhada à esquerda.
   Horizontal (secundária)	Orientação horizontal com a parte superior do dispositivo alinhada à direita.
   Retrato	O conteúdo é exibido apenas na orientação vertical. É a configuração padrão para a maioria dos aplicativos de telefonia móvel.
   Vertical (primária)	Orientação retrato com o botão home ou a parte inferior do dispositivo apontando para baixo.
   Vertical (secundária)	Orientação retrato invertida, com o botão home ou a parte inferior do dispositivo apontando para cima. É útil quando os dispositivos são usados de cabeça para baixo.

   • Visualização: Modos de visualização do conteúdo do PWA. Pode ser atribuído um dos seguintes valores: Tela cheia, Aplicativo (adicionar à tela inicial), Minimalista (não suportado pelo Chrome), Navegador.

   Visualização	Descrição
   Tela cheia	O PWA ocupa toda a tela do dispositivo, ocultando todos os elementos da interface do usuário do navegador, como a barra de endereços e outras notificações do sistema. É ideal para jogos ou aplicativos que necessitam de uma imersão completa, maximizando o espaço de tela disponível.
   Aplicativo (adicionar à tela principal)	O PWA se comporta como um app nativo, pois é executado em uma janela separada do navegador e não mostra elementos comuns do navegador como a barra de endereços. Quando adicionado à tela inicial do dispositivo, a presença do PWA é quase indistinguível de um app nativo.
   Minimalista (não suportado pelo Chrome)	O PWA mostra um mínimo de elementos de interface do usuário do navegador, como a barra de endereços e alguns controles adicionais. É um meio-termo entre o modo Aplicativo e o Navegador.

| Navegador | O PWA é aberto como uma página comum de navegador, com todas as características usuais do navegador visíveis, como a barra de endereços, abas e outros controles de interface. Não altera a maneira padrão de interação do usuário com o conteúdo web e é menos imersivo em comparação com os demais modos de visualização. |

• Adicionar à tela inicial: quando ativada, permite que o PWA seja instalado pelo usuário.
• Exibir prompt “Adicionar à tela inicial”: define o momento em que a instalação do PWA será sugerida ao usuário. Pode ser atribuído um dos seguintes valores: Na primeira visita, Ao adicionar o primeiro item ao carrinho, ou Ao finalizar a primeira compra. Esta opção é aplicável apenas quando Adicionar à Tela Inicial está ativada.

5. Salve suas alterações clicando em SALVAR.

Nosso service worker suporta os push nativos para instalar o app na primeira visita, no primeiro item adicionado ao carrinho ou na primeira compra. Você pode personalizar as notificações no PWA de sua loja usando um service worker próprio que funcionará junto ao nosso.

Para saber como criar um Service Worker próprio, confira a documentação Como instalar um Service Worker.

Para aprender como aproveitar o Service Worker builder para agrupar vários services workers em sua loja, confira a documentação Using several service workers in your store.