O manifesto da aplicação Web
Escrever um manifest.json com name, icons, start_url, display e theme_color para que os navegadores disponibilizem uma sugestão de adição ao ecrã inicial.
O manifesto da aplicação Web é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que é uma PWA?
Um aplicativo web progressivo é um site com recursos de aplicativo nativo: pode ser instalado na tela inicial, funciona off-line e pode receber notificações instantâneas. Os três componentes principais são: um manifesto de aplicativo web, um worker de serviço e HTTPS.
O arquivo de manifesto
O manifest.json (ou .webmanifest) é um arquivo JSON que descreve os metadados do seu aplicativo. Os navegadores leem esse arquivo para habilitar a opção “Adicionar à tela inicial” e iniciar o aplicativo como se fosse nativo.
Manifesto básico
Um manifesto mínimo inclui nome, ícones, URL inicial e modo de exibição.
// public/manifest.webmanifest
{
"name": "Coddy Notes",
"short_name": "Notes",
"description": "Lightweight markdown notes",
"start_url": "/?source=pwa",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
]
}Vincular o manifesto
Vincule-o no seu HTML <head>.
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">Modos de exibição
"display" controla os elementos da janela do aplicativo: "standalone" (sem interface do navegador, com aparência de aplicativo), "fullscreen" (imersivo, oculta a barra de status), "minimal-ui" (alguns controles do navegador), "browser" (aba normal).
Ícones — vários tamanhos
Forneça ícones em vários tamanhos. O Android moderno requer os tamanhos 192 e 512; a Apple precisa de tamanhos adicionais. Use "purpose": "maskable" para ícones adaptáveis do Android.
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Tags específicas da Apple
O iOS não oferece suporte completo ao manifesto. Adicione meta tags específicas da Apple para a instalação na tela inicial do iOS.
<link rel="apple-touch-icon" href="/icons/apple-180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Notes">Solicitação de instalação
Os navegadores disparam um evento beforeinstallprompt quando os critérios são atendidos (manifesto + worker de serviço + HTTPS + interação do usuário). É possível adiá-lo e acioná-lo pela sua própria interface.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showInstallButton();
});
async function onInstallClick() {
if (!deferredPrompt) return;
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log('install:', outcome);
deferredPrompt = null;
}Atalhos do aplicativo
O manifesto pode declarar atalhos que aparecem quando o usuário mantém pressionado o ícone do aplicativo instalado.
"shortcuts": [
{
"name": "New Note",
"short_name": "New",
"url": "/notes/new",
"icons": [{ "src": "/icons/new-96.png", "sizes": "96x96" }]
}
]Categorias e capturas de tela
Adicione categories e screenshots para uma interface de instalação mais completa no Chrome para Android e no Windows.
"categories": ["productivity", "utilities"],
"screenshots": [
{ "src": "/screens/home.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide" },
{ "src": "/screens/mobile.png", "sizes": "720x1280", "type": "image/png", "form_factor": "narrow" }
]Testar o manifesto
Abra DevTools → Aplicativo → Manifesto. O Chrome mostra os campos interpretados do manifesto, prévias dos ícones e avisos (ícones ausentes, baixo contraste etc.).
Os frameworks facilitam tudo
Next.js: coloque manifest.webmanifest em public/. Nuxt: instale o módulo @vite-pwa/nuxt. Vite: vite-plugin-pwa gera o manifesto e o worker de serviço automaticamente.
// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa';
export default {
plugins: [VitePWA({
manifest: {
name: 'Coddy Notes',
icons: [{ src: '/192.png', sizes: '192x192', type: 'image/png' }]
}
})]
};Verificação rápida
Qual valor de display em um manifesto de aplicativo web faz a PWA instalada abrir sem nenhuma interface do navegador, como um aplicativo nativo?
Recapitulação: manifesto de aplicativo web
Arquivo JSON que descreve os metadados da PWA. Inclua nome, nome curto, URL inicial, modo de exibição, cor do tema e ícones (vários tamanhos e formato adaptável). Vincule-o no HTML com rel=manifest. O iOS precisa de meta tags específicas da Apple. Use o evento de solicitação de instalação para criar uma interface de instalação personalizada. Atalhos e capturas de tela tornam a instalação mais completa. Frameworks (Vite PWA, Next e Nuxt PWA) automatizam a geração.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 41
- Aulas
- 163
Perguntas Frequentes
A aula “O manifesto da aplicação Web” é grátis?
Sim — o texto completo de “O manifesto da aplicação Web” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “O manifesto da aplicação Web”?
Escrever um manifest.json com name, icons, start_url, display e theme_color para que os navegadores disponibilizem uma sugestão de adição ao ecrã inicial. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “O manifesto da aplicação Web”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- O manifesto da aplicação Web
- Registo e ciclo de vida do Service Worker
- Estratégias de armazenamento offline em cache: CacheFirst e NetworkFirst
- Notificações push