Con el Wasm de SQLite respaldado por el sistema de archivos privados de origen, existe 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.
Fondo obligatorio
En la entrada Da de baja y quita Web SQL, se anunció la baja de la tecnología de bases de datos de Web SQL. Si bien la tecnología en sí misma puede estar obsoleta, los casos de uso que aborda la tecnología no lo son. Por lo tanto, en la publicación de seguimiento SQLite Wasm en el navegador respaldado por el sistema de archivos privados de origen, se 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 la base de tu propio código personalizado para 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 aplicación. 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 niveles de gravedad. Las Herramientas para desarrolladores de Chrome te permiten ver bases de datos web de SQL para depurar, como se muestra en la siguiente captura de pantalla.
Traduce la base de datos Web de SQL a instrucciones de SQL
Con el fin de migrar los datos de forma transparente para el usuario, es decir, sin necesidad de que realice ninguno de los pasos de migración por su cuenta, los datos de la base de datos deben traducirse a las instrucciones de SQL originales que los crearon en primer lugar. Este desafío ya existe, 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 se ejecuta este código, se genera la cadena de instrucciones de SQL que se muestra a continuación.
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');
Importa los datos a SQLite Wasm
Lo que resta es ejecutar estos comandos de SQL en el contexto de SQLite Wasm. Para obtener todos los detalles sobre la configuración de SQLite Wasm, te recomiendo que consultes el artículo SQLite Wasm en el navegador respaldado por el sistema de archivos privados de origen, pero el resumen se encuentra a continuación. Recuerda que este código debe ejecutarse en un trabajador (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 la 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 del diario. Ten en cuenta que estos dos archivos se alojan en el sistema de archivos privados de 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á el diálogo Save File para que puedas guardarlo 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 se importó correctamente a SQLite.
Cómo liberar almacenamiento en Web SQL
Si bien es (sorprendente) imposible borrar una base de datos Web SQL, deberías liberar algo de almacenamiento eliminando las tablas de Web SQL obsoletas después de migrar los datos a SQLite Wasm. Para enumerar todas las tablas en una base de datos Web SQL y descartarlas con JavaScript, usa el 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 para comenzar. Consulta la referencia de la API de SQLite Wasm para obtener más detalles. Te recordamos que debes acceder a SQLite Wasm desde un Worker si usas el sistema de archivos privados de origen como backend de almacenamiento.
Pruébalo
Esta demostración te permite propagar una base de datos Web SQL con datos de muestra y, luego, vuelca los datos de Web SQL como instrucciones de SQL, que luego se importan a SQLite Wasm con el respaldo del sistema de archivos privados de origen. Por último, libera espacio de almacenamiento borrando los datos de Web SQL obsoletos. Consulta el código fuente para ver la implementación completa, incluido el archivo mywebsqldump.js con el parche.
Conclusiones
Es posible migrar tus bases de datos de Web SQL a SQLite Wasm con el respaldo del 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 ya no se alojan en Web SQL. En general, la migración 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. 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.