Configuração do vite-plugin-pwa
Configuração do plugin, opções do manifesto, ícones, capturas de tela, modos de exibição e escopo.
Configuração do vite-plugin-pwa é uma aula grátis de Vue 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 Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
O que é uma PWA
Uma Progressive Web App oferece possibilidade de instalação, suporte sem conexão e recursos semelhantes aos nativos a um aplicativo Web por meio de um serviceWorker e de um manifesto de aplicativo Web. vite-plugin-pwa automatiza a integração dos dois em uma compilação Vue + Vite.
Instalando o plug-in
Instale vite-plugin-pwa como dependência de desenvolvimento. Ele usa o Workbox internamente para gerar o serviceWorker.
npm install -D vite-plugin-pwaAdicionando VitePWA aos plug-ins
Importe VitePWA e adicione-o à matriz de plug-ins do Vite. As opções são passadas em sua única chamada de função.
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { VitePWA } from "vite-plugin-pwa";
export default defineConfig({
plugins: [vue(), VitePWA({ /* options */ })]
});registerType
registerType controla o comportamento das atualizações. "autoUpdate" ativa imediatamente os novos serviceWorkers; "prompt" permite perguntar ao usuário antes de recarregar.
VitePWA({
registerType: "autoUpdate"
});As opções do manifesto
O objeto manifest se torna o manifesto do aplicativo Web. Os campos principais são name, short_name, theme_color e icons.
VitePWA({
manifest: {
name: "My Vue App",
short_name: "VueApp",
theme_color: "#42b883"
}
});A matriz de ícones
Forneça vários tamanhos de ícone para que o OS possa escolher o mais adequado para a tela inicial e a tela de abertura. Inclua um ícone adaptável para formas ajustáveis.
manifest: {
icons: [
{ src: "/pwa-192.png", sizes: "192x192", type: "image/png" },
{ src: "/pwa-512.png", sizes: "512x512", type: "image/png" },
{ src: "/maskable.png", sizes: "512x512", type: "image/png", purpose: "maskable" }
]
}Configuração do Workbox
A opção workbox configura o serviceWorker gerado: quais arquivos devem ser armazenados previamente no cache e quais regras de armazenamento em cache em tempo de execução devem ser usadas.
VitePWA({
workbox: {
globPatterns: ["**/*.{js,css,html,png,svg}"]
}
});injectRegister auto
injectRegister: "auto" injeta automaticamente o código que registra o serviceWorker, para que você não precise escrever manualmente a lógica de registro.
VitePWA({
registerType: "autoUpdate",
injectRegister: "auto"
});Usando o módulo de registro virtual
Para atualizações baseadas em confirmação, importe o módulo virtual registerSW no arquivo de entrada e conecte-o às suas funções de retorno de chamada.
import { registerSW } from "virtual:pwa-register";
const updateSW = registerSW({
onNeedRefresh() { /* show update toast */ },
onOfflineReady() { /* show ready toast */ }
});Ativando no desenvolvimento
Por padrão, o serviceWorker é executado apenas em produção. Ative devOptions para testar o comportamento da PWA durante o desenvolvimento.
VitePWA({
devOptions: { enabled: true }
});Verificando a instalação
Depois de compilar e disponibilizar o aplicativo, abra a aba Aplicativo do Chrome DevTools. Você deverá ver o manifesto analisado, um serviceWorker ativo e uma solicitação de instalação disponível na barra de endereço.
Verificação rápida
O que injectRegister: "auto" faz?
Recapitulação
Adicione VitePWA à matriz de plug-ins do Vite com um registerType (autoUpdate ou prompt), um manifest (name, short_name, theme_color e uma matriz icons) e opções de workbox. Use injectRegister: "auto" para o registro automático do serviceWorker ou o módulo virtual:pwa-register para atualizações baseadas em confirmaçã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
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Configuração do vite-plugin-pwa” é grátis?
Sim — o texto completo de “Configuração do vite-plugin-pwa” é 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 Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Configuração do vite-plugin-pwa”?
Configuração do plugin, opções do manifesto, ícones, capturas de tela, modos de exibição e escopo. Você pratica Vue 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 Vue Academy?
Nenhuma experiência prévia é necessária. Vue 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 “Configuração do vite-plugin-pwa”?
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 Vue Academy?
Sim. Cada aula de Vue 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
- Configuração do vite-plugin-pwa
- Estratégias de Service Worker
- Suporte offline e sincronização em segundo plano
- Notificações push em uma PWA Vue