JavaScript Academy · Leçon

Gestion des versions et mises à niveau

Faites migrer les schémas lors des changements de version.

Gestion des versions et mises à niveau est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Pourquoi gérer les versions ?

Les applications évoluent : vous ajoutez des magasins, des index ou modifiez la structure des données. IndexedDB utilise un numéro de version pour gérer ces changements de schéma en toute sécurité dans le navigateur de chaque utilisateur.

Le numéro de version

Le deuxième argument de open est la version, un entier positif. L’augmenter indique au navigateur que le schéma a changé et déclenche une mise à niveau.

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

La version ne peut qu’augmenter

Vous pouvez uniquement augmenter la version. Ouvrir la base avec un numéro inférieur à celui qui est enregistré échoue avec une erreur. Ne diminuez jamais la version.

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

oldVersion et newVersion

Dans onupgradeneeded, l’événement expose oldVersion et newVersion. Utilisez-les pour appliquer uniquement les migrations qui n’ont pas encore été exécutées.

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

Migrations incrémentielles

Une méthode robuste consiste à utiliser un enchaînement basé sur oldVersion : chaque bloc s’appuie sur le précédent afin qu’un utilisateur utilisant n’importe quelle ancienne version atteigne le dernier schéma.

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

Ajouter un index ultérieurement

Pour ajouter un index à un magasin existant pendant une mise à niveau, récupérez le magasin depuis la transaction de mise à niveau, puis appelez createIndex dessus.

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

La transaction de changement de version

Pendant onupgradeneeded, la transaction de l’événement est une transaction spéciale de type versionchange. C’est le seul contexte dans lequel vous pouvez modifier le schéma et migrer les données.

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

Migrer les données existantes

Si une modification du schéma nécessite de restructurer les enregistrements, parcourez le magasin avec un cursor pendant la mise à niveau, puis réenregistrez les valeurs transformées avec 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();
  }
};

L’événement de changement de version

Lorsqu’un onglet effectue une mise à niveau, les autres onglets qui utilisent l’ancienne version reçoivent un événement versionchange sur leur db. Ils doivent se fermer afin de ne pas bloquer la mise à niveau.

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

Supprimer des magasins

Vous pouvez supprimer un magasin obsolète pendant une mise à niveau avec db.deleteObjectStore(name). Cette opération le supprime définitivement, ainsi que ses données.

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

Bonnes pratiques pour les mises à niveau

Veillez à ce que les migrations soient idempotentes et ordonnées selon oldVersion, fermez les anciennes connexions lors de versionchange et testez les mises à niveau depuis chaque version précédente. Les données des utilisateurs existants restent ainsi intactes.

Vérification rapide

Testez votre compréhension de la gestion des versions et des mises à niveau.

Récapitulatif

Vous avez appris à gérer les versions et les mises à niveau :

Augmentez le numéro de version pour déclencher onupgradeneeded.
Utilisez oldVersion pour des migrations incrémentielles et idempotentes.
La transaction versionchange de la mise à niveau modifie le schéma et les données.
Migrez les enregistrements avec un cursor et cursor.update.
Fermez les anciens onglets lors de l’événement versionchange.

Vous avez terminé le chapitre IndexedDB. Ensuite, vous découvrirez les agents de service.

Questions Fréquemment Posées

La leçon « Gestion des versions et mises à niveau » est-elle gratuite ?

Oui — le texte complet de « Gestion des versions et mises à niveau » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Gestion des versions et mises à niveau » ?

Faites migrer les schémas lors des changements de version. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Gestion des versions et mises à niveau » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy