Obsługa trybu offline i synchronizacja w tle
Buforowanie odpowiedzi API, IndexedDB dla danych offline oraz synchronizacja w tle dla odroczonych działań.
Obsługa trybu offline i synchronizacja w tle to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Myślenie w duchu offline-first
Rzeczywista obsługa trybu offline oznacza, że aplikacja nadal działa bez sieci: odczyty pochodzą z lokalnego magazynu, a zapisy są kolejkowane i synchronizowane po przywróceniu połączenia.
IndexedDB jako lokalny magazyn
IndexedDB to duży, ustrukturyzowany i asynchroniczny magazyn przeglądarki. Jego surowe API jest rozwlekłe, dlatego większość aplikacji korzysta z niewielkiej biblioteki opakowującej idb.
npm install idbOtwieranie bazy danych za pomocą idb
openDB zwraca oparty na obietnicy uchwyt do bazy danych. Magazyny obiektów należy zdefiniować w funkcji zwrotnej 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 });
}
});Odczytywanie i zapisywanie
Do odczytywania i zapisywania rekordów należy używać funkcji get, getAll i put. Zwracają one obietnice, na których można użyć await.
await db.put("todos", { id: 1, text: "Buy milk" });
const all = await db.getAll("todos");Wykrywanie trybu offline za pomocą navigator.onLine
navigator.onLine to wartość logiczna wskazująca stan połączenia. Należy ją odczytać, aby wybrać zachowanie sieciowe lub lokalne.
if (!navigator.onLine) {
// work from IndexedDB only
}Reagowanie na zdarzenia połączenia
Obiekt window emituje zdarzenia online i offline. Należy powiązać z nimi reaktywny ref, aby interfejs na bieżąco odzwierciedlał stan połączenia.
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);
});Kolejkowanie mutacji offline
Gdy zapis nastąpi w trybie offline, należy przechować go w magazynie kolejki wyjściowej zamiast go wysyłać. Interfejs jest optymalnie aktualizowany na podstawie stanu lokalnego.
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);
}
}Synchronizowanie po ponownym połączeniu
Po wystąpieniu zdarzenia online należy opróżnić kolejkę wyjściową: ponownie wykonać każdą zakolejkowaną mutację na serwerze, a następnie ją wyczyścić.
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
Aby synchronizacja działała również po zamknięciu karty, Background Sync API service workera rejestruje znacznik synchronizacji, który przeglądarka obsługuje po przywróceniu połączenia.
const reg = await navigator.serviceWorker.ready;
await reg.sync.register("flush-outbox");Obsługa synchronizacji w Workerze
Service worker nasłuchuje zdarzenia sync i wykonuje logikę opróżniania kolejki w tle.
// service worker
self.addEventListener("sync", (event) => {
if (event.tag === "flush-outbox") {
event.waitUntil(flushOutbox());
}
});Kwestie konfliktów
Odtwarzanie zapisów z kolejki może powodować konflikty ze zmianami na serwerze. Należy używać wersji, znaczników czasu lub zasad „ostatni zapis wygrywa”, a nierozwiązane konflikty należy zgłaszać użytkownikowi.
Szybkie sprawdzenie
Jak należy obsługiwać zapisy, gdy aplikacja działa offline?
Podsumowanie
Obsługa trybu offline przechowuje dane w IndexedDB (za pośrednictwem biblioteki idb), wykrywa łączność za pomocą navigator.onLine oraz zdarzeń online/offline, umieszcza mutacje w kolejce outbox podczas pracy offline i synchronizuje je po ponownym nawiązaniu połączenia — opcjonalnie za pomocą interfejsu Background Sync API service workera. Podczas odtwarzania zapisów z kolejki należy uwzględnić możliwość wystąpienia konfliktów.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „Obsługa trybu offline i synchronizacja w tle” jest bezpłatna?
Tak — pełny tekst „Obsługa trybu offline i synchronizacja w tle” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Obsługa trybu offline i synchronizacja w tle”?
Buforowanie odpowiedzi API, IndexedDB dla danych offline oraz synchronizacja w tle dla odroczonych działań. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Obsługa trybu offline i synchronizacja w tle”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Konfiguracja vite-plugin-pwa
- Strategie Service Worker
- Obsługa trybu offline i synchronizacja w tle
- Powiadomienia push w Vue PWA