Курсы Блог Обо мне
Статья была обновлена  

IndexedDB: Клиентская база данных для молниеносных и офлайн-приложений

compression

Представьте: пользователь заходит в ваше веб-приложение — интернет-магазин, финтех-сервис или игровую платформу — в метро, где связь нестабильна. Страница грузится вечность, корзина не обновляется, а ключевой функционал недоступен. Результат? Раздражение и закрытая вкладка. В России с ее огромной территорией и разным качеством связи это не редкий кейс, а ежедневная реальность для миллионов.

Как сохранить пользователя и дать ему бесшовный опыт, даже когда сеть подвела?

Ответ — переход от server-first к client-first архитектуре.

А сердцем такого подхода на стороне клиента является IndexedDB.

Что такое IndexedDB?

IndexedDB (Indexed Database API) — это полноценная, NoSQL-подобная база данных, встроенная прямо в браузер пользователя. Это не просто «еще одно хранилище» вроде LocalStorage или Cookies.

IndexedDB — это как встроенный склад внутри вашего браузера. Если LocalStorage — это маленький сейф для нескольких ценных бумаг (ключ-значение), то IndexedDB — это огромный логистический центр, где вы можете хранить целые каталоги товаров, историю заказов, черновики документов и сложные структуры данных, а затем мгновенно находить нужное по любому параметру.

Ключевые особенности, которые важно понимать

Как работает IndexedDB?

Принцип работы IndexedDB отличается от простых ключ-значение хранилищ. Вот его основные концепции

Простая аналогия: Представьте, что вы библиотекарь. База данных — это вся библиотека. Хранилища объектов — это стеллажи (художественная литература, научная, периодика). Индексы — это каталоговые карточки, отсортированные по названию, автору или году издания. А транзакция — это процесс выдачи книги читателю: вы находите книгу в каталоге (индекс), идете к стеллажу (хранилище), забираете ее и отмечаете в журнале — все эти действия либо происходят целиком, либо не происходят вовсе.

IndexedDB в контексте Client-First подхода

Client-First — это архитектурный паттерн, где основная логика и данные сначала обрабатываются на стороне клиента, а сервер выступает в роли синхронизируемого бэкенда.

1. Офлайн-работа и Resilience

Ваше приложение работает вообще без сети. Пользователь может просматривать кэшированный каталог товаров, наполнять корзину, редактировать профиль. Все данные пишутся в IndexedDB. Как только соединение восстанавливается, специальный фоновый процесс синхронизирует изменения с сервером.

2. Молниенная производительность

Данные уже на устройстве пользователя. Не нужно ждать сетевой запрос, чтобы отрисовать интерфейс. Это радикально уменьшает Time to Interactive (TTI).

3. Снижение нагрузки на сервер

Меньше API-запросов для получения одних и тех же данных (например, справочников городов или списка категорий). Статичные данные загружаются один раз и потом берутся из локальной БД.

4. Эффективное управление большими данными

Если ваше приложение работает с большими наборами данных (например, графики, аналитика, каталоги с тысячами позиций), загружать их все в оперативную память (как в Redux) — неэффективно. IndexedDB позволяет работать с данными порционно, через курсоры.

Как использовать IndexedDB? Практический пример для вашего проекта

Теория без практики мертва. Давайте посмотрим на базовый пример работы с IndexedDB на JavaScript.

Задача: Создать базу данных для кэширования товаров интернет-магазина.

// Открываем или создаем базу данных
const request = indexedDB.open('MyShopDB', 1); // 'MyShopDB' - название, 1 - версия

let db;

// Срабатывает, если БД нужно создать или обновить
request.onupgradeneeded = function(event) {
  db = event.target.result;

  // Создаем хранилище объектов 'products' с ключом 'id'
  const productStore = db.createObjectStore('products', { keyPath: 'id' });

  // Создаем индекс для поиска по категории 'category'
  productStore.createIndex('by_category', 'category', { unique: false });
};

// Срабатывает при успешном открытии БД
request.onsuccess = function(event) {
  db = event.target.result;
  console.log('База данных открыта');
};

// Срабатывает при ошибке
request.onerror = function(event) {
  console.error('Ошибка базы данных:', event.target.errorCode);
};

// Функция для добавления товара
function addProduct(product) {
  // Создаем транзакцию на запись для хранилища 'products'
  const transaction = db.transaction(['products'], 'readwrite');
  const store = transaction.objectStore('products');

  const request = store.add(product);

  request.onsuccess = function() {
    console.log('Товар добавлен в IndexedDB');
  };

  request.onerror = function() {
    console.log('Ошибка при добавлении товара');
  };
}

// Функция для получения всех товаров по категории
function getProductsByCategory(category) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['products'], 'readonly');
    const store = transaction.objectStore('products');
    const index = store.index('by_category'); // Используем индекс

    // Получаем все товары с указанной категорией
    const request = index.getAll(category);

    request.onsuccess = function() {
      resolve(request.result);
    };

    request.onerror = function() {
      reject(request.error);
    };
  });
}

// Пример использования
const newProduct = { id: 123, name: 'Смартфон', category: 'electronics', price: 29999 };
addProduct(newProduct);

// Позже, чтобы получить все электронику
getProductsByCategory('electronics').then(products => {
  console.log(products); // Выведет массив товаров, включая наш смартфон
});

Для чего это можно применить прямо сейчас:

Лучшие практики и подводные камни

Заключение

IndexedDB — это не нишевая технология, а мощный инструмент для создания современного, конкурентноспособного веб-приложения, особенно в условиях российского рынка с его спецификой connectivity. Переход к client-first подходу с использованием IndexedDB позволяет вам:

Начните с малого — реализуйте кэширование каталога или корзину покупков. Вы сразу увидите, как ваш продукт станет быстрее, надежнее и независимее.

frontline

FrontLine

Присоединяйтесь к нам в телеграмм

Другие интересные посты в удобном в формате

Подписаться

Еще интересное по теме