{"id":1555,"date":"2024-09-20T15:14:25","date_gmt":"2024-09-20T18:14:25","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=1555"},"modified":"2025-11-26T16:15:11","modified_gmt":"2025-11-26T19:15:11","slug":"solicitacao-de-instalacao-pwa","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/solicitacao-de-instalacao-pwa\/","title":{"rendered":"Solicita\u00e7\u00e3o de instala\u00e7\u00e3o PWA"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

Solicita\u00e7\u00e3o de instala\u00e7\u00e3o PWA<\/strong>: O momento em que um usu\u00e1rio \u00e9 convidado a instalar um Progressive Web App (PWA) \u00e9 um ponto de convers\u00e3o cr\u00edtico, conhecido como “Install Prompt”<\/strong>. No entanto, a exibi\u00e7\u00e3o desse convite n\u00e3o deve ser passiva, mas sim uma experi\u00eancia contextualizada e controlada pelo desenvolvedor.<\/p>\n\n\n\n

Para isso, os navegadores modernos disparam o evento beforeinstallprompt<\/code><\/strong>, que permite que voc\u00ea cancele o prompt<\/em> nativo<\/strong> e o dispare em um momento mais oportuno e persuasivo.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. \ud83d\uded1 Interceptando o Evento beforeinstallprompt<\/code><\/h2>\n\n\n\n

O navegador s\u00f3 dispara esse evento quando o PWA j\u00e1 atende a todos os crit\u00e9rios de elegibilidade<\/strong> (Manifest, Service Worker, HTTPS, etc.). Ao intercept\u00e1-lo, voc\u00ea impede que a caixa de di\u00e1logo nativa apare\u00e7a imediatamente, ganhando controle total sobre a experi\u00eancia.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Armazenando o Evento<\/h3>\n\n\n\n

O segredo \u00e9 armazenar o objeto do evento (deferredPrompt<\/code>) para cham\u00e1-lo posteriormente, quando o seu bot\u00e3o de instala\u00e7\u00e3o personalizado for clicado.<\/p>\n\n\n\n

JavaScript<\/p>\n\n\n\n

let deferredPrompt;\n\n\/\/ 1. Ouve o evento disparado pelo navegador\nwindow.addEventListener('beforeinstallprompt', (event) => {\n  \/\/ Impede o prompt nativo de aparecer imediatamente\n  event.preventDefault(); \n  \n  \/\/ 2. Armazena o evento para uso posterior\n  deferredPrompt = event; \n  \n  \/\/ 3. Exibe o seu bot\u00e3o\/elemento de instala\u00e7\u00e3o personalizado\n  showInstallButton(); \n});\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
2. \ud83d\uddb1\ufe0f Disparando o Prompt de Instala\u00e7\u00e3o (UX Customizada)<\/h2>\n\n\n\n
Com o evento armazenado, voc\u00ea pode associ\u00e1-lo a um elemento de interface do usu\u00e1rio personalizado (#install-button<\/code>), garantindo que o prompt<\/em> seja exibido apenas quando o usu\u00e1rio demonstrar interesse (clicando no bot\u00e3o).<\/p>\n\n\n\n
O prompt()<\/code> e userChoice<\/code><\/h3>\n\n\n\n
Ao clicar no bot\u00e3o personalizado, voc\u00ea chama o m\u00e9todo prompt()<\/code> e, em seguida, usa a Promise<\/strong> userChoice<\/code> para rastrear o resultado:<\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
const installButton = document.getElementById('install-button');\n\ninstallButton.addEventListener('click', () => {\n  \/\/ Verifica se o evento est\u00e1 dispon\u00edvel\n  if (deferredPrompt) {\n    \n    \/\/ 1. Dispara o prompt nativo do navegador\n    deferredPrompt.prompt(); \n    \n    \/\/ 2. Rastreia a escolha do usu\u00e1rio\n    deferredPrompt.userChoice.then((choiceResult) => {\n      \n      if (choiceResult.outcome === 'accepted') {\n        console.log('O usu\u00e1rio aceitou a instala\u00e7\u00e3o.');\n      } else {\n        console.log('O usu\u00e1rio rejeitou a instala\u00e7\u00e3o.');\n      }\n      \n      \/\/ 3. O prompt n\u00e3o ser\u00e1 exibido novamente at\u00e9 a pr\u00f3xima navega\u00e7\u00e3o\n      deferredPrompt = null;\n      hideInstallButton(); \n    });\n  }\n});\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
3. \ud83c\udfaf Otimizando o Momento (Onde Enviar o Comando)<\/h2>\n\n\n\n
O sucesso da instala\u00e7\u00e3o depende de voc\u00ea convidar o usu\u00e1rio no momento de maior engajamento ou valor percebido<\/strong>. Evite pop-ups<\/em> intrusivos no carregamento da p\u00e1gina.<\/p>\n\n\n\n
Estrat\u00e9gia<\/strong><\/td>Momento Ideal<\/strong><\/td>Por que Funciona?<\/strong><\/td><\/tr><\/thead>
P\u00f3s-Engajamento<\/strong><\/td>Ap\u00f3s a segunda ou terceira visita, ou ap\u00f3s 5 minutos de uso.<\/td>Garante que o usu\u00e1rio j\u00e1 conhece e valoriza o PWA.<\/td><\/tr>
P\u00f3s-Convers\u00e3o<\/strong><\/td>Ap\u00f3s uma a\u00e7\u00e3o de valor (ex: concluir uma compra, salvar um item favorito, publicar um post).<\/td>O usu\u00e1rio acabou de obter valor e est\u00e1 propenso a aprofundar o relacionamento.<\/td><\/tr>
Explicita\u00e7\u00e3o<\/strong><\/td>Em um menu lateral ou p\u00e1gina “Sobre” do app.<\/td>Permite que usu\u00e1rios proativos encontrem a op\u00e7\u00e3o sem interrup\u00e7\u00e3o.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
4. \ud83d\udcca Coleta de An\u00e1lises e Fallback<\/h2>\n\n\n\n
A customiza\u00e7\u00e3o do prompt<\/em> permite rastrear a efic\u00e1cia da sua estrat\u00e9gia de instala\u00e7\u00e3o e fornecer feedback<\/em> caso a instala\u00e7\u00e3o n\u00e3o ocorra.<\/p>\n\n\n\n
<\/div>\n\n\n\n
A. An\u00e1lise de Dados<\/h3>\n\n\n\n
Utilize a Promise userChoice<\/code> para enviar dados para ferramentas de an\u00e1lise (Google Analytics, etc.). \u00c9 crucial rastrear:<\/p>\n\n\n\n