A resposta curta: uma PWA é um site normal a que se acrescentam duas coisas: um pequeno ficheiro que o descreve (o manifesto) e, se quiser que funcione sem rede, um programa de fundo (o service worker). Com isso, o navegador oferece «instalar», e o site abre com um ícone no ecrã, sem a barra do endereço. Precisa de https. Não é uma app das lojas: é o mesmo site.
O mínimo para o navegador oferecer «instalar»
| 1 |
O site tem de estar em https. Se ainda não está, veja HTTP ou HTTPS.
|
|
| 2 |
Crie o manifesto, um ficheiro manifest.webmanifest na pasta principal do site, com este conteúdo (troque os nomes e os ícones):
{
"name": "O nome completo do seu site",
"short_name": "O seu site",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#d60037",
"icons": [
{ "src": "/icone-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icone-512.png", "sizes": "512x512", "type": "image/png" }
]
}
|
|
| 3 |
Faça os dois ícones, quadrados, de 192 e de 512 píxeis, em PNG, e ponha-os nos caminhos que escreveu.
|
|
| 4 |
Ligue o manifesto à página, dentro da etiqueta <head>: <link rel="manifest" href="/manifest.webmanifest">. Num WordPress, um plugin de PWA faz isto por si: confirme o resultado em vez de confiar.
|
|
| 5 |
Confira no Chrome: F12, separador Application, secção Manifest. Os erros aparecem ali, com a causa.
|
|
E o funcionamento sem rede
O manifesto só dá o ícone e a janela sem barra. Para a página abrir quando não há ligação é preciso um service worker: um ficheiro JavaScript registado com navigator.serviceWorker.register('/sw.js') que decide o que guardar e quando. É a parte difícil, porque é código seu e porque guarda ficheiros no aparelho do visitante.
| O que quer |
O que precisa |
| Só o ícone no ecrã e a janela limpa |
O manifesto e os ícones. Nada mais. |
| Abrir sem ligação |
Um service worker, com cuidado: o que guarda tem de se atualizar. |
| Estar nas lojas de apps |
Outra coisa: uma PWA não aparece lá por si só. |
|
Um service worker mal escrito faz o visitante ver sempre a versão antiga do site, mesmo depois de a mudar. É o mesmo problema de Visitantes que ainda veem o CSS ou o logótipo antigo, mas pior, porque a cache está no aparelho dele e não a consegue limpar o seu servidor. Comece sem service worker e só o acrescente se precisar mesmo do modo sem rede.
|
|
No iPhone a instalação faz-se pelo botão de partilha, com «Adicionar ao ecrã principal», e não por um aviso do navegador. O site funciona na mesma. Para sites pesados, comece por tornar o site mais leve: uma PWA lenta continua lenta.
|
|
Quer saber se o seu site está pronto para ser instalado? Abra um pedido com o endereço e o que o Chrome mostrou.
Abrir pedido de suporte
|
PRODUTO RECOMENDADO Alojamento de sites com cPanel Domínio e SSL incluídos, cópias diárias e o painel que já conhece. desde 321,75 MT/mês (plano de 3 anos, com cupão) Ver planos |
Português
English
