Офлайн-поддержка и фоновая синхронизация
Кэширование ответов API, IndexedDB для офлайн-данных и фоновая синхронизация отложенных действий
«Офлайн-поддержка и фоновая синхронизация» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Подход с приоритетом офлайн-режима
Полная поддержка офлайн-режима означает, что приложение продолжает работать без сети: чтение выполняется из локального хранилища, а записи ставятся в очередь и синхронизируются после восстановления подключения.
IndexedDB для локального хранения
IndexedDB — это большое структурированное асинхронное хранилище браузера. Его низкоуровневый интерфейс многословен, поэтому большинство приложений используют небольшую библиотеку-обёртку idb.
npm install idbОткрытие базы данных с помощью idb
openDB возвращает дескриптор базы данных на основе промиса. Определяйте хранилища объектов в обратном вызове 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 });
}
});Чтение и запись
Используйте get, getAll и put для чтения и сохранения записей. Они возвращают промисы, которые можно ожидать с помощью await.
await db.put("todos", { id: 1, text: "Buy milk" });
const all = await db.getAll("todos");Определение офлайн-режима с помощью navigator.onLine
navigator.onLine — это логическое значение, указывающее состояние подключения. Считывайте его, чтобы выбирать между сетевым и локальным поведением.
if (!navigator.onLine) {
// work from IndexedDB only
}Реакция на события подключения
Объект window создаёт события online и offline. Свяжите с ними реактивную ссылку, чтобы интерфейс в реальном времени отражал состояние подключения.
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);
});Постановка изменений в очередь в офлайн-режиме
Если запись выполняется без подключения, сохраните её в хранилище исходящих операций вместо отправки. Интерфейс оптимистично обновляется на основе локального состояния.
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);
}
}Синхронизация при восстановлении подключения
Когда возникает событие online, опустошите очередь исходящих операций: повторите каждое поставленное в очередь изменение на сервере, а затем очистите очередь.
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);API фоновой синхронизации
Чтобы синхронизация продолжалась даже после закрытия вкладки, Background Sync API service worker регистрирует тег синхронизации, который браузер активирует после восстановления подключения.
const reg = await navigator.serviceWorker.ready;
await reg.sync.register("flush-outbox");Обработка синхронизации в worker
Service worker прослушивает событие sync и выполняет логику очистки очереди в фоновом режиме.
// service worker
self.addEventListener("sync", (event) => {
if (event.tag === "flush-outbox") {
event.waitUntil(flushOutbox());
}
});Учет конфликтов
Повторная отправка поставленных в очередь записей может конфликтовать с изменениями на сервере. Используйте версии, временные метки или правила «последняя запись побеждает», а неразрешенные конфликты показывайте пользователю.
Быстрая проверка
Как следует обрабатывать записи, пока приложение работает без подключения к сети?
Итоги
Поддержка работы без сети сохраняет данные в IndexedDB (через библиотеку idb), определяет состояние подключения с помощью navigator.onLine и событий online/offline, ставит изменения в исходящую очередь, пока устройство не подключено к сети, и синхронизирует их после восстановления соединения — при необходимости с API фоновой синхронизации сервис-воркера. При повторной отправке записей из очереди учитывайте возможность конфликтов.
Часто задаваемые вопросы
Урок «Офлайн-поддержка и фоновая синхронизация» бесплатный?
Да — полный текст урока «Офлайн-поддержка и фоновая синхронизация» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Офлайн-поддержка и фоновая синхронизация»?
Кэширование ответов API, IndexedDB для офлайн-данных и фоновая синхронизация отложенных действий Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Офлайн-поддержка и фоновая синхронизация»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка vite-plugin-pwa
- Стратегии Service Worker
- Офлайн-поддержка и фоновая синхронизация
- Push-уведомления в Vue PWA