Con SQLite Wasm respaldado por el sistema de archivos privado del origen, hay un reemplazo versátil para la tecnología de base de datos Web SQL que dejó de estar disponible. En este artículo, se explica cómo migrar tus datos de Web SQL a SQLite Wasm.
Fondo requerido
En la entrada Baja y eliminación de Web SQL, se anunció la baja de la tecnología de base de datos Web SQL. Si bien la tecnología en sí puede estar obsoleta, los casos de uso que aborda la tecnología no lo están, por lo que la publicación de seguimiento SQLite Wasm in the browser backed by the Origin Private File System describe un conjunto de tecnologías de reemplazo basadas en la base de datos SQLite, compiladas en WebAssembly (Wasm) y respaldadas por el sistema de archivos privado del origen. Para cerrar el círculo, en este artículo, se muestra cómo migrar bases de datos de Web SQL a SQLite Wasm.
Migra tus bases de datos
En los siguientes cuatro pasos, se demuestra la idea conceptual de migrar una base de datos de Web SQL a SQLite Wasm, con la base de datos de SQLite respaldada por el sistema de archivos privado del origen. Esto puede servir como base para tu propio código personalizado según tus necesidades de migración de Web SQL.
Las bases de datos de Web SQL que se migrarán
La suposición básica de esta guía de migración es que tienes una (o varias) bases de datos Web SQL existentes que contienen datos relevantes para tu app. En la siguiente captura de pantalla, se muestra una base de datos de ejemplo llamada mydatabase con una tabla de tormentas que asigna estados de ánimo a niveles de gravedad. Las Herramientas para desarrolladores de Chrome te permiten ver bases de datos Web SQL para la depuración, como se muestra en la siguiente captura de pantalla.
Cómo traducir la base de datos de Web SQL a instrucciones de SQL
Para migrar los datos de una manera transparente para el usuario, es decir, sin que deba realizar ninguno de los pasos de migración por su cuenta, los fragmentos de datos de la base de datos deben volver a traducirse a las instrucciones SQL originales que los crearon en primer lugar. Este desafío ya se presentó antes, y la secuencia de comandos de migración que se usa en este artículo (mywebsqldump.js) se basa en una biblioteca de la comunidad llamada websqldump.js, con algunos ajustes menores. En la siguiente muestra de código, se muestra el código necesario para traducir la base de datos Web SQL mydatabase a un conjunto de instrucciones SQL.
websqldump.export({
database: 'mydatabase',
version: '1.0',
success: function(sql) {
// The SQL statements.
},
error: function(err) {
// Handle the error.
}
});
Cuando se ejecuta este código, se genera la siguiente cadena de instrucciones 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');
Cómo importar los datos a SQLite Wasm
Lo único que queda es ejecutar estos comandos SQL en el contexto de SQLite Wasm. Para obtener todos los detalles sobre la configuración de SQLite Wasm, consulta el artículo SQLite Wasm in the browser backed by the Origin Private File System, pero el resumen se encuentra a continuación. Recuerda que este código debe ejecutarse en un Worker (que la biblioteca crea automáticamente para ti) con los encabezados HTTP obligatorios configurados correctamente. Puedes instalar el paquete @sqlite.org/sqlite-wasm desde 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);
}
})();
Después de ejecutar este código, inspecciona el archivo de base de datos importado con la extensión OPFS Explorer de las Herramientas para desarrolladores de Chrome. Ahora hay dos archivos, uno con la base de datos real y otro con información de registro. Ten en cuenta que estos dos archivos se encuentran en el sistema de archivos privado del origen, por lo que debes usar la extensión OPFS Explorer para verlos.
Para verificar que los datos importados sean los mismos que los datos iniciales de Web SQL, haz clic en el archivo mydatabase.db y la extensión OPFS Explorer mostrará un diálogo Save File para que guardes el archivo en el sistema de archivos visible para el usuario. Una vez que se guarde el archivo de la base de datos, usa una app de visualización de SQLite para explorar los datos. En la Presentación de APIs de Project Fugu, se incluyen varias apps para trabajar con SQLite en el navegador. Por ejemplo, Sqlime — SQLite Playground te permite abrir un archivo de base de datos SQLite desde tu disco duro y ejecutar consultas en la base de datos. Como se ve en la siguiente captura de pantalla, la tabla de tormentas se importó correctamente a SQLite.
Cómo liberar almacenamiento de Web SQL
Si bien (quizás sorprendentemente) es imposible borrar una base de datos de Web SQL, debes liberar algo de almacenamiento borrando las tablas de Web SQL que ahora están obsoletas después de migrar los datos a SQLite Wasm. Para enumerar todas las tablas en una base de datos de Web SQL y descartarlas con JavaScript, usa código como en el siguiente fragmento:
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);
}
};
Cómo trabajar con los datos después de la migración
Después de migrar los datos, trabaja con ellos como se describe en este ejemplo de código para principiantes. Consulta la referencia de la API de SQLite Wasm para obtener más detalles. Nuevamente, te recordamos que debes acceder a SQLite Wasm desde un Worker si usas el sistema de archivos privados del origen como backend de almacenamiento.
Conclusiones
Es posible migrar tus bases de datos de Web SQL a SQLite Wasm respaldado por el sistema de archivos privados del origen de una manera transparente para tus usuarios. No notarán que sus datos ahora se alojan en el sistema de archivos privados de origen en una base de datos SQLite y que ya no se encuentran en Web SQL. En general, migrar de Web SQL a SQLite es un paso necesario para los desarrolladores web que desean garantizar la estabilidad y la escalabilidad a largo plazo de sus aplicaciones. Si bien el proceso puede requerir un esfuerzo inicial, los beneficios de una solución de base de datos más sólida, flexible y, sobre todo, preparada para el futuro hacen que valga la pena la inversión.