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. Um den Kreis zu schließen, zeigt dieser Artikel, wie Datenbanken von Web SQL zu SQLite Wasm migriert werden.
Datenbanken migrieren
Die folgenden vier Schritte veranschaulichen die konzeptionelle Idee der Migration einer Web SQL-Datenbank zu SQLite Wasm. Die SQLite-Datenbank wird dabei vom ursprünglichen privaten Dateisystem unterstützt. Dieser Code 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 Daten haben, die für Ihre App relevant sind. Im folgenden Screenshot sehen Sie eine Beispieldatenbank namens mydatabase mit einer Tabelle für Regenschauer, in der Stimmungen Schweregraden 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
Um die Daten auf eine für den Benutzer transparente Weise zu migrieren, d. h., ohne dass diese die Migrationsschritte selbst durchführen müssen, müssen die Daten in der Datenbank zurück in die ursprünglichen SQL-Anweisungen übersetzt werden, die sie erstellt haben. Dieses Problem ist schon einmal aufgetreten. 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.
}
});
Das Ausführen dieses Codes führt zum unten stehenden 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
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, unterstützt vom 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);
}
})();
Nachdem Sie den Code ausgeführt haben, überprüfen Sie die importierte Datenbankdatei mit der Chrome DevTools-Erweiterung OPFS Explorer. Es gibt jetzt zwei Dateien, eine mit der eigentlichen Datenbank und eine mit Journalinformationen. 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. Verwenden Sie nach dem Speichern der Datenbankdatei eine SQLite Viewer-App, um die Daten zu untersuchen. In Project Fugu API Showcase finden Sie verschiedene Apps für die Arbeit mit SQLite im Browser. Mit Sqlime — SQLite Playground können Sie beispielsweise eine SQLite-Datenbankdatei auf 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
Nach der Migration können Sie mit den Daten arbeiten, wie in diesem Codebeispiel zum Einstieg beschrieben. Einzelheiten finden Sie in der Referenz zur SQLite Wasm API. Zur Erinnerung: Wenn Sie das ursprüngliche private Dateisystem als Speicher-Backend verwenden, müssen Sie von einem Worker aus auf SQLite Wasm zugreifen.
Jetzt 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 befreien Sie Speicherplatz, 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.