Supporto offline e sincronizzazione in background
Caching delle risposte API, IndexedDB per i dati offline, sincronizzazione in background per le azioni differite.
Supporto offline e sincronizzazione in background è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Approccio offline-first
Il vero supporto offline significa che l'app continua a funzionare senza rete: le letture provengono da un archivio locale e le scritture vengono accodate, quindi sincronizzate quando la connessione torna disponibile.
IndexedDB per l'archiviazione locale
IndexedDB è l'archivio asincrono, strutturato e di grandi dimensioni del browser. La sua API nativa è verbosa, quindi la maggior parte delle app utilizza la piccola libreria wrapper idb.
npm install idbAprire un database con idb
openDB restituisce un handle del database basato su promise. Definisca gli object store nel callback 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 });
}
});Leggere e scrivere
Utilizzi get, getAll e put per leggere e memorizzare i record. Questi metodi restituiscono promise che è possibile attendere con await.
await db.put("todos", { id: 1, text: "Buy milk" });
const all = await db.getAll("todos");Rilevare l'offline con navigator.onLine
navigator.onLine è un booleano che indica la connettività. Lo legga per scegliere tra il comportamento di rete e quello locale.
if (!navigator.onLine) {
// work from IndexedDB only
}Reagire agli eventi di connettività
La finestra genera gli eventi online e offline. Li colleghi a un ref reattivo, così l'interfaccia riflette lo stato in tempo reale.
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);
});Accodare le mutazioni offline
Quando si esegue una scrittura offline, la memorizzi in uno store outbox invece di inviarla. L'interfaccia si aggiorna in modo ottimistico a partire dallo stato locale.
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);
}
}Sincronizzare alla riconnessione
Quando viene generato l'evento online, svuoti l'outbox: riproduca ogni mutazione accodata sul server, quindi la elimini.
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);L'API Background Sync
Per sincronizzare i dati anche dopo la chiusura della scheda, l'API Background Sync del service worker registra un tag di sincronizzazione che il browser attiva quando torna la connettività.
const reg = await navigator.serviceWorker.ready;
await reg.sync.register("flush-outbox");Gestire la sincronizzazione nel worker
Il service worker resta in ascolto dell'evento sync ed esegue la logica di svuotamento in background.
// service worker
self.addEventListener("sync", (event) => {
if (event.tag === "flush-outbox") {
event.waitUntil(flushOutbox());
}
});Considerazioni sui conflitti
La riproduzione delle scritture accodate può entrare in conflitto con le modifiche apportate sul server. Utilizzi versioni, timestamp o regole per cui prevale l'ultima scrittura e segnali all'utente i conflitti non risolti.
Verifica rapida
Come devono essere gestite le scritture mentre l'app è offline?
Riepilogo
Il supporto offline archivia i dati in IndexedDB (tramite la libreria idb), rileva la connettività con navigator.onLine e gli eventi online/offline, accoda le mutazioni in una outbox mentre si è offline e le sincronizza alla riconnessione, facoltativamente con l'API Background Sync del service worker. Preveda la gestione dei conflitti durante la riproduzione delle scritture accodate.
Domande Frequenti
La lezione «Supporto offline e sincronizzazione in background» è gratuita?
Sì — il testo completo di «Supporto offline e sincronizzazione in background» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «Supporto offline e sincronizzazione in background»?
Caching delle risposte API, IndexedDB per i dati offline, sincronizzazione in background per le azioni differite. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Supporto offline e sincronizzazione in background»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Configurazione di vite-plugin-pwa
- Strategie per i service worker
- Supporto offline e sincronizzazione in background
- Notifiche push in una PWA Vue