SQLite Wasm s'appuyant sur le système de fichiers privé d'origine, il existe un moyen polyvalent de remplacer la technologie de base de données Web SQL obsolète. Cet article vous explique comment migrer vos données de Web SQL vers SQLite Wasm.
Arrière-plan obligatoire
L'article Abandon et suppression de Web SQL annonçait l'abandon de la technologie de base de données Web SQL. Même si la technologie elle-même est obsolète, ce n'est pas le cas des cas d'utilisation traités par la technologie. C'est pourquoi l'article de suivi SQLite Wasm dans le navigateur reposant sur le système de fichiers privés d'origine présente un ensemble de technologies de remplacement basé sur la base de données SQLite, compilée dans Web Assembly (Wasm) et reposant sur le système de fichiers privé d'origine. Pour fermer le cercle, 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 le concept de migration d'une base de données Web SQL vers SQLite Wasm, avec la base de données SQLite reposant sur le système de fichiers privé d'origine. Cela peut servir de base pour votre propre code personnalisé en fonction de vos besoins de migration Web SQL.
Bases de données Web SQL à migrer
L'hypothèse de base de ce guide de migration est que vous disposez d'une ou de plusieurs bases de données Web SQL contenant des données pertinentes pour votre application. Dans la capture d'écran ci-dessous, vous voyez un exemple de base de données appelé mydatabase avec une table "rainstorms" qui met en correspondance les humeurs et les niveaux de gravité. Les outils pour les développeurs Chrome vous permettent d'afficher les bases de données Web SQL à des fins de 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 la migration, les données de la base de données doivent être traduites dans les instructions SQL d'origine qui les ont créées. Ce défi est apparu par le passé, et le script de migration utilisé dans cet article (mywebsqldump.js) est basé sur une bibliothèque de la communauté appelée websqldump.js, avec quelques ajustements mineurs. L'exemple de code suivant présente le code requis pour traduire la base de données SQL Web 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, consultez l'article SQLite Wasm dans le navigateur sauvegardé par le système de fichiers privé d'origine, mais l'essentiel est repris ci-dessous. N'oubliez pas que ce code doit s'exécuter dans un nœud de calcul (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 pour OPFS Explorer. Il y a maintenant deux fichiers, l'un avec la base de données réelle et l'autre avec 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 affiche alors une boîte de dialogue Save File (Enregistrer le fichier) qui vous permet d'enregistrer le fichier dans le système de fichiers visible par l'utilisateur. Une fois le fichier de base de données enregistré, explorez les données à l'aide d'une application de lecture SQLite. La présentation de l'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 depuis votre disque dur et d'exécuter des requêtes sur la base de données. Comme vous pouvez le voir dans la capture d'écran ci-dessous, la table "rainstorm" a été correctement importée dans SQLite.
Libérer l'espace de stockage SQL Web
Bien qu'il soit (peut-être surprenant) impossible de supprimer une base de données Web SQL, vous devez quand même libérer de l'espace de stockage en supprimant les tables Web SQL obsolètes après avoir migré les données dans SQLite Wasm. Pour répertorier toutes les tables d'une base de données Web SQL et les supprimer à l'aide de JavaScript, utilisez le code indiqué dans l'extrait de code 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
Après avoir migré les données, utilisez-les comme indiqué dans cet exemple de code pour commencer. Pour en savoir plus, consultez la documentation de référence de l'API SQLite Wasm. Pour rappel, vous devez accéder à SQLite Wasm à partir d'un worker si vous utilisez le système de fichiers privé d'origine comme backend de stockage.
Effectuer un test
Cette démonstration vous permet d'alimenter une base de données Web SQL avec des exemples de données, puis de les vider sous forme d'instructions SQL, qui sont ensuite importées dans SQLite Wasm par le système de fichiers privé d'origine. Enfin, vous libérez de l'espace de stockage en supprimant les données Web SQL obsolètes. Consultez le code source pour obtenir l'implémentation complète, y compris le fichier mywebsqldump.js corrigé.
Conclusions
La migration de vos bases de données SQL Web vers SQLite Wasm reposant sur le système de fichiers privé d'origine est possible 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 d'une base de données SQLite et qu'elles ne résident 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 garantir la stabilité et l'évolutivité à long terme de leurs applications. Même si le processus peut nécessiter quelques efforts au départ, les avantages d'une solution de base de données plus robuste, plus flexible et surtout pérenne en valent la peine.