Von Web SQL zu SQLite Wasm: Leitfaden zur Datenbankmigration

SQLite Wasm, das auf dem privaten Dateisystem des Ursprungs basiert, ist ein vielseitiger Ersatz für die eingestellte Web SQL-Datenbanktechnologie. In diesem Artikel wird beschrieben, wie Sie Ihre Daten von Web SQL zu SQLite Wasm migrieren.

Erforderlicher Hintergrund

Im Beitrag Web SQL einstellen und entfernen wurde die Einstellung der Web SQL-Datenbanktechnologie angekündigt. Die Technologie selbst ist zwar möglicherweise veraltet, die Anwendungsfälle, die durch die Technologie abgedeckt werden, sind es jedoch nicht. Im Folgebeitrag SQLite Wasm in the browser backed by the Origin Private File System (SQLite Wasm im Browser, unterstützt durch das Origin Private File System) werden daher Ersatztechnologien auf Grundlage der SQLite-Datenbank beschrieben, die in WebAssembly kompiliert (Wasm) und durch das Origin Private File System unterstützt werden. In diesem Artikel wird beschrieben, wie Sie Datenbanken von Web SQL zu SQLite Wasm migrieren.

Datenbanken migrieren

Die folgenden vier Schritte veranschaulichen die konzeptionelle Idee der Migration einer Web SQL-Datenbank zu SQLite Wasm, wobei die SQLite-Datenbank durch das private Dateisystem des Ursprungs gesichert wird. Dieser Code kann als Grundlage für Ihren eigenen Code dienen, der an Ihre Web SQL-Migrationsanforderungen angepasst ist.

Die zu migrierenden Web SQL-Datenbanken

In dieser Migrationsanleitung wird davon ausgegangen, dass Sie eine oder mehrere vorhandene Web SQL-Datenbanken haben, die für Ihre App relevante Daten enthalten. Im Screenshot unten sehen Sie eine Beispieldatenbank mit dem Namen mydatabase mit einer Tabelle „rainstorms“, in der Stimmungen Schweregraden zugeordnet werden. Mit den Chrome-Entwicklertools können Sie Web SQL-Datenbanken zur Fehlerbehebung ansehen, wie im folgenden Screenshot dargestellt.

Eine Web SQL-Datenbank, die in den Chrome-Entwicklertools untersucht wird. Die Datenbank heißt „mydatabase“ und enthält eine Tabelle mit drei Spalten: „row ID“, „mood“ und „severity“. Es gibt drei Zeilen mit Beispieldaten.

Web SQL-Datenbank in SQL-Anweisungen übersetzen

Damit die Daten für den Nutzer transparent migriert werden können, d. h. ohne dass er selbst Migrationsschritte ausführen muss, müssen die Daten in der Datenbank in die ursprünglichen SQL-Anweisungen zurückübersetzt werden, mit denen sie erstellt wurden. Diese Herausforderung ist schon einmal aufgetreten. Das in diesem Artikel verwendete Migrationsskript – mywebsqldump.js – basiert auf einer Community-Bibliothek namens websqldump.js, mit einigen geringfügigen Anpassungen. Das folgende Codebeispiel zeigt den Code, der zum Übersetzen der Web SQL-Datenbank mydatabase in eine Reihe von SQL-Anweisungen erforderlich ist.

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

Die Ausführung dieses Codes führt zum folgenden String mit SQL-Anweisungen.

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

Daten in SQLite Wasm importieren

Jetzt müssen Sie nur noch diese SQL-Befehle im Kontext von SQLite Wasm ausführen. Alle Details zur Einrichtung von SQLite Wasm finden Sie im Artikel SQLite Wasm im Browser mit Unterstützung des Origin Private File System. Die wichtigsten Informationen sind jedoch unten aufgeführt. Dieser Code muss in einem Worker ausgeführt werden, der von der Bibliothek automatisch erstellt wird. Die erforderlichen HTTP-Header müssen richtig festgelegt sein. Sie können das Paket @sqlite.org/sqlite-wasm über npm installieren.

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

(as>ync () = {
  try {
    const promiser = await new Promise((re>solve) = {
      const _promiser = sqlite3Worker1Promiser({
        onrea>dy: () = {
          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);
  }
})();

Nachdem Sie diesen Code ausgeführt haben, können Sie die importierte Datenbankdatei mit der Chrome-Entwicklertools-Erweiterung OPFS Explorer untersuchen. Es gibt jetzt zwei Dateien: eine mit der eigentlichen Datenbank und eine mit Journaling-Informationen. Diese beiden Dateien befinden sich im privaten Dateisystem des Ursprungs. Sie müssen also die OPFS Explorer-Erweiterung verwenden, um sie zu sehen.

Untersuchen des privaten Dateisystems des Ursprungs mit dem OPFS Explorer in den Chrome-Entwicklertools. Es gibt zwei Dateien: „mydatabase.db“ und „mydatabase.db-journal“.

Um zu prüfen, ob die importierten Daten mit den ursprünglichen Web SQL-Daten übereinstimmen, klicken Sie auf die Datei mydatabase.db. Die OPFS Explorer-Erweiterung zeigt dann das Dialogfeld Datei speichern an, in dem Sie die Datei im für den Nutzer sichtbaren Dateisystem speichern können. Nachdem Sie die Datenbankdatei gespeichert haben, können Sie die Daten mit einer SQLite-Viewer-App ansehen. Im Project Fugu API Showcase finden Sie mehrere Apps für die Arbeit mit SQLite im Browser. Mit Sqlime – SQLite Playground können Sie beispielsweise eine SQLite-Datenbankdatei von Ihrer Festplatte öffnen und Abfragen für die Datenbank ausführen. Wie im Screenshot unten zu sehen ist, wurde die Tabelle „rainstorm“ korrekt in SQLite importiert.

Die Datei „mydatabase.db“ im Sqlime SQLite Playground-Tool untersuchen. Die App wird mit der ausgeführten SQL-Abfrage „select star from rainstorms limit 10“ angezeigt, was zu den drei Zeilen aus den ursprünglichen Beispieldaten aus Web SQL führt.

Web SQL-Speicher freigeben

Es ist (vielleicht überraschenderweise) nicht möglich, eine Web SQL-Datenbank zu löschen. Sie sollten jedoch Speicherplatz freigeben, indem Sie die jetzt obsoleten Web SQL-Tabellen löschen, nachdem Sie die Daten in SQLite Wasm migriert haben. Wenn Sie alle Tabellen in einer Web SQL-Datenbank auflisten und sie mit JavaScript löschen möchten, verwenden Sie Code wie im folgenden Snippet:

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);
            });
          }
          cons>ole.log(`Dropped table${tableNames.length  1 ? 's' : ''}: ${tableNames.join(', ')}.`);
        }
      );
    });
  } catch (err) {
    console.error(err.name, err.message);
  }
};

Mit den Daten nach der Migration arbeiten

Nachdem Sie die Daten migriert haben, können Sie sie wie in diesem Codebeispiel für den Einstieg beschrieben verwenden. Weitere Informationen finden Sie in der SQLite Wasm API-Referenz. Zur Erinnerung: Sie müssen über einen Worker auf SQLite Wasm zugreifen, wenn Sie das origin-private Dateisystem als Speicher-Backend verwenden.

Ausprobieren

In dieser Demo können Sie eine Web SQL-Datenbank mit Beispieldaten füllen und die Web SQL-Daten dann als SQL-Anweisungen ausgeben, die anschließend in SQLite Wasm importiert werden, das vom privaten Dateisystem des Ursprungs unterstützt wird. Schließlich geben Sie Speicherplatz kostenlos, indem Sie die veralteten Web SQL-Daten löschen. Den vollständigen Code, einschließlich der gepatchten Datei mywebsqldump.js, finden Sie im Quellcode.

Die Demo-App unter web-sql-to-sqlite-wasm.glitch.me.

Zusammenfassung

Die Migration Ihrer Web SQL-Datenbanken zu SQLite Wasm, das vom privaten Dateisystem des Ursprungs unterstützt wird, ist für Ihre Nutzer transparent möglich. Sie werden nicht bemerken, dass ihre Daten jetzt in einer SQLite-Datenbank im privaten Dateisystem des Ursprungs gehostet werden und nicht mehr in Web SQL. Insgesamt ist die Migration von Web SQL zu SQLite ein notwendiger Schritt für Webentwickler, die die langfristige Stabilität und Skalierbarkeit ihrer Anwendungen sicherstellen möchten. Der Prozess erfordert zwar einen gewissen anfänglichen Aufwand, aber die Vorteile einer robusteren, flexibleren und vor allem zukunftssicheren Datenbanklösung machen die Investition lohnenswert.