Este artigo é válido apenas para lojas utilizando o CMS Portal (Legado).
Progressive Web App (PWA) é um conjunto de técnicas usadas para desenvolver aplicações web e adicionar funcionalidades que antes eram restritas a aplicativos nativos.
- Progressivo: funciona em qualquer navegador.
- Responsivo: se adapta a qualquer dispositivo, seja desktop, tablet ou mobile.
- Independente de conexão: funciona mesmo quando o usuário estiver offline.
- Semelhante ao app: oferece experiência de uso comparável a aplicativos nativos.
- Atualizado: não é necessário baixar atualizações, pois o Service Worker permite que o navegador detecte e atualize automaticamente quando necessário.
- Seguro: exige conexão HTTPS.
- Engajável: permite notificações push para interação com o usuário.
- Instalável: é possível adicionar um ícone na tela principal do dispositivo móvel, sem precisar acessar uma app store.
- Compartilhável: seu compartilhamento é facilitado por URL, sem instalação complexa.
Se 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.
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.
Instruções
Crie o arquivo manifest.json
O 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.
Para criar o JSON, siga o passos abaixo:
-
No Admin VTEX, acesse Configurações da Loja > Storefront > Checkout.
-
Clique no ícone da engrenagem ⚙️ do site desejado.
-
Na aba
Código, clique emNovo. -
Escolha a opção
Arquivo. -
No campo Nome do arquivo, digite
manifest.json. -
Insira as informações do aplicativo (como nome, ícone e descrição), conforme o exemplo abaixo:
{"name": "Minha Loja","short_name": "Loja","start_url": "/","display": "standalone","background_color": "#fff","theme_color": "#2F3DB2","icons": [{"src": "/arquivos/icon.png","sizes": "192x192","type": "image/png"}]} -
Clique em
Salvar.
Dica: Utilize ícones em resolução mínima de 192x192px e formate cores hexadecimais conforme sua identidade visual.
Adicione o arquivo manifest.json ao aplicativo web
Após criar o arquivo manifest.json, adicione a seguinte linha dentro da seção <head> do seu arquivo index.html:
<link rel="manifest" href="/arquivos/manifest.json">
Com isso, sua aplicação web poderá abrir um splash screen exatamente igual a aplicativos nativos.
Crie um Service Worker
Service 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.
Para criar o script, siga os passos abaixo:
-
No Admin VTEX, acesse Configurações da Loja > Storefront > Checkout.
-
Clique no ícone da engrenagem ⚙️ do site desejado.
-
Na aba
Código, clique emNovo -
Escolha a opção
Arquivo. -
No campo Nome do arquivo, digite
service-worker.js. -
Programe a funcionalidade, conforme o exemplo abaixo:
// --- CONFIGURAÇÕES DO CACHE ---// Define a versão do cache para facilitar atualizações futurasconst CACHE = 'cache-v1';// Lista de recursos críticos para pré-cache (páginas, CSS, imagens)const FILES = ['/', '/arquivos/main.css', '/arquivos/logo.jpg'];// --- EVENTO DE INSTALAÇÃO ---// Executado uma vez quando o Service Worker é registradoself.addEventListener('install', (e) => {// Abre o cache e armazena os recursos definidose.waitUntil(caches.open(CACHE).then(cache => cache.addAll(FILES)));});// --- EVENTO DE FETCH ---// Intercepta todas as requisições de rede da páginaself.addEventListener('fetch', (e) => {// Estratégia Cache First:// 1. Tenta responder com recurso do cache// 2. Se não encontrado, busca na redee.respondWith(caches.match(e.request).then(res => res || fetch(e.request)));}); -
Clique em Salvar.
Embora 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.
Atenção: O Service Worker só funcionará em ambientes HTTPS. Teste sempre em produção ou utilize tunnels seguros em desenvolvimento.
Para saber mais sobre Service Worker, consulte a documentação do Google Web Fundamentals.
Verifique a implementação do seu PWA
Para garantir que seu site esteja no caminho certo na construção do seu PWA, utilize ferramentas de inspeção, como o Lighthouse do Google.
Para inspecionar seu site com o Lighthouse, siga os os passos abaixo:
- Baixe a extensão do Lighthouse no seu navegador.
- Acesse o site da sua loja.
- Clique no widget da ferramenta.
- Aguarde a análise e visualize o feedback gerado.
Para saber mais, veja o guia Getting started with Lighthouse do Developers Portal da VTEX.