Con SQLite Wasm supportato dal file system privato di origine, è disponibile un sostituto versatile per la tecnologia di database Web SQL deprecata. Questo articolo è una guida alla migrazione dei dati da Web SQL a SQLite Wasm.
Sfondo obbligatorio
Il post Ritiro e rimozione di Web SQL ha annunciato il ritiro della tecnologia di database Web SQL. Sebbene la tecnologia stessa possa essere ritirata, i casi d'uso affrontati dalla tecnologia non lo sono, quindi il post di follow-up SQLite Wasm nel browser supportato dal file system privato dell'origine illustra un insieme di tecnologie sostitutive basate sul database SQLite, compilato in Web Assembly (Wasm) e supportato dal file system privato dell'origine. Per completare il cerchio, questo articolo mostra come eseguire la migrazione dei database da Web SQL a SQLite Wasm.
Migrazione dei database
I quattro passaggi che seguono mostrano l'idea concettuale della migrazione di un database Web SQL a SQLite Wasm, con il database SQLite supportato dal file system privato di origine. Questo può essere la base per il tuo codice personalizzato in base alle tue esigenze di migrazione di Web SQL.
I database Web SQL di cui eseguire la migrazione
L'assunto di base di questa guida alla migrazione è che tu abbia uno (o più) database Web SQL esistenti che contengono dati pertinenti per la tua app. Nello screenshot di seguito viene mostrato un database di esempio denominato mydatabase con una tabella di piogge torrenziali che mappa gli stati d'animo alle severità. Chrome DevTools ti consente di visualizzare i database Web SQL per il debug, come mostrato nello screenshot seguente.
Traduzione del database SQL web in istruzioni SQL
Per eseguire la migrazione dei dati in modo trasparente per l'utente, ovvero senza che debba eseguire autonomamente i passaggi di migrazione, i dati nel database devono essere tradotti nuovamente negli statement SQL originali che li hanno creati. Questo problema si è già verificato in passato e lo script di migrazione utilizzato in questo articolo (mywebsqldump.js) si basa su una libreria della community chiamata websqldump.js, con alcuni piccoli aggiustamenti. Il seguente esempio di codice mostra il codice necessario per tradurre il database Web SQL mydatabase in un insieme di istruzioni SQL.
websqldump.export({
database: 'mydatabase',
version: '1.0',
success: function(sql) {
// The SQL statements.
},
error: function(err) {
// Handle the error.
}
});
L'esecuzione di questo codice genera la stringa di istruzioni SQL riportata di seguito.
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');
Importazione dei dati in SQLite Wasm
Non resta che eseguire questi comandi SQL nel contesto di SQLite Wasm. Per tutti i dettagli sulla configurazione di SQLite Wasm, ti rimando all'articolo SQLite Wasm nel browser supportato dal file system privato di Origin, ma di seguito trovi un riepilogo. Ricorda che questo codice deve essere eseguito in un worker (creato automaticamente dalla libreria) con le intestazioni HTTP richieste impostate correttamente. Puoi installare il pacchetto @sqlite.org/sqlite-wasm da 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);
}
})();
Dopo aver eseguito questo codice, controlla il file del database importato con l'estensione OPFS Explorer di Chrome DevTools. Ora ci sono due file, uno con il database effettivo e uno con le informazioni sul journaling. Tieni presente che questi due file si trovano nel file system privato di origine, quindi devi utilizzare l'estensione OPFS Explorer per visualizzarli.
Per verificare effettivamente che i dati importati corrispondano a quelli iniziali di Web SQL, fai clic sul file mydatabase.db e l'estensione OPFS Explorer mostrerà una finestra di dialogo Salva file per consentirti di salvare il file nel file system visibile all'utente. Dopo aver salvato il file del database, utilizza un'app di visualizzazione SQLite per esplorare i dati. La Project Fugu API Showcase include diverse app per lavorare con SQLite nel browser. Ad esempio, Sqlime - SQLite Playground ti consente di aprire un file di database SQLite dal tuo disco rigido ed eseguire query sul database. Come puoi vedere nello screenshot di seguito, la tabella rainstorm è stata importata correttamente in SQLite.
Liberazione dello spazio di archiviazione Web SQL
Anche se (forse sorprendentemente) è impossibile eliminare un database SQL web, dovresti comunque liberare un po' di spazio di archiviazione eliminando le tabelle SQL web ora obsolete dopo aver eseguito la migrazione dei dati in SQLite Wasm. Per elencare tutte le tabelle di un database Web SQL e inserirle utilizzando JavaScript, utilizza il codice riportato nel seguente 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);
}
};
Utilizzare i dati dopo la migrazione
Dopo aver eseguito la migrazione dei dati, utilizzali come descritto in questo esempio di codice per iniziare. Per informazioni dettagliate, consulta il riferimento all'API SQLite Wasm. Ti ricordiamo che devi accedere a SQLite Wasm da un worker se utilizzi il file system privato di origine come backend di archiviazione.
Fai una prova
Questa demo ti consente di compilare un database Web SQL con dati di esempio, quindi esegue il dump dei dati Web SQL come istruzioni SQL, che vengono poi importati in SQLite Wasm con il supporto del file system privato di origine. Infine, puoi liberare spazio di archiviazione eliminando i dati SQL web obsoleti. Controlla il codice sorgente per l'implementazione completa, incluso il file mywebsqldump.js patchato.
Conclusioni
La migrazione dei database Web SQL a SQLite Wasm supportata dal file system privato di origine è possibile in modo trasparente per gli utenti. Non noteranno che i loro dati ora sono ospitati nel file system privato di origine in un database SQLite e non sono più in Web SQL. In generale, la migrazione da Web SQL a SQLite è un passaggio necessario per gli sviluppatori web che vogliono garantire la stabilità e la scalabilità a lungo termine delle loro applicazioni. Anche se la procedura potrebbe richiedere un po' di impegno iniziale, i vantaggi di una soluzione di database più solida, flessibile e, soprattutto, adatta al futuro rendono l'investimento ben ripagato.