Suporte offline e sincronização em segundo plano
Armazenamento em cache de respostas da API, IndexedDB para dados offline e sincronização em segundo plano para ações adiadas.
Suporte offline e sincronização em segundo plano é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 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.
Priorize o funcionamento sem conexão
O suporte verdadeiro ao modo sem conexão significa que o aplicativo continua funcionando sem uma rede: as leituras vêm de um armazenamento local e as gravações são colocadas em uma fila, sendo sincronizadas quando a conexão retorna.
IndexedDB para armazenamento local
IndexedDB é o armazenamento assíncrono, estruturado e amplo do navegador. Sua API bruta é verbosa, por isso a maioria dos aplicativos usa a pequena biblioteca de encapsulamento idb.
npm install idbAbrindo um banco de dados com idb
openDB devolve um identificador de banco de dados baseado em promessas. Defina os armazenamentos de objetos no retorno de chamada upgrade.
import { openDB } from "idb";
const db = await openDB("app-db", 1, {
upgrade(db) {
db.createObjectStore("todos", { keyPath: "id" });
db.createObjectStore("outbox", { keyPath: "id", autoIncrement: true });
}
});Lendo e gravando
Use get, getAll e put para ler e armazenar registros. Eles devolvem promessas que você pode aguardar.
await db.put("todos", { id: 1, text: "Buy milk" });
const all = await db.getAll("todos");Detectando a falta de conexão com navigator.onLine
navigator.onLine é um booleano que indica a conectividade. Leia-o para decidir entre o comportamento de rede e o local.
if (!navigator.onLine) {
// work from IndexedDB only
}Reagindo aos eventos de conectividade
A janela dispara os eventos online e offline. Vincule uma referência reativa a eles para que a interface reflita o status em tempo real.
import { ref, onMounted, onUnmounted } from "vue";
const online = ref(navigator.onLine);
const on = () => (online.value = true);
const off = () => (online.value = false);
onMounted(() => {
window.addEventListener("online", on);
window.addEventListener("offline", off);
});
onUnmounted(() => {
window.removeEventListener("online", on);
window.removeEventListener("offline", off);
});Colocando mutações em fila sem conexão
Quando uma gravação ocorre sem conexão, armazene-a em um armazenamento de caixa de saída em vez de enviá-la. A interface é atualizada de forma otimista a partir do estado local.
async function saveTodo(todo) {
await db.put("todos", todo);
if (!navigator.onLine) {
await db.add("outbox", { type: "saveTodo", payload: todo });
} else {
await api.save(todo);
}
}Sincronizando ao reconectar
Quando o evento online for disparado, esvazie a caixa de saída: reproduza cada mutação enfileirada no servidor e depois limpe a caixa.
async function flushOutbox() {
const items = await db.getAll("outbox");
for (const item of items) {
await api.send(item);
await db.delete("outbox", item.id);
}
}
window.addEventListener("online", flushOutbox);A API Background Sync
Para sincronizar mesmo depois que a aba for fechada, a API Background Sync do serviceWorker registra uma etiqueta de sincronização que o navegador dispara quando a conexão retorna.
const reg = await navigator.serviceWorker.ready;
await reg.sync.register("flush-outbox");Tratando a sincronização no Worker
O serviceWorker escuta o evento sync e executa a lógica de esvaziamento em segundo plano.
// service worker
self.addEventListener("sync", (event) => {
if (event.tag === "flush-outbox") {
event.waitUntil(flushOutbox());
}
});Considerações sobre conflitos
Reproduzir operações de escrita enfileiradas pode entrar em conflito com alterações no servidor. Use versões, marcas de data e hora ou regras de prevalência da última gravação, e mostre ao usuário os conflitos não resolvidos.
Verificação rápida
Como as operações de escrita devem ser tratadas enquanto o aplicativo estiver offline?
Recapitulação
O suporte offline armazena dados no IndexedDB (por meio da biblioteca idb), detecta a conectividade com navigator.onLine e os eventos online/offline, enfileira mutações em uma caixa de saída enquanto está offline e as sincroniza ao se reconectar — opcionalmente usando a API de sincronização em segundo plano do agente de serviço. Planeje como lidar com conflitos ao reproduzir operações de escrita enfileiradas.
Perguntas Frequentes
A aula “Suporte offline e sincronização em segundo plano” é grátis?
Sim — o texto completo de “Suporte offline e sincronização em segundo plano” é 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 “Suporte offline e sincronização em segundo plano”?
Armazenamento em cache de respostas da API, IndexedDB para dados offline e sincronização em segundo plano para ações adiadas. 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 3 de 4.
Quanto tempo leva a aula “Suporte offline e sincronização em segundo plano”?
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