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.
Observacāo:
-
Os PWAs só podem ser habilitados em sites HTTPS. Para obter mais informações, consulte SSLs (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 & Settings e, em seguida, clique em Progressive Web App (PWA).
-
Clique no botão Ativar Progressive Web App.
-
(Opcional) Clique primeiro na opção Servir páginas a partir do cache. Essa configuração muda nossa estratégia de armazenamento em cache do service worker (para sites em tempo de execução); em vez de fazer o check-in na rede primeiro, ele obterá a página primeiro do cache (desde que não seja republicada). O cache em primeiro lugar (ativar) pode ser melhor se você souber que o site e seus ativos não mudarão muito, pois ele carregará rapidamente as informações em cache e estará mais facilmente disponível para os clientes off-line. Usar a rede primeiro (desativando essa opção) é melhor quando os dados devem estar o mais atualizados possível.
-
(Opcional) Clique em Ativar navegadores móveis para solicitar a instalação do site como um aplicativo. Quando isso está ativado, você pode definir as seguintes configurações:
-
Nome. Esse é o nome exibido na tela inicial e na mensagem “Adicionar à tela inicial”. Ele pode ter até 60 caracteres.
-
Nome curto. Esse é o nome usado quando não há espaço suficiente para exibir o nome completo; por exemplo, na tela inicial do celular. Esse nome pode ter até 60 caracteres, mas sugerimos que você o faça o mais curto possível.
-
Ícone. Esse é o ícone que aparece na tela inicial do celular e na tela inicial quando o aplicativo está sendo carregado. Deve ter pelo menos 192 pixels de largura e estar em .png formato.
-
Cor de fundo da tela inicial. Essa é a cor que aparece durante o carregamento do site.
-
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.