A aposta: o convite pra colocar o Engrenou na tela do celular só é feito no segundo em que a pessoa acabou de ganhar alguma coisa com ele (o pedido saiu, o dia fechou no azul), e a folha que sobe é primeiro uma comemoração daquele ganho e só depois, em letra menor, o pedido.
Proposta de design · 19/ago/2026 · PWA já está em produção, falta só o convite
A folha, no celular
A regra que resolve o risco do briefing está no desenho, não na copy: a folha não abre com o pedido, abre com o ganho. O que ocupa o topo é o número que a pessoa acabou de fazer. O convite é um cartão cinza embaixo, do tamanho de um rodapé. Quem fechar sem ler leva a comemoração inteira e não perde nada.
a · Android / Chrome · tem botão de verdade
9:41
Doces da Bia
Pedidos
Terça, 19 de agosto
HojeSemanaTodos
Dona Márcia2 tortas de limão
R$ 48,00
Entregue
Seu Antônio10 coxinhas de frango
R$ 35,00
Na produção
Paula do salão1 bolo de cenoura
R$ 62,00
Anotado
Primeiro pedido entregue
R$ 48,00 fechados. Está tudo anotado: o pedido, a produção e o recebimento.
Deixa o Engrenou na tela do seu celular
Assim ele abre com um toque, igual ao WhatsApp. Não precisa baixar nada da loja de aplicativos.
Gatilho 1: o primeiro pedido entregue
A folha sobe depois que a tela já mudou e o pedido já está com o selo verde, com uns 900 ms de intervalo. A pessoa vê o resultado primeiro, a folha chega em cima do resultado. No Android o botão é de verdade: guarda-se o evento beforeinstallprompt e o toque chama prompt.prompt().
b · iPhone / Safari · ensina, não instala
9:41
Doces da Bia
Dinheiro
Terça, 19 de agosto
ENTROUR$ 380
SAIUR$ 166
SOBROUR$ 214
Dona MárciaPix, 14:20
R$ 48,00
Farinha e ovosMercado, 08:05
- R$ 96,00
Dia fechado. Sobrou R$ 214,00
Entrou R$ 380,00 e saiu R$ 166,00. A conta de hoje está fechada.
Deixa o Engrenou na tela do seu iPhone
No iPhone quem coloca é você, em dois toques. Leva uns 10 segundos:
1Toque em
Compartilhar, na barra do Safari
2Desça um pouco e escolha
Adicionar à Tela de Início
O botão de compartilhar está aqui embaixo
Gatilho 2: o dia fechado no azul
No iPhone não existe API de instalação, então não existe botão que instale. A folha vira uma aula de dois passos, com o desenho do ícone de compartilhar igual ao que está na barra do Safari logo abaixo dela, e a barra fica visível de propósito: a folha ensina apontando pra um botão que a pessoa está vendo. O "Já adicionei" é palavra da pessoa, não confirmação de instalação, e a gente trata como palavra.
A copy
Duas peças de texto por folha: a comemoração (muda conforme o gatilho, sempre com o número real da pessoa) e o convite (sempre o mesmo). O convite é o que precisa de headline.
Headline do convite · duas alternativas
Escolhida
A
Deixa o Engrenou na tela do seu celular Assim ele abre com um toque, igual ao WhatsApp. Não precisa baixar nada da loja de aplicativos.
Por que essa. Diz a ação e diz o objeto na mesma linha, sem a pessoa ter que decifrar. "Igual ao WhatsApp" é a única comparação que essa cliente faz sozinha, e resolve a dúvida real ("isso vai ocupar meu celular?") sem prometer que ocupa zero, o que seria mentira: um PWA guarda alguns megabytes.
Alternativa
B
Da próxima vez, um toque só Dá pra deixar o Engrenou na tela de início do celular. Abre direto, sem digitar endereço nenhum.
Por que não essa. É a melhor frase das duas, e é justamente o problema: liga o benefício ao futuro em vez de ligar ao ganho que acabou de acontecer, e obriga a pessoa a ler a segunda linha pra entender do que se trata. Numa folha que ela pode fechar em meio segundo, o título tem que ser o assunto.
A comemoração · uma por gatilho
Gatilho 1 · primeiro pedido entregue
Primeiro pedido entregue
R$ 48,00 fechados. Está tudo anotado: o pedido, a produção e o recebimento.
Gatilho 2 · dia fechado com sobra
Dia fechado. Sobrou R$ 214,00
Entrou R$ 380,00 e saiu R$ 166,00. A conta de hoje está fechada.
Gatilho 3 · primeiro pedido criado (só fora da primeira sessão)
Seu primeiro pedido está anotado
Ele já aparece na produção e na conta do mês, sem você digitar de novo.
Botões
Android: "Colocar na tela" e "Agora não". Nada de "Instalar app": ninguém instala nada, ela põe um atalho.
iPhone: "Já adicionei" e "Agora não". Não existe botão de instalar porque não existe instalação por código.
As duas telas fecham igual: "Agora não" é botão de 48px, do mesmo tamanho do outro, não um link escondido. Dispensar tem que ser tão fácil quanto aceitar, senão vira pedágio.
O que não aparece em lugar nenhum: "instale nosso app", "aproveite", "não perca", contagem regressiva, "só hoje", emoji de festa. A comemoração é o número da pessoa. Se o número não impressiona, o texto não vai salvar.
Desktop: essa folha não existe
Acima de 780px a proposta se desliga, de propósito. Três motivos: (1) no computador a folha do app vira modal centrado (é o que o .np-ov já faz em min-width:781px), e um modal que aparece sozinho logo depois de uma ação é exatamente a cobrança que essa proposta jura não ser; (2) quem está no computador já tem a aba aberta, então o ganho de "abrir com um toque" quase não existe; (3) a pessoa que vende comida trabalha no celular, e é lá que o atalho muda o dia dela.
No computador o convite vira o que o app já sabe fazer com convite frio: uma linha no aviso do dia, padrão que já existe no Hoje (.hjv2-alerta.teal), com X, teto de 2 avisos visíveis e volta no dia seguinte. Zero UI nova.
Doces da Biabia@docesdabia.com.br
Boa tarde, Bia
Abra o Engrenou sem passar pelo navegador
Dá pra deixar ele como programa aqui no computador, junto com os outros.
Aparece só em navegador que aceita instalação (Chrome, Edge). No Safari do Mac não aparece: lá o caminho é o menu Arquivo, e a gente não usa aviso pra ensinar menu de navegador.
Como funciona
Quando aparece
Só no celular (max-width:780px) e só se ainda não estiver instalado.
Sempre depois da ação terminar, uns 900 ms depois da tela já ter mudado. Nunca no meio, nunca por cima de outra folha aberta.
Gatilho 1 (o melhor): primeiro pedido marcado como entregue. É o ciclo inteiro fechando, e quase nunca cai na primeira sessão.
Gatilho 2: dia fechado no Dinheiro com sobra positiva.
Gatilho 3: primeiro pedido criado, só se já passaram 12h do eng_visita1_<id>. Na primeira sessão quem fala é o checklist, e essa regra da casa fica de pé.
Prioridade 1 > 2 > 3, um por vez. Nunca dois na mesma sessão.
Quando NÃO aparece, nunca
Já instalado: matchMedia('(display-mode: standalone)') ou navigator.standalone.
Nas rotas /loja/:slug e /m/:slug. Ali quem olha é o cliente da vendedora, não ela. É a mesma fronteira que a Function _og.js já usa pra arrancar o <link rel="manifest"> dessas telas.
Em adm.engrenou.com.br (o service worker já é excluído lá).
Com a demo ligada ou na demo pública: comemorar número inventado é mentira.
Se a pessoa tocou "Desfazer" no toast. Não foi ganho.
No iPhone fora do Safari. Em outro navegador o caminho muda e a gente não vai ensinar errado.
Com prefers-reduced-motion a folha aparece sem subir e sem faísca, mas aparece.
Quantas vezes
Duas na vida, no máximo.
1ª no momento bom. Dispensou, some.
2ª só 30 dias depois, no próximo momento bom. Dispensou de novo, nunca mais.
Tocou em "Colocar na tela" ou "Já adicionei": nunca mais, dê no que der. Quem tentou não merece ser perguntado de novo.
Chave eng_pwa_convite_<bakeryId> com {fechado_em, vezes, aceito}, o mesmo formato do eng_nudge_catalogo_<id>, tudo em try/catch (modo privado: só não lembra).
O que acontece ao dispensar
Fecha e acabou. Sem "tem certeza", sem segunda tela, sem toast de despedida.
Fecha por: "Agora não", X, toque fora, arrastar pra baixo, Esc.
A comemoração não some junto: o toast de sucesso segue a vida dele lá em cima (no celular o toast fica no topo, styles.css:443), então quem fecha rápido continua vendo que deu certo.
Não vira aviso no Hoje no dia seguinte. Ela já respondeu.
Medição, dentro do que existe hoje
Tipo de evento novo exigiria mexer na policy eventos_insert (whitelist recriada inteira a cada migração). Então não se cria tipo novo: usa nav com meta, do mesmo jeito que o Tutorial já faz - {para:'pwa_convite_abriu'}, {para:'pwa_convite_aceitou'}, {para:'pwa_convite_dispensou'}.
No Android dá pra saber se aceitou de verdade, pelo userChoice. No iPhone não dá pra saber nada: "Já adicionei" é declaração, e a gente registra como declaração, não como instalação. Qualquer número de instalação em iOS que aparecer num relatório nosso vai estar errado, e é melhor combinar isso agora.
Whitelabel e miudezas
Nada de teal cravado: a folha lê var(--brand), que o AppContext escreve no documentElement por tenant. Os três cartões abaixo são o mesmo HTML com --brand trocado.
Deixa o Engrenou na tela do seu celular
Colocar na tela
Padrão · teal #0FB5A6
Deixa o Engrenou na tela do seu celular
Colocar na tela
Tenant confeitaria · #B4456F
Deixa o Engrenou na tela do seu celular
Colocar na tela
Tenant marmitaria · #3D6FD6
Régua de card, conferida
Menor fonte da folha: 11px (só o rótulo ENTROU/SAIU/SOBROU do fundo). Dentro da folha o menor é 12,5px. Piso respeitado.
Alvos: botões 48px, X 44×44, passos do iPhone 52px de linha. Piso de 44px respeitado.
Raios: folha 26px em cima (canon do .np-sheet), cartões 16px, botões 12px.
Véu mais claro que o do modal de propósito: rgba(12,29,27,.28) contra .45 do .np-ov. A tela de trás continua legível, porque a folha é notícia boa, não bloqueio.
A fraqueza honesta desta proposta. Ela cobra caro do gatilho pra pagar barato na irritação: no Android o convite só chega uma vez, e chega num instante em que a pessoa pode estar de mão suja de massa, com o cliente na porta, e vai fechar sem ler. A folha é a peça mais interruptiva de todas as opções possíveis, e o único freio contra isso é o limite de duas aparições na vida - ou seja, se a primeira cair na hora errada, gastamos metade do orçamento inteiro de convite num momento em que ninguém estava olhando. Um convite persistente e discreto (uma linha fixa no Meu negócio) converteria menos por exibição, mas não teria como queimar a chance.
mockups/pwa-banner-ago19/proposta-sheet-momento.html · página estática, sem CDN e sem JS. Tokens copiados de app/src/styles/tokens.css e app/src/styles.css.