Um Progressive Web App (PWA) é um aplicativo da web que permite que você forneça uma experiência semelhante a um aplicativo nativo para que usuários de dispositivos móveis tenham uma experiência rápida, tranquila e engajadora em seu site.
Os PWAs são carregados instantaneamente, respondem rapidamente às interações do usuário e parecem uma aplicativo normal. Eles não precisam de uma loja de aplicativos para serem instalados e permitem que os usuários entrem novamente no site imediatamente, mesmo quando um dispositivo está off-line.
- Os PWAs só podem ser ativados em sites HTTPS.
Para saber mais, consulte Adicionar SSL ou HTTPS. - PWAs são aceitos no Chrome em dispositivos Android. Se o PWA estiver ativado, o navegador perguntará automaticamente ao usuário se ele deseja adicionar o site à tela inicial.
- Você também pode adicionar o PWA a dispositivos com o iOS 11.3. No entanto, como a mensagem automática "adicionar à tela" do navegador ainda não está disponível, usuários terão que adicionar o PWA manualmente. Para saber como fazer isso, acesse o Suporte da Apple.
Para ativar o recurso PWA:
- No painel esquerdo, clique em SEO e configurações e depois em Progressive Web App (PWA).
- Clique no botão Ativar Progressive Web App.
- (Opcional) Clique na opção Servir marcação de páginas do cache primeiro. Essa configuração altera nossa estratégia de cache de service worker (nos sites de runtime); em vez de checar a rede primeiro, ela usa a página no cache (desde que não seja republicada). A opção "Cache primeiro" (ativado) pode ser melhor se você souber que o site e seus ativos não mudarão muito, pois ela carrega rapidamente as informações armazenadas em cache e fica mais facilmente disponível off-line aos clientes. Usar a rede primeiro (com essa opção desativada) é melhor quando os dados precisam ser o mais atualizados possível.
- (Opcional) Clique em Deixar os browsers móveis solicitarem a instalação do site como um app. Quando ativado, você tem as seguintes configurações:
- Nome. É o nome exibido na tela de abertura e em "Adicionar à mensagem da tela inicial". Pode ter até 60 caracteres.
- Nome abreviado. É o nome usado quando não há espaço suficiente para exibir o nome completo; por exemplo, na tela inicial para celular. Esse nome pode ter até 60 caracteres, mas sugerimos que ele seja o mais curto possível.
- Ícone. Este é o ícone que aparece na tela inicial do dispositivo móvel e na tela splash quando o aplicativo está carregando. Deve ter pelo menos 192 pixels de largura e estar no formato .png.
- Cor de fundo da tela de abertura. É a cor que aparece enquanto o site está carregando.
Quando um usuário acessa um site ativado com PWA usando um dispositivo móvel, um botão "Adicionar à tela inicial" é exibido abaixo do site. Uma vez adicionado à tela inicial, o ícone aparecerá no dispositivo para acesso rápido ao site (semelhante a um aplicativo).
O usuário agora pode entrar novamente no site usando esse ícone, mesmo se o dispositivo estiver off-line.
