Pular para o conteúdo

Um PWA passo a passo

Do painel da Vitrine ao ícone na tela inicial do Android.

O caminho inteiro tem quatro passos, e três deles são do Android — não da linguagem.

1. O painel#

dataforge
adopt Arcane.Vitrine as V

action pagina():
    V.titulo("Chão de fábrica")
    colunas := V.colunas(2)
    colunas[0].metrica("Em produção", 12)
    colunas[1].metrica("Parados", 3)
    V.frame([
        {"maquina": "prensa 1", "estado": "ok"},
        {"maquina": "prensa 2", "estado": "parada"},
    ])
    V.atualizar_a_cada(5)

s := V.testar(pagina)
s.rodar()
assert "Chão de fábrica" in s.texto()
out "o painel responde — e é o mesmo no celular"

2. Os arquivos do PWA#

bash
$ dataforge mobile pwa --nome="Chão de fábrica" --em=publico

3. O HTML#

text
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0d1017">
<script>navigator.serviceWorker?.register('/sw.js')</script>

4. O HTTPS#

Sem ele o Android não oferece instalar, e não há aviso: o botão simplesmente não aparece. As três formas que funcionam:

FormaQuando
um proxy com certificado (nginx, Caddy)o painel roda na sua rede, e você controla o servidor
um túnel (Cloudflare, ngrok)para mostrar a alguém hoje
hospedagem estática + APIquando a página é estática e o dado vem por HTTP

O Kiln não tem TLS — ele roda sobre o http.server do Python. Em produção pública, o nginx ou o Caddy vai na frente, e isso está escrito na página dele também.

Conferir que ficou instalável#

  • Abra no Chrome do Android e veja se aparece "Adicionar à tela inicial" com ícone próprio (sem manifesto, ele oferece um atalho comum).
  • Nas Ferramentas do Desenvolvedor: Application → Manifest e Service Workers.
  • Desligue a rede e recarregue: com o service worker, a página abre; sem ele, dá erro de conexão.
  • Instale, abra pelo ícone, e confira que não há barra de endereço — é o display: standalone funcionando.