Mit SQLite Wasm, das vom ursprünglichen privaten Dateisystem unterstützt wird, gibt es einen vielseitigen Ersatz für die eingestellte Web SQL-Datenbanktechnologie. In diesem Artikel erfahren Sie, wie Sie Ihre Daten von Web SQL zu SQLite Wasm migrieren.
Erforderlicher Hintergrund
Im Blogpost Verwerfen und Entfernen von Web SQL wurde die Einstellung der Web SQL-Datenbanktechnologie angekündigt. Die Technologie selbst wird zwar eingestellt, die Anwendungsfälle, für die sie verwendet wird, jedoch nicht. Im nachfolgenden Beitrag SQLite Wasm im Browser, unterstützt vom Origin Private File System werden Ersatztechnologien beschrieben, die auf der SQLite-Datenbank basieren, in Web Assembly kompiliert (Wasm) und vom Origin Private File System unterstützt werden. In diesem Artikel erfahren Sie, 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 vom ursprünglichen privaten Dateisystem unterstützt wird. Dieser kann als Grundlage für Ihren eigenen Code dienen, der auf Ihre Anforderungen an die Web SQL-Migration zugeschnitten ist.
Die zu migrierenden Web SQL-Datenbanken
In diesem Migrationsleitfaden wird davon ausgegangen, dass Sie eine oder mehrere Web SQL-Datenbanken mit für Ihre App relevanten Daten haben. Im folgenden Screenshot sehen Sie eine Beispieldatenbank namens mydatabase mit einer Tabelle für Regenschauer, in der Stimmungen auf Schweregrade zugeordnet werden. Mit den Chrome-Entwicklertools können Sie WebSQL-Datenbanken zum Debuggen aufrufen, wie im folgenden Screenshot dargestellt.
Web SQL-Datenbank in SQL-Anweisungen übersetzen
Damit die Daten für den Nutzer transparent migriert werden können, also ohne dass er die Migrationsschritte selbst 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. Dieses Problem ist uns schon einmal untergekommen. Das in diesem Artikel verwendete Migrationsskript mywebsqldump.js basiert auf einer Community-Bibliothek namens websqldump.js, die mit einigen kleinen Anpassungen verwendet wird. Im folgenden Codebeispiel wird der Code gezeigt, der erforderlich ist, um die Web SQL-Datenbank mydatabase in eine Reihe von SQL-Anweisungen umzuwandeln.
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 SQL-Anweisungsstring.
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
Es bleibt nur noch, diese SQL-Befehle im Kontext von SQLite Wasm auszuführen. Alle Details zur Einrichtung von SQLite Wasm finden Sie im Artikel SQLite Wasm im Browser, unterstützt durch das Origin Private File System. Die wichtigsten Informationen finden Sie aber auch unten. Dieser Code muss in einem Worker ausgeführt werden, der von der Bibliothek automatisch für Sie 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';
(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);
}
})();
Prüfen Sie nach Ausführung dieses Codes die importierte Datenbankdatei mit der Chrome-Entwicklertools-Erweiterung OPFS Explorer. Es gibt jetzt zwei Dateien, eine mit der eigentlichen Datenbank und eine mit Journaling-Informationen. Diese beiden Dateien befinden sich im ursprünglichen privaten Dateisystem. Sie können sie also nur mit der OPFS Explorer-Erweiterung sehen.
Wenn Sie prüfen möchten, 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 Nutzer sichtbaren Dateisystem speichern können. Nachdem Sie die Datenbankdatei gespeichert haben, können Sie die Daten mit einer SQLite-Viewer-App analysieren. Der Project Fugu API Showcase bietet 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 in der Datenbank ausführen. Wie Sie im Screenshot unten sehen, wurde die Tabelle „Regenschauer“ korrekt in SQLite importiert.
Web SQL-Speicher freigeben
Es ist zwar (vielleicht überraschend) nicht möglich, eine Web SQL-Datenbank zu löschen, Sie sollten aber trotzdem Speicherplatz freigeben, indem Sie die jetzt veralteten 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);
});
}
console.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, arbeiten Sie mit den Daten wie im Codebeispiel für den Einstieg beschrieben. Weitere Informationen finden Sie in der SQLite Wasm API-Referenz. Zur Erinnerung: Wenn Sie das ursprüngliche private Dateisystem als Speicher-Backend verwenden, müssen Sie von einem Worker aus auf SQLite Wasm zugreifen.
Testen
In dieser Demo können Sie eine Web SQL-Datenbank mit Beispieldaten füllen und die Web SQL-Daten dann als SQL-Anweisungen dumpen, die anschließend in SQLite Wasm importiert werden, das vom ursprünglichen privaten Dateisystem unterstützt wird. Zum Schluss können Sie Speicherplatz freigeben, indem Sie die veralteten Web-SQL-Daten löschen. Im Quellcode finden Sie die vollständige Implementierung, einschließlich der gepatchten Datei mywebsqldump.js.
Ergebnisse
Die Migration Ihrer Web SQL-Datenbanken zu SQLite Wasm, die vom ursprünglichen privaten Dateisystem unterstützt wird, ist für Ihre Nutzer transparent möglich. Sie werden nicht bemerken, dass ihre Daten jetzt im privaten Dateisystem des Ursprungs in einer SQLite-Datenbank 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 Vorgang erfordert zwar etwas anfänglichen Aufwand, die Vorteile einer robusteren, flexibleren und vor allem zukunftsfähigen Datenbanklösung machen die Investition jedoch lohnenswert.