De Web SQL vers SQLite Wasm: guide de migration des bases de données

Avec SQLite Wasm soutenu par le système de fichiers privé d'origine, il existe un remplacement polyvalent pour la technologie de base de données Web SQL obsolète. Cet article explique comment migrer vos données de Web SQL vers SQLite Wasm.

Thomas Steiner

Connaissances requises

L'article Abandon et suppression de Web SQL annonçait l'abandon de la technologie de base de données Web SQL. Bien que la technologie elle-même puisse être obsolète, les cas d'utilisation qu'elle permet de résoudre ne le sont pas. L'article suivant, SQLite Wasm in the browser backed by the Origin Private File System, présente un ensemble de technologies de remplacement basées sur la base de données SQLite, compilées en WebAssembly (Wasm) et soutenues par le système de fichiers privés d'origine. Pour boucler la boucle, cet article explique comment migrer des bases de données de Web SQL vers SQLite Wasm.

Migrer vos bases de données

Les quatre étapes suivantes illustrent l'idée conceptuelle de la migration d'une base de données Web SQL vers SQLite Wasm, avec la base de données SQLite soutenue par le système de fichiers privés d'origine. Il peut servir de base pour votre propre code personnalisé en fonction de vos besoins de migration Web SQL.

Base(s) de données Web SQL à migrer

L'hypothèse de base de ce guide de migration est que vous disposez d'une ou plusieurs bases de données Web SQL existantes contenant des données pertinentes pour votre application. La capture d'écran ci-dessous montre un exemple de base de données appelée mydatabase avec une table "rainstorms" qui mappe les humeurs aux niveaux de gravité. Les outils pour les développeurs Chrome vous permettent d'afficher les bases de données Web SQL pour le débogage, comme illustré dans la capture d'écran suivante.

Traduire la base de données Web SQL en instructions SQL

Pour migrer les données de manière transparente pour l'utilisateur, c'est-à-dire sans qu'il ait à effectuer lui-même les étapes de migration, les éléments de données de la base de données doivent être retraduits dans les instructions SQL d'origine qui les ont créés. Ce défi a déjà été relevé, et le script de migration utilisé dans cet article – mywebsqldump.js – est basé sur une bibliothèque communautaire appelée websqldump.js, avec quelques ajustements mineurs. L'exemple de code suivant montre le code requis pour traduire la base de données Web SQL mydatabase en un ensemble d'instructions SQL.

websqldump.export({
  database: 'mydatabase',
  version: '1.0',
  success: function(sql) {
    // The SQL statements.
  },
  error: function(err) {
    // Handle the error.
  }
});

L'exécution de ce code génère la chaîne d'instructions SQL ci-dessous.

CREATE TABLE IF NOT EXISTS rainstorms (mood text, severity int);
INSERT INTO rainstorms(mood,severity) VALUES ('somber','6');
INSERT INTO rainstorms(mood,severity) VALUES ('rainy','8');
INSERT INTO rainstorms(mood,severity) VALUES ('stormy','2');

Importer les données dans SQLite Wasm

Il ne reste plus qu'à exécuter ces commandes SQL dans le contexte de SQLite Wasm. Pour en savoir plus sur la configuration de SQLite Wasm, je vous renvoie à l'article SQLite Wasm dans le navigateur avec le système de fichiers privés d'origine, mais l'essentiel est à nouveau ci-dessous. N'oubliez pas que ce code doit s'exécuter dans un Worker (que la bibliothèque crée automatiquement pour vous), avec les en-têtes HTTP requis correctement définis. Vous pouvez installer le package @sqlite.org/sqlite-wasm à partir de npm.

import { sqlite3Worker1Promiser } from '@sqlite.org/sqlite-wasm';

(async () => {
  try {
    const promiser = await new Promise((resolve) => {
      const _promiser = sqlite3Worker1Promiser({
        onready: () => {
          resolve(_promiser);
        },
      });
    });

    let response;

    response = await promiser('open', {
      filename: 'file:mydatabase.db?vfs=opfs',
    });
    const { dbId } = response;

    const sql = `
      CREATE TABLE IF NOT EXISTS rainstorms (mood text, severity int);
      INSERT INTO rainstorms(mood,severity) VALUES ('somber','6');
      INSERT INTO rainstorms(mood,severity) VALUES ('rainy','8');
      INSERT INTO rainstorms(mood,severity) VALUES ('stormy','2');`
    await promiser('exec', { dbId, sql });

    await promiser('close', { dbId });
  } catch (err) {
    if (!(err instanceof Error)) {
      err = new Error(err.result.message);
    }
    console.error(err.name, err.message);
  }
})();

Après avoir exécuté ce code, inspectez le fichier de base de données importé avec l'extension Chrome DevTools OPFS Explorer. Il existe maintenant deux fichiers : l'un contenant la base de données proprement dite et l'autre contenant les informations de journalisation. Notez que ces deux fichiers se trouvent dans le système de fichiers privé d'origine. Vous devez donc utiliser l'extension OPFS Explorer pour les voir.

Pour vérifier que les données importées sont identiques aux données Web SQL initiales, cliquez sur le fichier mydatabase.db. L'extension OPFS Explorer affichera une boîte de dialogue Save File (Enregistrer le fichier) pour vous permettre d'enregistrer le fichier dans le système de fichiers visible par l'utilisateur. Une fois le fichier de base de données enregistré, utilisez une application de visualisation SQLite pour explorer les données. La vitrine des API Project Fugu présente plusieurs applications permettant d'utiliser SQLite dans le navigateur. Par exemple, Sqlime — SQLite Playground vous permet d'ouvrir un fichier de base de données SQLite à partir de votre disque dur et d'exécuter des requêtes sur la base de données. Comme vous pouvez le voir sur la capture d'écran ci-dessous, la table "rainstorm" a été correctement importée dans SQLite.

Libérer de l'espace de stockage Web SQL

Bien qu'il soit (peut-être étonnamment) impossible de supprimer une base de données Web SQL, vous devez tout de même libérer de l'espace de stockage en supprimant les tables Web SQL désormais obsolètes après avoir migré les données vers SQLite Wasm. Pour lister toutes les tables d'une base de données Web SQL et les supprimer à l'aide de JavaScript, utilisez le code de l'extrait suivant :

const dropAllTables = () => {
  try {
    db.transaction(function (tx) {
      tx.executeSql(
        "SELECT name FROM sqlite_master WHERE type='table' AND name !='__WebKitDatabaseInfoTable__'",
        [],
        function (tx, result) {
          const len = result.rows.length;
          const tableNames = [];
          for (let i = 0; i < len; i++) {
            const tableName = result.rows.item(i).name;
            tableNames.push(`'${tableName}'`);
            db.transaction(function (tx) {
              tx.executeSql('DROP TABLE ' + tableName);
            });
          }
          console.log(`Dropped table${tableNames.length > 1 ? 's' : ''}: ${tableNames.join(', ')}.`);
        }
      );
    });
  } catch (err) {
    console.error(err.name, err.message);
  }
};

Utiliser les données après la migration

Une fois les données migrées, utilisez-les comme indiqué dans cet exemple de code de démarrage. Pour en savoir plus, consultez la documentation de référence de l'API SQLite Wasm. Nous vous rappelons que vous devez accéder à SQLite Wasm depuis un Worker si vous utilisez le système de fichiers privé d'origine comme backend de stockage.

Conclusions

Vous pouvez migrer vos bases de données Web SQL vers SQLite Wasm, qui est soutenu par le système de fichiers privé d'origine, de manière transparente pour vos utilisateurs. Ils ne remarqueront pas que leurs données sont désormais hébergées dans le système de fichiers privé d'origine dans une base de données SQLite, et non plus dans Web SQL. Dans l'ensemble, la migration de Web SQL vers SQLite est une étape nécessaire pour les développeurs Web qui souhaitent assurer la stabilité et l'évolutivité à long terme de leurs applications. Bien que le processus puisse nécessiter un effort initial, les avantages d'une solution de base de données plus robuste, flexible et, surtout, pérenne valent bien l'investissement.