Duas peças: um caminho que fica e um convite que passa
A permanente é uma linha no rodapé pessoal de "Meu negócio", ao lado de "Minha conta", "Ocultar valores", "Tutorial" e "Sair".
Colocar o app na tela é assunto do aparelho da pessoa, não do negócio dela - por isso não entra nos blocos gateados por papel,
e por isso o computador não precisa de nada: aquele bloco já é display:none acima de 780px.
A efêmera é um convite só, no primeiro quadro do Hoje, no dia calmo. Ele não entra na fila de avisos: fica no mesmo slot onde o app já põe convite (o do checklist de primeiro uso), logo depois da saudação. Assim ele nunca empurra "pedido atrasado" pra baixo e nunca some atrás do "ver mais avisos".
Bom dia, Ana
terça, 19 de agosto · 3 entregas hoje
avisosAtivos.slice(0, 2) (Hoje.jsx:523).
Nos três tenants reais que hoje têm 5 pedidos ou mais, os dois slots vivem ocupados (todos têm estoque_mov = 0, o que liga um aviso permanente),
então o convite lá dentro apareceria zero vez. Aqui ele usa o mesmo desenho de aviso teal, mas mora no slot dos convites,
logo antes do .hj3-top - o mesmo lugar onde já vivem o checklist e o plano dos 14 dias.
.neg3-sessao já é display:none acima de 780px (negocio-v3.css:81).
Não entra em lib/negocioItens.js, que é a fonte única gateada por papel e lida também pela barra lateral do computador.
Deixe o Engrenou na tela do celular
Vira um ícone junto com os outros. Você abre com um toque, sem digitar endereço nem procurar a aba certa.
É o mesmo Engrenou que você já usa, só com atalho na tela. Precisa de internet do mesmo jeito, porque seus pedidos ficam salvos na nuvem, não no aparelho.
beforeinstallprompt quando ele dispara
e chama prompt() aqui. Se o evento nunca veio (navegador sem suporte, ou app já instalado), o botão não é desenhado:
a folha cai no passo a passo do menu do Chrome. Botão que não faz nada é pior do que nenhum botão.
Deixe o Engrenou na tela do celular
No iPhone quem faz isso é o Safari, em três toques. O Engrenou não consegue fazer por você.
- 1 Toque em Compartilhar, na barra do Safari.
- 2 Role a lista e toque em Adicionar à Tela de Início.
- 3 Toque em Adicionar, no canto de cima. O ícone do Engrenou aparece na sua tela.
O aviso âmbar é a correção mais importante do lote. No iPhone, o app na tela de início roda num armazenamento separado do Safari, e a sessão do Supabase mora no
localStorage (createClient sem opções, src/lib/supabase.js:7).
Ou seja: o ícone novo abre deslogado. Sem essa linha, a pessoa segue nossas três instruções e cai numa porta fechada.
E é por isso que quem ainda tem senha_pendente (Hoje.jsx:128) não recebe o convite: ela não teria o que digitar.
Três motivos, nessa ordem. (1) O prêmio é um ícone na tela do celular, e no computador esse prêmio não existe.
(2) O Chrome e o Edge já oferecem a instalação sozinhos, com o ícone na barra de endereço: repetir a oferta ao lado
seria o app disputando com o navegador. (3) Custa zero linha de código, porque .neg3-sessao já desaparece acima de 780px.
Quem cadastrou no computador e usa no celular encontra o item quando abrir o app no telefone. É o mesmo lugar, no aparelho certo.
Quando aparece, quando não, quantas vezes
Duas peças, dois comportamentos. O item do hub é caminho: sempre lá, infinitas vezes, sem piscar. O convite é interrupção: uma vez na vida da conta, e o silêncio dela conta como não.
| Quando o convite aparece | Por quê, e o que garante isso |
|---|---|
| No 3º dia distinto de uso | Troca "7 dias e 5 pedidos" por engajamento em vez de tamanho. O gate antigo eliminava 70% da base de saída: dos 20 tenants não-demo, 14 têm zero pedidos, e a Edna, a única mensalidade paga, tem 1 pedido - nunca passaria. |
| Só no celular | Abaixo de 780px, a mesma faixa do shell. O prêmio é um ícone na tela do telefone. |
| Num dia calmo | temAmber === false, que o Hoje já calcula (Hoje.jsx:525). Âmbar é urgência, teal é convite. Pedido atrasado vale mais que instalar app. |
| Em slot próprio | Renderizado no lugar dos convites (antes do .hj3-top), não dentro do array avisos. Nunca empurra um aviso de operação pra baixo e nunca é cortado pelo slice(0, 2). |
| Um convite por vez | Não nasce junto do checklist de primeiro uso nem do plano dos 14 dias, que ocupam o mesmo slot. Um por tela, sempre. |
| Quando NÃO aparece, nunca | Como se detecta |
|---|---|
| Já está instalado | matchMedia('(display-mode: standalone)') ou navigator.standalone. Some o convite e some o item do hub. No Android o beforeinstallprompt também não dispara mais, o que fecha o caso lá. |
| Já disse que está na tela | O botão "Já está na minha tela" na folha do iPhone. É a única forma de o Safari saber o que não tem API pra descobrir: fora do app instalado, navigator.standalone é falso mesmo com o Engrenou já na tela de início. |
| Já dispensou | O X do convite grava e acabou. Aqui o não é não: nada de "volta em 30 dias" como o aviso do catálogo. |
| Primeira sessão | Doutrina da casa: uma voz na primeira sessão, e essa voz é o checklist de primeiro uso. |
| Ainda não criou senha | user_metadata.senha_pendente, que o Hoje já lê na linha 128. Desde 18/ago a conta nasce sem senha. Mandar instalar quem não tem senha é mandar pra uma porta trancada. |
| Dentro do Instagram ou do Facebook | O navegador embutido não tem beforeinstallprompt nem "Adicionar à Tela de Início". Ali a folha só diz "abra no Safari" e não gasta a chance. |
| Nas telas da loja da cliente | /loja/:slug e /m/:slug. A mesma fronteira que a Function _og.js já usa pra arrancar o manifesto dali: quem compra um bolo não instala a ferramenta de gestão de outra pessoa. Custa zero: essas rotas nem passam pelo Shell. |
| No adm e na demo | Backoffice não se instala (o pwa.js já exclui o host), e conta de demonstração não é negócio de ninguém. |
| No computador | Acima de 780px não existe nem item nem convite. |
| Quantas vezes, e o que o dispensar guarda | Detalhe |
|---|---|
| O item do hub: infinitas | É caminho, não aviso. Não pisca, não tem selo de "novo", não tem bolinha. Dispensar o convite nunca tira o item: se ela mudar de ideia em novembro, o caminho está no mesmo lugar de sempre. |
| O convite: uma vez | Uma, na vida da conta. As três propostas anteriores se contradiziam entre 1, 2 e 3 aparições no mesmo documento; aqui está cravado em 1, que é a tese que a peça defende. |
| Conta na exibição, não no clique | Grava assim que renderiza. Sem isso, quem larga o celular no balcão e volta pra massa nunca fecha nada, o contador fica em zero e o convite volta pra sempre. O desenho não pode punir quem está ocupada. |
| Guarda no banco, não no celular | Coluna aditiva bakery_settings.pwa_convite jsonb com {vezes, fechado_em, ja_instalei}. O AppContext já faz select('*') nessa tabela (AppContext.jsx:70), então ela chega sozinha no contexto. |
| Por que não localStorage | O ITP do Safari apaga storage depois de 7 dias sem visita: o "não" sumiria e o relógio reiniciaria justamente pra quem usa de forma esparsa, que é quem menos instalou e mais se irrita. Some a isso celular novo, aba anônima e dois tenants no mesmo aparelho contando dobrado. |
| Abrir a folha gasta o convite | Tocou, viu como se faz, acabou. Menos no navegador embutido do Instagram, onde a folha só ensina a sair de lá. |
| O que dá pra medir, sem mentir | Como |
|---|---|
| Sem migração na policy | Tipo de evento novo exigiria mexer na whitelist de eventos_insert (49 tipos vivos, recriada inteira a cada migração). Então reusa nav com meta:{para:'pwa_convite'}, do jeito que o Tutorial já faz. |
| O sinal honesto | Quantas sessões abrem em display-mode: standalone. É a única métrica de instalação que existe pros dois sistemas, custa zero migração, e responde a pergunta de verdade: quanta gente está usando pelo ícone. |
| O que NÃO dá pra medir | Instalação no iPhone. Não existe appinstalled, não existe getInstalledRelatedApps, não existe nada. "Já está na minha tela" é palavra da pessoa e a gente registra como palavra. Qualquer "taxa de instalação" que apareça num relatório nosso vai estar errada, e é melhor combinar isso agora. |
Um verbo só, do começo ao fim
A proposta vencedora usava cinco nomes pra mesma ação: "Pôr o Engrenou no celular", "Deixe o Engrenou na tela do celular", "Dá pra deixar...", "Pôr na tela inicial" e "Adicionar à Tela de Início". A pessoa tinha que remontar sozinha que era tudo uma coisa só. A Apple e o Nubank batizam uma ação uma vez e repetem o mesmo nome até o fim. Aqui o verbo é deixar na tela do celular, em todo lugar.
Deixar o Engrenou na tela do celular
abre com um toque, sem procurar
Saiu "Pôr", que é livresco pra quem diz "botar" ou "colocar". Saiu "navegador" do subtítulo: é jargão que o resto da peça evita de propósito, e essa é a string que fica pra sempre no app.
Dá pra deixar o Engrenou na tela do celular
Abre com um toque, sem procurar.
Subtítulo de uma linha só. Saiu "Fica junto com o WhatsApp" (mesma razão que fez a headline alternativa perder) e saiu "Toque aqui pra ver como", que o chevron já diz. O convite era o bloco mais alto do Hoje; a tese era discrição.
Deixe o Engrenou na tela do celular
Android: "Vira um ícone junto com os outros. Você abre com um toque, sem digitar endereço nem procurar a aba certa."
Botão: Deixar na tela
iPhone: "No iPhone quem faz isso é o Safari, em três toques. O Engrenou não consegue fazer por você."
Botões: Entendi e Já está na minha tela
Os passos continuam citando "Adicionar à Tela de Início" com crase e acento, porque esse é o rótulo que a Apple mostra e tem que casar com o que ela vai procurar na lista.
As duas frases honestas
- "É o mesmo Engrenou que você já usa, só com atalho na tela." Substitui "Não é da Play Store: é o mesmo Engrenou". A versão antiga plantava o medo de vírus em quem não o tinha - abrir com a negativa faz o leitor pensar na loja de apps justamente quando ele não estava pensando nela.
- "Precisa de internet do mesmo jeito, porque seus pedidos ficam salvos na nuvem, não no aparelho." Fica, e não é enfeite: o
sw.jsé burro de propósito e só guarda a página de sem internet. Prometer offline seria vender o que o produto não tem. - "Na primeira vez, o ícone vai pedir seu e-mail e sua senha de novo. É o iPhone que separa as coisas. Depois disso ele abre direto." A frase nova, e a mais cara de todas: sem ela a peça mente por omissão exatamente pra quem obedeceu.
O que foi descartado, e por quê
Instalar o Engrenou
Perdeu porque "instalar", pra esse público, significa loja de aplicativos, memória cheia, cadastro e risco de cobrança. A pessoa não instala nada: ela deixa um atalho.
O Engrenou pode ficar do lado do WhatsApp
Perdeu porque cita uma marca de terceiro dentro do nosso app, e quem vende por Instagram ou por telefone pode não se ver ali. A mesma régua derrubou o "Fica junto com o WhatsApp" que tinha sobrado no subtítulo do convite.
Pôr o Engrenou no celular
Perdeu no verbo. "Pôr" ninguém fala; e era justamente a string permanente, a que mais gente ia ler.
Um toque e o Engrenou abre
Perdeu por esconder que no iPhone ela vai ter que fazer alguma coisa. Vende o ganho e some com o trabalho - e no iPhone o trabalho é o assunto inteiro.
Da próxima vez, um toque só
Perdeu por ligar o benefício ao futuro em vez do agora, e por obrigar a leitura da segunda linha pra entender do que se trata. Numa peça que se fecha em meio segundo, o título tem que ser o assunto.
Funciona sem internet
O service worker de produção guarda só a tela de "faltou internet". O app é Supabase do começo ao fim. Seria a mentira mais fácil e mais cara da peça.
O ranking, e o defeito que derrubou cada uma
Quatro lentes independentes deram nota de 0 a 10 pra cada proposta: conversão, não incomodar, marca e voz, e viabilidade no iOS. As quatro chegaram perto - a diferença entre a primeira e a última é de 0,75 ponto. Nenhuma estava pronta pra ir ao ar como foi escrita.
- Venceu por
- A folha do iPhone, elogiada pelas quatro lentes: nenhum botão que finge instalar, o ícone de Compartilhar desenhado duas vezes, e a leitura certa de arquitetura (instalar é assunto do aparelho, não do negócio, então mora no rodapé pessoal e resolve o computador de graça).
- O que foi consertado
- O convite saiu da fila de avisos, que lhe dava alcance zero. O gate deixou de ser volume (7 dias e 5 pedidos) e virou retorno. A memória foi pro banco. A folha do iPhone ganhou a linha do login. E o vocabulário foi unificado num verbo só.
- O defeito que derrubou
- O gatilho principal do iPhone não existe no produto. Ela comemora "Dia fechado. Sobrou R$ 214,00", mas o Engrenou não tem fechamento de dia: o Dinheiro é mensal do começo ao fim, o rótulo real é "Sobrou no mês". A folha afirmaria que o dia acabou às 16h de uma terça em que ainda faltam duas entregas. Num app de dinheiro, esse é o pior tipo de mentira: pequena, verificável e sobre o número dela.
- O segundo problema
- O gatilho que sobra ("primeiro pedido entregue") acontece na porta, com o cliente esperando e a mão ocupada. É a peça mais interruptiva das quatro, e gastaria a primeira ficha no pior segundo do dia.
- O que foi aproveitado
- A lista do "quando NÃO aparece" - a mais madura do lote, e está quase inteira nas regras acima. E a régua de honestidade sobre medição no iOS.
- O defeito que derrubou
- O lugar. O mockup desenha o cartão logo abaixo da caderneta do dinheiro, mas a especificação manda pro fim do
.hj3-rail, e abaixo de 941px o rail empilha depois da tela inteira: avisos, entregas de hoje, falta receber, produção, dinheiro, a semana. Dois a três arrastões de distância. A imagem defendia um caso que o texto não entregava. - O segundo problema
- Renderizado, o cartão ficava maior que a caderneta Entrou/Saiu/Sobrou - um convite de instalação vencendo o dinheiro na primeira dobra, num produto cuja promessa inteira é o dinheiro na primeira dobra.
- O que foi aproveitado
- O melhor achado do lote e a espinha da recomendação: o slot certo é o dos convites, no primeiro quadro, onde já vivem o checklist e o plano dos 14 dias. Mais a trava
!temAmbere a recusa de usar o X do Hoje, que significa "volta amanhã".
- O defeito que derrubou
- Cobra 43px da área de trabalho em toda sessão, pra sempre, e o silêncio nunca conta como não: a contagem só começa depois do primeiro X. Protege quem clica e pune quem ignora, que é a maioria. Numa ferramenta de trabalho isso é pedágio, não convite.
- O segundo problema
- A copy de produto saiu sem um acento sequer, e só nessa proposta - as outras três têm entre 285 e 326 caracteres acentuados. Renderizado a 12,5px, lê como SMS de golpe, que é exatamente a leitura que mata um convite de instalação. E o painel escrevia errado o item que a Apple mostra, no lugar cujo trabalho inteiro é treinar essa palavra.
- O que foi aproveitado
- Uma lição, não uma estrutura: o alvo de aceitar nunca pode ser menor que o alvo de dispensar. Lá o X tinha 44px e o botão de instalar tinha 28px.
Nada de CSS novo. O JS é que dá trabalho
A folha reusa .np-ov e .np-sheet do Novo pedido, que já estão carregados em qualquer rota autenticada
(o Shell importa o NovoPedido de forma eager, não lazy). O convite reusa o desenho do aviso teal. A linha do hub herda .neg3-sessao.
O que não existe hoje é toda a detecção: grep por beforeinstallprompt, display-mode e standalone
no src/ volta vazio fora do pwa.js.
| O que | O que é, e a armadilha | Tempo |
|---|---|---|
| Medir antes | No iPhone do Michel: abrir app.engrenou.com.br no Safari, adicionar à tela de início, tocar no ícone e ver se cai no login. Isso decide se o passo 4 da folha existe. Não dá pra provar por CDP: o motor é WebKit, e o headless prova Blink. | 15 min |
src/pwa.js |
Capturar o beforeinstallprompt em escopo de módulo, mais appinstalled e um assinante. Tem que ser no módulo, não num useEffect: o Chrome dispara logo depois do load e um listener que monta junto com a tela autenticada perde o evento. Aí o botão do Android some sem erro nenhum, igual à armadilha do VITE_QUIZ. Umas 40 linhas. |
1 h |
src/lib/instalar.js |
Novo. ehStandalone(), ehIOS() (por navigator.standalone falsy mais maxTouchPoints > 1, senão o iPad escapa: ele se anuncia como Macintosh desde o iPadOS 13) e ehWebview() pro Instagram e Facebook. Umas 40 linhas. |
1 h |
FolhaInstalar.jsx |
Novo, o arquivo mais caro. Quatro variantes de conteúdo, não duas: Android com prompt, Android sem prompt, iPhone no Safari, iPhone dentro de webview. Copy e SVGs inclusos. Umas 180 linhas. | 3 h |
ConviteInstalar.jsx |
Novo. O cartão do Hoje, com os gates e a gravação da aparição no mount. Umas 50 linhas. | 1 h |
| Migração aditiva | alter table bakery_settings add column pwa_convite jsonb. Não toca em FK, não toca em constraint, não toca na policy de eventos: nenhuma das duas armadilhas conhecidas do projeto se aplica. Chega sozinha no AppContext. |
30 min |
| Fiação | Hoje.jsx (render no slot dos convites e os gates), NegocioHub.jsx (uma linha no rodapé pessoal, com guarda de standalone), Shell.jsx (monta a folha e ouve um evento engrenou:instalar, mesmo padrão do engrenou:tour que o hub já usa). Umas 25 linhas no total, mas é onde mora o risco. |
1,5 h |
| CSS | Nenhum arquivo novo. Uma classe em hoje-v3.css pro convite e nada no hub. Umas 25 linhas. |
30 min |
| QA em aparelho real | Um iPhone e um Android de verdade. No Android é preciso desinstalar entre as rodadas, senão o beforeinstallprompt não dispara e o teste dá falso negativo. No iPhone não existe atalho: WebKit não se prova por CDP. |
2 h |
| Deploy e verificação | Build da main HEAD, rm -rf dist, aceite dentro do artefato empacotado, grep do marcador no chunk servido. A receita de sempre. |
1 h |
| Total honesto | 11 a 12 h | |
Cinco coisas que parecem melhorias e não são
Não construir a folha no momento de alegria
Foi a segunda colocada e a copy dela é ótima, mas o gatilho que sustenta a metade iPhone não existe no produto, e o gatilho que sobra interrompe na porta com o cliente esperando. Se um dia o app ganhar um fechamento de dia de verdade, esta proposta volta pra mesa. Hoje ela custaria dois a três dias pra comprar um momento que o produto não tem.
Não consertar agora o login do iPhone trocando o storage do Supabase
Dá pra fazer o app instalado herdar a sessão do Safari com um storage adapter por cookie. É uma mudança na autenticação do app inteiro, com risco em cada tela, pra resolver um caso que uma linha de copy cobre. Se a instalação virar volume de verdade, aí sim vale abrir a discussão - com medição na mão, não por antecipação.
Não criar tipo de evento novo pra medir instalação
Exigiria migração na whitelist da policy de eventos (49 tipos vivos, recriada inteira toda vez, e copiar a lista de
um arquivo antigo apaga em silêncio tudo que entrou depois). E o número resultante seria só-Android, porque no iPhone não existe sinal nenhum.
Um relatório com "taxa de instalação" enganaria a leitura mais do que informaria. O sinal honesto é a sessão em standalone, que custa zero.
Não convidar no computador, e não mexer nas telas da loja
No computador o navegador já oferece a instalação sozinho, e o prêmio (um ícone no celular) não existe lá.
E o _og.js continua arrancando o manifesto de /loja/:slug e /m/:slug: aquelas telas são a loja da cliente,
e o consumidor final dela não deve receber convite pra instalar a ferramenta de gestão de outra pessoa. O convite tem a mesma fronteira.
Não publicar isso antes de olhar o iPhone
Todo o desenho do iPhone depende de um fato que ninguém verificou em aparelho real: o ícone instalado abre deslogado. Se abrir deslogado (é o que o código indica), o passo 4 existe. Se por algum motivo não abrir, o passo 4 sai e a folha fica mais curta. São quinze minutos que decidem uma peça inteira.
E uma pergunta antes de tudo
Dos 20 tenants não-demo, 14 têm zero pedidos e três são clientes reais em operação. O convite, com qualquer gate, vai ser visto por punhado de gente em agosto. Isso não é motivo pra não fazer - é motivo pra fazer a versão barata primeiro: se o Michel quiser cortar, o item fixo em "Meu negócio" mais a folha (Android e iPhone) custam cerca de 6 horas e entregam o caminho inteiro. O convite no Hoje, com gate, banco e contagem, é a metade que se pode adiar sem perder nada de estrutura.