JavaScript Academy · Урок

Версионирование и обновления

Переносите схемы при изменении версий.

«Версионирование и обновления» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Зачем нужны версии

Приложения развиваются: Вы добавляете хранилища и индексы или меняете структуру данных. IndexedDB использует номер версии, чтобы безопасно управлять изменениями схемы в браузере каждого пользователя.

Номер версии

Второй аргумент open — это версия, положительное целое число. Его увеличение сообщает браузеру об изменении схемы и запускает обновление.

// Bumping from 1 to 2 triggers onupgradeneeded:
const request = indexedDB.open('app-db', 2);

Версию можно только увеличивать

Версию можно только увеличить. Если открыть базу с номером, меньшим сохранённого, операция завершится ошибкой. Никогда не уменьшайте номер версии.

// If the stored DB is version 3:
const req = indexedDB.open('app-db', 2);
req.onerror = () => console.log('cannot open older version');

oldVersion и newVersion

Внутри onupgradeneeded событие предоставляет значения oldVersion и newVersion. Используйте их, чтобы применить только те миграции, которые ещё не выполнялись.

request.onupgradeneeded = (e) => {
  console.log('upgrading from', e.oldVersion, 'to', e.newVersion);
};

Пошаговые миграции

Надёжный подход — последовательное выполнение блоков на основе oldVersion: каждый блок дополняет предыдущий, поэтому пользователь с любой старой версией получает последнюю схему.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (e.oldVersion < 1) {
    db.createObjectStore('notes', { keyPath: 'id' });
  }
  if (e.oldVersion < 2) {
    db.createObjectStore('tags', { keyPath: 'name' });
  }
};

Добавление индекса позже

Чтобы добавить индекс в существующее хранилище во время обновления, получите хранилище из транзакции обновления и вызовите для него createIndex.

request.onupgradeneeded = (e) => {
  if (e.oldVersion < 3) {
    const store = e.target.transaction.objectStore('notes');
    store.createIndex('byDate', 'createdAt');
  }
};

Транзакция изменения версии

Во время onupgradeneeded свойство transaction события содержит специальную транзакцию versionchange. Только в этом контексте можно одновременно изменять схему и переносить данные.

request.onupgradeneeded = (e) => {
  const tx = e.target.transaction; // versionchange tx
  const store = tx.objectStore('notes');
  // migrate existing records here if needed
};

Перенос существующих данных

Если изменение схемы требует изменить структуру записей, переберите хранилище курсором во время обновления и сохраните преобразованные значения обратно с помощью put.

const store = e.target.transaction.objectStore('notes');
store.openCursor().onsuccess = (ev) => {
  const cursor = ev.target.result;
  if (cursor) {
    const note = cursor.value;
    note.archived = false; // new field
    cursor.update(note);
    cursor.continue();
  }
};

Событие изменения версии

Когда одна вкладка выполняет обновление, другие вкладки со старой версией получают событие изменения версии на своём db. Им следует закрыться, чтобы не блокировать обновление.

db.onversionchange = () => {
  db.close(); // let the other tab upgrade
  console.log('database is outdated, please reload');
};

Удаление хранилищ

Во время обновления можно удалить устаревшее хранилище с помощью db.deleteObjectStore(name). Оно и содержащиеся в нём данные будут удалены безвозвратно.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (e.oldVersion < 4 && db.objectStoreNames.contains('temp')) {
    db.deleteObjectStore('temp');
  }
};

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете версии и обновления.

Итоги

Вы изучили версии и обновления:

Увеличивайте номер версии, чтобы запустить onupgradeneeded.
Используйте oldVersion для пошаговых идемпотентных миграций.
Транзакция versionchange при обновлении изменяет схему и данные.
Переносите записи с помощью курсора и cursor.update.
Закрывайте старые вкладки при событии versionchange.

Вы завершили изучение IndexedDB. Далее — сервисные воркеры.

Часто задаваемые вопросы

Урок «Версионирование и обновления» бесплатный?

Да — полный текст урока «Версионирование и обновления» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Версионирование и обновления»?

Переносите схемы при изменении версий. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Версионирование и обновления»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy