Con SQLite Wasm respaldado por el sistema de archivos privados de origen, hay un reemplazo versátil para la tecnología de base de datos Web SQL obsoleta. Este artículo es una guía para migrar tus datos de Web SQL a SQLite Wasm.
Antecedentes obligatorios
En la publicación Baja y eliminación de Web SQL, se anunció que la tecnología de base de datos Web SQL dejará de estar disponible. Si bien la tecnología en sí puede quedar obsoleta, los casos de uso que aborda en gran medida no lo son, por lo que en la publicación de seguimiento SQLite Wasm en el navegador respaldado por Origin Private File System, describe un conjunto de tecnologías de reemplazo basado en la base de datos SQLite, compilada en Web Assembly (Wasm) y respaldada por el sistema de archivos privados de origen. Para cerrar el círculo, este artículo 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 Web SQL a SQLite Wasm, con la base de datos SQLite respaldada por el sistema de archivos privados de 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 SQL web que se migrarán
La suposición de referencia de esta guía de migración es que tienes una (o varias) bases de datos de Web SQL existentes que contienen datos relevantes para tu app. En la siguiente captura de pantalla, verás una base de datos de ejemplo llamada mydatabase con una tabla de tormentas que asigna estados de ánimo a la gravedad. Las Herramientas para desarrolladores de Chrome te permiten ver las bases de datos de Web SQL para la depuración, como se muestra en la siguiente captura de pantalla.
Traduce la base de datos web de SQL a instrucciones de SQL
Para migrar los datos de una manera que sea transparente para el usuario, es decir, sin necesidad de que realicen los pasos de migración por su cuenta, los fragmentos de datos de la base de datos deben traducirse a las instrucciones de SQL originales que las crearon en primer lugar. Este desafío ya se presentó, y la secuencia de comandos de migración que se usa en este artículo, mywebsqldump.js, se basa en una biblioteca comunitaria llamada websqldump.js, con algunos ajustes menores. En la siguiente muestra de código, se indica el código necesario para traducir la base de datos web de SQL mydatabase a un conjunto de instrucciones de SQL.
websqldump.export({
database: 'mydatabase',
version: '1.0',
success: function(sql) {
// The SQL statements.
},
error: function(err) {
// Handle the error.
}
});
Cuando ejecutas este código, se genera la siguiente cadena de instrucciones de 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
Solo falta 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 en el navegador respaldado por Origin Private File System, pero el eslogan se encuentra a continuación. Recuerda que este código se debe ejecutar en un trabajador (que la biblioteca crea automáticamente para ti) con los encabezados HTTP necesarios 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 para las Herramientas para desarrolladores de Chrome. Ahora hay dos archivos, uno con la base de datos real y otro con información de diario. Ten en cuenta que estos dos archivos se alojan en el sistema de archivos privados de origen, por lo que deberás usar la extensión OPFS Explorer para verlos.
Para verificar realmente 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 de OPFS Explorer mostrará el diálogo Save File que te permitirá guardar el archivo en el sistema de archivos visible para el usuario. Con el archivo de base de datos guardado, usa una app de visualización de SQLite para explorar los datos. Project Fugu API Showcase incluye 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 puedes ver en la siguiente captura de pantalla, la tabla de tormenta de lluvia se importó correctamente a SQLite.
Libera almacenamiento Web SQL
Si bien es imposible borrar una base de datos Web SQL (tal vez te sorprenda), deberías liberar algo de almacenamiento descartando las tablas de Web SQL, que ahora son 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);
}
};
Trabaja con los datos después de la migración
Después de migrar los datos, trabaja con ellos como se describe en esta muestra de código de introducción. Consulta la referencia de la API de SQLite Wasm para obtener más detalles. Una vez más, te recordamos que debes acceder a SQLite Wasm desde un trabajador si usas el sistema de archivos privados de origen como tu backend de almacenamiento.
Pruébalo
Esta demostración te permite completar una base de datos Web SQL con datos de muestra y, luego, volcar los datos de Web SQL como instrucciones de SQL, que luego se importan a SQLite Wasm respaldado por el sistema de archivos privados de origen. Por último, puedes liberar almacenamiento borrando los datos de SQL Web obsoletos. Verifica el código fuente para ver la implementación completa, incluido el archivo mywebsqldump.js con parche.
Conclusiones
Es posible migrar tus bases de datos de Web SQL a SQLite Wasm respaldados por el sistema de archivos privados de origen de una manera transparente para tus usuarios. No notarán que sus datos ahora están alojados 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 escalabilidad a largo plazo de sus aplicaciones. Aunque 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.