{"section":"tutorials","requestedLocale":"pt","requestedSlug":"como-transformar-o-site-da-minha-loja-em-um-pwa","locale":"pt","slug":"como-transformar-o-site-da-minha-loja-em-um-pwa","path":"docs/pt/tutorials/storefront/layout/como-transformar-o-site-da-minha-loja-em-um-pwa.md","branch":"main","content":"> ℹ️ Este artigo é válido apenas para lojas utilizando o CMS Portal (Legado).\n\nProgressive Web App (PWA) é um conjunto de técnicas usadas para desenvolver aplicações web e adicionar funcionalidades que antes eram restritas a aplicativos nativos.\n\n- **Progressivo:** funciona em qualquer navegador.\n- **Responsivo:** se adapta a qualquer dispositivo, seja desktop, tablet ou mobile.\n- **Independente de conexão:** funciona mesmo quando o usuário estiver offline.\n- **Semelhante ao app:** oferece experiência de uso comparável a aplicativos nativos.\n- **Atualizado:** não é necessário baixar atualizações, pois o Service Worker permite que o navegador detecte e atualize automaticamente quando necessário.\n- **Seguro:** exige conexão HTTPS.\n- **Engajável:** permite notificações push para interação com o usuário.\n- **Instalável:** é possível adicionar um ícone na tela principal do dispositivo móvel, sem precisar acessar uma app store.\n- **Compartilhável:** seu compartilhamento é facilitado por URL, sem instalação complexa.\n\nSe você já tem um site ou uma aplicação web, pode implementar aos poucos as características que definem um PWA, como notificações, cache de arquivos, execução em modo offline e outras possibilidades que fazem o usuário se sentir em um aplicativo nativo.\n\n> ⚠️ A VTEX **não** oferece soluções nativas para conversão em PWA no CMS Portal (Legado). A VTEX fornece, no entanto, a infraestrutura básica para implementação manual. Lojas desenvolvidas com o VTEX IO Store Framework possuem este recurso nativamente.\n\n## Instruções\n\n### Crie o arquivo manifest.json\n\nO arquivo `manifest.json` do aplicativo web fornece informações sobre um aplicativo (como nome, autor, ícone e descrição) em um arquivo de texto JSON. Sua criação tem como objetivo transformar uma aplicação web em algo instalável em um smartphone.\n\nPara criar o JSON, siga o passos abaixo:\n\n1. No Admin VTEX, acesse **Configurações da Loja > Storefront > Checkout**.\n2. Clique no ícone da engrenagem ⚙️ do site desejado.\n3. Na aba `Código`, clique em `Novo`.\n4. Escolha a opção `Arquivo`.\n5. No campo **Nome do arquivo**, digite `manifest.json`.\n6. Insira as informações do aplicativo (como nome, ícone e descrição), conforme o exemplo abaixo:\n\n ```json\n {\n \"name\": \"Minha Loja\",\n \"short_name\": \"Loja\",\n \"start_url\": \"/\",\n \"display\": \"standalone\",\n \"background_color\": \"#fff\",\n \"theme_color\": \"#2F3DB2\",\n \"icons\": [{\n \"src\": \"/arquivos/icon.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n }]\n }\n ```\n\n7. Clique em `Salvar`.\n\n> ℹ️ **Dica:** Utilize ícones em resolução mínima de 192x192px e formate cores hexadecimais conforme sua identidade visual.\n\n### Adicione o arquivo `manifest.json` ao aplicativo web\n\nApós criar o arquivo `manifest.json`, adicione a seguinte linha dentro da seção `` do seu arquivo `index.html`:\n\n```\n\n```\n\nCom isso, sua aplicação web poderá abrir um splash screen exatamente igual a aplicativos nativos.\n\n### Crie um Service Worker\n\nService Worker é um script que seu navegador executa em segundo plano, separado da web, possibilitando recursos como sincronização periódica, notificações push e execução em modo offline.\n\nPara criar o script, siga os passos abaixo:\n\n1. No Admin VTEX, acesse **Configurações da Loja > Storefront > Checkout**.\n2. Clique no ícone da engrenagem ⚙️ do site desejado.\n3. Na aba `Código`, clique em `Novo`\n4. Escolha a opção `Arquivo`.\n5. No campo **Nome do arquivo**, digite `service-worker.js`.\n6. Programe a funcionalidade, conforme o exemplo abaixo:\n\n ```js\n // --- CONFIGURAÇÕES DO CACHE ---\n // Define a versão do cache para facilitar atualizações futuras\n\n const CACHE = 'cache-v1';\n\n // Lista de recursos críticos para pré-cache (páginas, CSS, imagens)\n const FILES = ['/', '/arquivos/main.css', '/arquivos/logo.jpg'];\n\n // --- EVENTO DE INSTALAÇÃO ---\n // Executado uma vez quando o Service Worker é registrado\n\n self.addEventListener('install', (e) => {\n // Abre o cache e armazena os recursos definidos\n e.waitUntil(caches.open(CACHE).then(cache => cache.addAll(FILES)));\n });\n\n // --- EVENTO DE FETCH ---\n // Intercepta todas as requisições de rede da página\n\n self.addEventListener('fetch', (e) => {\n // Estratégia Cache First:\n // 1. Tenta responder com recurso do cache\n // 2. Se não encontrado, busca na rede\n\n e.respondWith(caches.match(e.request).then(res => res || fetch(e.request)));\n });\n ```\n\n7. Clique em **Salvar**.\n\nEmbora o arquivo esteja em `/arquivos/service-worker.js`, ele recebe o header `Service-Worker-Allowed` com valor `/`, o que permite interceptar requests da raiz do site.\n\n> ⚠️ **Atenção:** O Service Worker só funcionará em ambientes HTTPS. Teste sempre em produção ou utilize tunnels seguros em desenvolvimento.\n\nPara saber mais sobre Service Worker, consulte a documentação do Google [Web Fundamentals](https://developers.google.com/web/fundamentals/primers/service-workers/).\n\n### Verifique a implementação do seu PWA\n\nPara garantir que seu site esteja no caminho certo na construção do seu PWA, utilize ferramentas de inspeção, como o Lighthouse do Google.\n\nPara inspecionar seu site com o Lighthouse, siga os os passos abaixo:\n\n1. Baixe a extensão do Lighthouse no seu navegador.\n2. Acesse o site da sua loja.\n3. Clique no widget da ferramenta.\n4. Aguarde a análise e visualize o feedback gerado.\n\nPara saber mais, veja o guia [Getting started with Lighthouse](https://developers.vtex.com/docs/guides/storefront-getting-started-with-lighthouse) do Developers Portal da VTEX."}