JavaScript Academy · Lección

Versionado y actualizaciones

Migre esquemas al cambiar de versión.

Versionado y actualizaciones es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Por qué usar versiones?

Las aplicaciones evolucionan: puede añadir almacenes, añadir índices o cambiar la estructura de los datos. IndexedDB utiliza un número de versión para gestionar de forma segura estos cambios del esquema en el navegador de cada usuario.

El número de versión

El segundo argumento de open es la versión, un entero positivo. Aumentarlo indica al navegador que el esquema ha cambiado y activa una actualización.

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

La versión solo puede aumentar

Solo puede aumentar la versión. Si la abre con un número inferior al almacenado, se producirá un error. Nunca la reduzca.

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

oldVersion y newVersion

Dentro de onupgradeneeded, el evento expone oldVersion y newVersion. Úselos para aplicar únicamente las migraciones que aún no se hayan ejecutado.

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

Migraciones incrementales

Un patrón sólido consiste en continuar la ejecución usando oldVersion: cada bloque se basa en el anterior, de modo que un usuario con cualquier versión antigua llegue al esquema más reciente.

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

Añadir un índice más adelante

Para añadir un índice a un almacén existente durante una actualización, obtenga el almacén de la transacción de actualización y llame a createIndex en él.

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

La transacción versionchange

Durante onupgradeneeded, el transaction del evento es una transacción especial de tipo versionchange. Es el único contexto en el que se pueden modificar el esquema y migrar los datos.

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

Migrar datos existentes

Si un cambio de esquema requiere modificar la estructura de los registros, recorra el almacén con un cursor durante la actualización y vuelva a guardar los valores transformados mediante 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();
  }
};

El evento versionchange

Cuando una pestaña realiza una actualización, las demás pestañas que mantienen abierta la versión anterior reciben un evento versionchange en su objeto db. Deben cerrarse para que la actualización no se bloquee.

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

Eliminar almacenes

Puede eliminar un almacén obsoleto durante una actualización mediante db.deleteObjectStore(name). Esto lo elimina permanentemente junto con sus datos.

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

Buenas prácticas para las actualizaciones

Mantenga las migraciones idempotentes y ordenadas según oldVersion, cierre las conexiones antiguas cuando se produzca versionchange y pruebe las actualizaciones desde cada versión anterior. Así conservará intactos los datos de los usuarios que regresen.

Comprobación rápida

Compruebe su comprensión del versionado y las actualizaciones.

Repaso

Ha aprendido sobre versionado y actualizaciones:

Aumente el número de versión para activar onupgradeneeded.
Use oldVersion para realizar migraciones incrementales e idempotentes.
La transacción versionchange de la actualización modifica el esquema y los datos.
Migre los registros con un cursor y cursor.update.
Cierre las pestañas antiguas cuando se produzca el evento versionchange.

Ha terminado IndexedDB. A continuación, Service Workers.

Preguntas frecuentes

¿La lección «Versionado y actualizaciones» es gratis?

Sí — el texto completo de «Versionado y actualizaciones» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Versionado y actualizaciones»?

Migre esquemas al cambiar de versión. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Versionado y actualizaciones»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy