Com o SQLite Wasm apoiado pelo sistema de arquivos particular de origem, há uma substituição versátil para a tecnologia de banco de dados Web SQL descontinuada. Este artigo é um guia para migrar seus dados do Web SQL para o SQLite Wasm.
Formação necessária
O artigo Descontinuação e remoção do Web SQL anunciou a descontinuação da tecnologia de banco de dados Web SQL. Embora a tecnologia em si possa ter sido descontinuada, os casos de uso abordados por ela na verdade não são. Portanto, a postagem seguinte, SQLite Wasm no navegador apoiado pelo sistema de arquivos particulares de origem (link em inglês), descreve um conjunto de tecnologias de substituição baseadas no banco de dados SQLite, compilados em Web Assembly (Wasm) e apoiados pelo sistema de arquivos particulares de origem. Para fechar o círculo, este artigo mostra como migrar bancos de dados do Web SQL para o SQLite Wasm.
Como migrar seus bancos de dados
As quatro etapas a seguir demonstram a ideia conceitual de migrar um banco de dados Web SQL para o SQLite Wasm, com o banco de dados SQLite apoiado pelo sistema de arquivos privado de origem. Isso pode servir como base para seu próprio código personalizado para suas necessidades de migração do Web SQL.
Os bancos de dados Web SQL a serem migrados
A suposição de referência deste guia de migração é que você tenha um ou vários bancos de dados Web SQL que contêm dados relevantes para o app. Na captura de tela abaixo, você vê um banco de dados de exemplo chamado mydatabase com uma tabela de tempestades que mapeia humores com gravidades. O Chrome DevTools permite acessar bancos de dados Web SQL para depuração, como mostrado na captura de tela a seguir.
Como converter o banco de dados SQL da Web em instruções SQL
Para migrar os dados de forma transparente para o usuário, ou seja, sem que ele precise executar nenhuma das etapas de migração por conta própria, os dados no banco de dados precisam ser convertidos de volta para as instruções SQL originais que os criaram. Esse desafio já foi mencionado antes, e o script de migração usado neste artigo, mywebsqldump.js, é baseado em uma biblioteca comunitária chamada websqldump.js, com alguns pequenos ajustes. O exemplo de código a seguir mostra o código necessário para converter o banco de dados Web SQL mydatabase em um conjunto de instruções SQL.
websqldump.export({
database: 'mydatabase',
version: '1.0',
success: function(sql) {
// The SQL statements.
},
error: function(err) {
// Handle the error.
}
});
A execução desse código resulta na string de instruções SQL abaixo.
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');
Importar os dados para o SQLite Wasm
Tudo o que resta é executar esses comandos SQL no contexto do SQLite Wasm. Para todos os detalhes sobre a configuração do Wasm do SQLite, consulte o artigo SQLite Wasm no navegador com suporte do sistema de arquivos particulares de origem, mas a essência está novamente abaixo. Lembre-se de que esse código precisa ser executado em um worker (que a biblioteca cria automaticamente para você), com os cabeçalhos HTTP necessários definidos corretamente. Você pode instalar o pacote @sqlite.org/sqlite-wasm pelo 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);
}
})();
Depois de executar esse código, inspecione o arquivo do banco de dados importado com a extensão OPFS Explorer do Chrome DevTools. Agora há dois arquivos, um com o banco de dados real e outro com as informações de registro em diário. Observe que esses dois arquivos ficam no sistema de arquivos particular de origem, então você precisa usar a extensão OPFS Explorer para vê-los.
Para verificar se os dados importados são os mesmos que os dados iniciais do Web SQL, clique no arquivo mydatabase.db. A extensão OPFS Explorer mostrará uma caixa de diálogo Save File que permite salvar o arquivo no sistema de arquivos visível para o usuário. Com o arquivo do banco de dados salvo, use um app visualizador do SQLite para analisar os dados. O Project Fugu API Showcase (em inglês) apresenta vários apps para trabalhar com SQLite no navegador. Por exemplo, com o Sqlime - SQLite Playground, é possível abrir um arquivo de banco de dados SQLite no disco rígido e executar consultas nele. Como mostrado na captura de tela abaixo, a tabela de tempestade de dados foi importada corretamente para o SQLite.
Liberar armazenamento do Web SQL
Embora seja (talvez surpreendentemente) impossível excluir um banco de dados Web SQL, você ainda deve liberar parte do armazenamento descartando as tabelas do Web SQL obsoletas depois de migrar os dados para o SQLite Wasm. Para listar todas as tabelas em um banco de dados Web SQL e eliminá-las usando JavaScript, use o código como no seguinte 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);
}
};
Como trabalhar com os dados após a migração
Depois de migrar os dados, trabalhe com eles conforme descrito neste exemplo de código de introdução. Consulte a referência da API SQLite Wasm para mais detalhes. Vale lembrar que você precisa acessar o SQLite Wasm em um worker se usar o sistema de arquivos particular de origem como back-end de armazenamento.
Testar
Esta demonstração permite preencher um banco de dados Web SQL com dados de amostra e, em seguida, despejar esses dados como instruções SQL, que, em seguida, são importadas para o SQLite Wasm apoiado pelo sistema de arquivos particular de origem. Por fim, você libera espaço de armazenamento excluindo os dados obsoletos do Web SQL. Confira o código-fonte para ver a implementação completa, incluindo o arquivo mywebsqldump.js com patch.
Conclusões
A migração de bancos de dados do Web SQL para o SQLite Wasm com suporte do sistema de arquivos particular de origem é possível de forma transparente para os usuários. Eles não vão perceber que os dados agora estão hospedados no sistema de arquivos particular de origem, em um banco de dados SQLite, e não mais no Web SQL. De modo geral, a migração do Web SQL para o SQLite é uma etapa necessária para desenvolvedores Web que querem garantir a estabilidade e a escalonabilidade dos aplicativos a longo prazo. Embora o processo possa exigir algum esforço inicial, os benefícios de uma solução de banco de dados mais robusta, flexível e, acima de tudo, preparada para o futuro fazem com que o investimento valha a pena.