A aposta: uma tira de 40px ancorada acima da topbar, que fica ali quieta ate a pessoa
resolver o assunto, troca custo visual quase zero por presenca constante - e escapa do reflexo
de "banner de cookie" porque nao chega no minuto zero, nao pede permissao e nao e um muro:
e uma alca que abre no lugar e ensina.
Risco do briefFaixa fina e o formato que todo mundo aprendeu a ignorar
Ninguem ignora tira fina por ser fina. Ignora porque banner de cookie chega antes de qualquer
valor, fala de um assunto que nao e o da pessoa e termina em dois botoes de peso igual. Sao
cinco coisas concretas, e da pra desfazer as cinco.
1Chega depois, nao antes. Cookie banner aparece no segundo zero. Esta faixa so aparece na segunda sessao, em outro dia - quando o app ja serviu pra alguma coisa. A doutrina ja existe no codigo: "uma voz na primeira sessao" (NudgeCatalogo).
2Nao pede permissao, oferece atalho. A copy nao fala de "app", "instalar nosso aplicativo" nem "melhor experiencia". Fala de uma coisa que a pessoa consegue imaginar: um icone na tela do celular, junto do WhatsApp.
3Nao parece uma camada estranha. Fundo --brand-soft, alinhada a esquerda, com o simbolo do proprio app no comeco. Cookie banner e cinza de sistema, texto centralizado e generico. Aqui a tira le como uma linha do app, e ainda pega a cor do tenant.
4E porta, nao parede. Um toque abre o painel ali mesmo, sem modal, sem veu, sem sair da tela. A tira fechada e um punho, nao a mensagem inteira - por isso ela pode ser curta de verdade.
5Dispensar e barato e definitivo. Um X, sem "tem certeza?", sem toast, sem tela de opcoes. Volta uma unica vez, 30 dias depois. Na segunda dispensa, nunca mais. Quem ignora banner e quem aprendeu que fechar nao resolve.
Como fica na tela
Molduras de 390x844, com a topbar e a tabbar reais em volta pra dar a escala verdadeira.
A faixa entra como primeira linha do grid do .shell.v2, no mesmo slot da faixa
da demonstracao: grid-column:1/-1, sticky top:0, z-index:30.
Ela entra na conta de --faixa-h, entao --stick-top se recalcula e
nada da pagina fica escondido embaixo dela.
Android / Chrome - faixa fechada (40px)O beforeinstallprompt disparou. O botao chama o prompt do sistema.
14:32
Deixe o Engrenou na tela inicial
Cantina da Ana+
Boa tarde, Ana
Quarta, 19 de agosto
Pra entregar hoje
7
2 ainda nao sairam da producao
Entrou
R$ 840
Sobrou
R$ 512
MCMaria Clara Bolo de cenoura - 15hR$ 95
JPJoao Pedro 50 salgados - 17hR$ 180
RSRita Souza Torta de limao - 18h30R$ 72
CACarla Dias 30 coxinhas - 19hR$ 108
iPhone / Safari - faixa fechadaMesma tira, outro verbo. No iOS nao existe API de instalacao, entao aqui nao pode ter botao que instala.
14:32
Deixe o Engrenou na tela inicial
Cantina da Ana+
Boa tarde, Ana
Quarta, 19 de agosto
Pra entregar hoje
7
2 ainda nao sairam da producao
Entrou
R$ 840
Sobrou
R$ 512
MCMaria Clara Bolo de cenoura - 15hR$ 95
JPJoao Pedro 50 salgados - 17hR$ 180
app.engrenou.com.br
iPhone / Safari - painel abertoUm toque em "Ver como" e a mesma faixa cresce no lugar. Sem modal, sem veu, sem trocar de tela.
14:32
Deixe o Engrenou na tela inicial
No iPhone quem coloca e voce. Sao 3 toques:
1Toque em
na barra de baixo do Safari
2Desca a lista e escolha Adicionar a Tela de Inicio
3Toque em Adicionar. Pronto, o icone ja esta la.
O botao e este, no rodape do Safari:
Nao baixa nada da loja de apps. E o mesmo Engrenou, com os mesmos dados - so que abre num toque, sem o navegador em volta.
Cantina da Ana+
Boa tarde, Ana
Quarta, 19 de agosto
Pra entregar hoje
7
2 ainda nao sairam da producao
app.engrenou.com.br
Detalhe que decide o iPhone: a faixa esta em cima e o botao de compartilhar do Safari
esta embaixo. Por isso o painel carrega o desenho da barra de rodape com o alvo circulado -
a pessoa reconhece o botao antes de procurar. Se o Safari dela estiver com a barra no topo
(opcao "Aba unica" do iOS), o desenho continua servindo: o icone e o mesmo.
Desktop (781px pra cima)
Faz sentido, mas com menos ambicao. No computador a faixa ocupa as duas colunas do grid
(grid-column:1/-1), com o conteudo centralizado em 1200px pra nao virar aquela
tarja esticada de ponta a ponta. Ela so aparece se o beforeinstallprompt
realmente disparou - ou seja, Chrome e Edge. No Safari e no Firefox de computador nao ha
prompt nem caminho manual decente pra ensinar, entao simplesmente nao aparece nada:
ensinar um caminho ruim seria pior do que ficar quieto.
app.engrenou.com.br
Abra o Engrenou numa janela so dele, sem procurar aba
Cantina da Ana
Boa tarde, Ana
Quarta, 19 de agosto
Pra entregar hoje
7
2 ainda na producao
Entrou
R$ 840
6 pedidos pagos
Sobrou
R$ 512
depois dos ingredientes
A copy
Aqui a copy tem regua de fita metrica, nao de gosto. Com o icone, o botao "Instalar" e o X de
pe, sobram 215px pra frase numa tela de 390px. Medi as candidatas no navegador em vez de
contar caractere no olho, e a primeira versao que eu tinha escrito ("Deixe o Engrenou na tela
do celular") deu 220px e cortava com reticencias. Foi refeita.
Headline A - escolhida - 195px, cabe
Deixe o Engrenou na tela inicial
Nomeia o resultado que da pra imaginar: um icone ali junto do WhatsApp. Nao usa
"instalar" nem "baixar" na frase - pra quem vende bolo, essas palavras significam loja de
aplicativos, memoria cheia e risco de cobranca, e e ai que o dedo vai no X. Comeca com um
verbo de permissao ("deixe"), nao de ordem. E o melhor acidente da medicao:
"tela inicial" e exatamente o nome do item que o iPhone vai mostrar
("Adicionar a Tela de Inicio"). A tira ja treina a palavra que a pessoa vai procurar.
Headline B - alternativa - 252px, nao cabe
Abra o Engrenou sem digitar o endereco
Nomeia o atrito em vez do ganho, e e mais afiada pra quem entra digitando o endereco
todo dia. Tres fraquezas honestas: nao cabe na tira (precisaria encolher pra "Sem digitar o
endereco toda vez", 202px, perdendo o nome do produto); descreve uma chateacao, entao so
liga em quem se reconhece nela; e quem entra por favorito ou por historico nao sente esse
atrito - pra essa metade a frase nao diz nada. Fica como plano B.
Onde
Texto exato
Tira fechada
Deixe o Engrenou na tela inicial- 195px de 215 disponiveis
Tira fechada, ate 360px
Engrenou na tela inicial- 145px. Variante curta por media query; e a frase que cede, nunca os controles, mesma regra que a faixa da demo ja usa
Botao, Android
Instalar- a mesma palavra que a folha do Chrome vai mostrar em seguida, pra nada surpreender
Botao, iPhone
Ver como- sem chevron, de proposito: o icone custava 18px e fazia a frase cortar. Com o painel aberto o botao sai de cena (o painel ja e a resposta) e quem recolhe e o "Fechar" la dentro
Botao, desktop
Instalar (frase: Abra o Engrenou numa janela so dele, sem procurar aba)
X
sem texto. aria-label="Dispensar"
Painel, titulo
No iPhone quem coloca e voce. Sao 3 toques:
Painel, passo 1
Toque em [icone de compartilhar] na barra de baixo do Safari
Painel, passo 2
Desca a lista e escolha Adicionar a Tela de Inicio
Painel, passo 3
Toque em Adicionar. Pronto, o icone ja esta la.
Painel, rodape
Nao baixa nada da loja de apps. E o mesmo Engrenou, com os mesmos dados - so que abre num toque, sem o navegador em volta.
Painel, botao
Fechar- so recolhe a tira. Quem dispensa de vez e o X, e essa diferenca e de proposito: dois botoes de mesmo peso e o vicio do banner de cookie
Como funciona
Tudo decidido com o que ja existe: nenhuma consulta nova ao banco, nenhum evento novo de instrumentacao (isso exigiria migracao na policy de eventos), nenhuma coluna nova.
Quando aparece
Da segunda sessao em diante, em outro dia. Deriva do carimbo eng_visita1_<bakeryId> que o Shell ja grava - zero consulta.
So na casca autenticada (o Shell). Ou seja: em qualquer aba do app.
So se o service worker registrou (VITE_PWA=1, que ja esta ligado).
No Android, com o beforeinstallprompt guardado - o botao chama prompt.prompt() de verdade.
No iPhone, so no Safari. E a tira vira "Ver como", nunca "Instalar".
Ela so monta na carga da pagina, nunca no meio da sessao - assim a pessoa nunca ve o conteudo dar um pulo pra baixo.
Quando nao aparece nunca
Ja instalado.matchMedia('(display-mode: standalone)') ou navigator.standalone. Esse e o teste que dispensa qualquer memoria: instalou, some sozinha pra sempre.
Na primeira sessao. Ali quem fala e o checklist de primeiro uso. Uma voz por vez.
Em /loja/:slug e /m/:slug. Aquela tela e da cliente dela; o consumidor final nao recebe convite pra instalar ferramenta de gestao dos outros. Mesma fronteira que a Function _og.js ja aplica ao <link rel="manifest">.
Em adm.engrenou.com.br. O pwa.js ja exclui esse host.
Enquanto a faixa da demonstracao estiver no ar. Uma tira por vez, sempre. Duas tiras empilhadas viram tarja.
Em navegador de iPhone que nao seja o Safari, e em Safari e Firefox de computador: sem prompt e sem caminho decente pra ensinar, fica quieta.
Quantas vezes
Duas aparicoes no total. Mesma regra do NudgeCatalogo, que ja e a doutrina da casa: dispensou, volta uma unica vez 30 dias depois; dispensou a segunda, nunca mais.
Abrir e fechar o painel nao conta. So o X conta.
Entre as duas aparicoes ela fica ali, presente, ate ser dispensada - e essa a aposta desta proposta.
Instalou em qualquer momento: acaba a contagem, o display-mode resolve.
Ao dispensar
O X grava eng_pwa_faixa_<bakeryId> = {fechado_em, vezes}, dentro de try/catch como todo o resto ("modo privado: so nao lembra").
A tira recolhe a altura em 160ms e some. O ResizeObserver zera --faixa-h, a topbar sobe sozinha e nada salta.
Respeita prefers-reduced-motion: sem animacao, corte seco.
Sem toast, sem "tem certeza", sem tela de preferencias. Dispensar tem que ser mais barato do que ignorar - e o que quebra o habito de ignorar.
Nao ha registro de evento. Se um dia quiser medir sem migracao, da pra reusar o tipo nav com meta:{para:'pwa_faixa'}, como o Tutorial ja faz.
Duas coisas pra decidir antes de construir.
(1) O icone da tira e o do Engrenou, nao o do tenant. Parece contradizer o whitelabel, mas o
manifesto e estatico: o icone que vai pousar na tela inicial e o do Engrenou pra todo mundo. Mostrar
a logo da confeitaria na tira e depois entregar outro icone seria mentir. O fundo, o botao e o texto
seguem var(--brand) normalmente - so o simbolo e fixo.
(2) A tira soma 40px de altura permanente no celular (4,7% de uma tela de 844px) enquanto nao
for dispensada. E o preco da presenca constante, e e o que separa esta proposta de um convite pontual.
Mockup estatico, sem JS. Tokens copiados de app/src/styles/tokens.css e
app/src/styles.css; medidas da casca conferidas em app/src/styles/shell-v2.css.
Simbolo inline igual ao app/public/favicon.svg, sem redesenho.