Vue Academy · leksjon

Offline-støtte og bakgrunnssynkronisering

Bufring av API-svar, IndexedDB for offline-data og bakgrunnssynkronisering for utsatte handlinger.

Leksjon 3 av 413 trinn

Offline-støtte og bakgrunnssynkronisering er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Tenke frakoblet først

Ekte støtte uten nett betyr at appen fortsetter å fungere uten nettverk: lesinger hentes fra et lokalt lager, og skrivinger settes i kø og synkroniseres når forbindelsen kommer tilbake.

IndexedDB for lokal lagring

IndexedDB er nettleserens store, strukturerte og asynkrone lager. Det rå API-et er omstendelig, så de fleste apper bruker det lille wrapper-biblioteket idb.

npm install idb

Åpne en database med idb

openDB returnerer et promise-basert databasehåndtak. Definer objektlagre i callback-funksjonen 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 });
  }
});

Lese og skrive

Bruk get, getAll og put til å lese og lagre poster. Disse returnerer promises som De kan vente på med await.

await db.put("todos", { id: 1, text: "Buy milk" });
const all = await db.getAll("todos");

Oppdage frakobling med navigator.onLine

navigator.onLine er en boolsk verdi som angir tilkoblingsstatusen. Les den for å velge mellom nettverksatferd og lokal atferd.

if (!navigator.onLine) {
  // work from IndexedDB only
}

Reagere på tilkoblingshendelser

Vinduet utløser hendelsene online og offline. Koble en reaktiv ref til dem, slik at brukergrensesnittet gjenspeiler statusen i sanntid.

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);
});

Sette mutasjoner i kø uten nett

Når en skriveoperasjon skjer uten nett, lagrer De den i et outbox-lager i stedet for å sende den. Brukergrensesnittet oppdateres optimistisk fra den lokale tilstanden.

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);
  }
}

Synkronisere ved gjenopprettet tilkobling

Når hendelsen online utløses, tømmer De outbox-lageret: Spill av hver mutasjon i kø mot serveren, og tøm deretter lageret.

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);

Background Sync API

Hvis synkroniseringen skal fortsette selv etter at fanen er lukket, registrerer Background Sync API-et i service workeren en synkroniseringstag som nettleseren utløser når forbindelsen kommer tilbake.

const reg = await navigator.serviceWorker.ready;
await reg.sync.register("flush-outbox");

Håndtere synkronisering i workeren

Service workeren lytter etter hendelsen sync og kjører tømmelogikken i bakgrunnen.

// service worker
self.addEventListener("sync", (event) => {
  if (event.tag === "flush-outbox") {
    event.waitUntil(flushOutbox());
  }
});

Vurdering av konflikter

Avspilling av kølagrede skriveoperasjoner kan komme i konflikt med endringer på serveren. Bruk versjoner, tidsstempler eller regler om at siste skriving vinner, og vis uløste konflikter for brukeren.

Hurtigsjekk

Hvordan bør skriveoperasjoner håndteres mens appen er frakoblet?

Besvar den i den interaktive leksjonen

Oppsummering

Offline-støtte lagrer data i IndexedDB (via biblioteket idb), oppdager tilkobling med navigator.onLine og hendelsene online/offline, legger mutasjoner i en outbox mens appen er offline, og synkroniserer dem når forbindelsen gjenopprettes – eventuelt med Background Sync API for service worker. Planlegg for konflikter når kølagrede skriveoperasjoner spilles av.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 42
Leksjoner: 156

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Offline-støtte og bakgrunnssynkronisering» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Offline-støtte og bakgrunnssynkronisering», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Offline-støtte og bakgrunnssynkronisering»?

Bufring av API-svar, IndexedDB for offline-data og bakgrunnssynkronisering for utsatte handlinger. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Vue Academy?

Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Offline-støtte og bakgrunnssynkronisering»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?

Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Oppsett av vite-plugin-pwa
Strategier for service workers
Offline-støtte og bakgrunnssynkronisering
Push-varsler i Vue PWA

← Tilbake til Vue Academy