Use o SQLite para processar todas as suas necessidades de armazenamento com alto desempenho na Web.
Sobre o SQLite
O SQLite é uma linguagem código aberto, leve, relacional incorporado em um sistema de gerenciamento de banco de dados. Muitos desenvolvedores usam esse sistema para armazenar dados estruturada e fácil de usar. Por causa do tamanho pequeno e da memória insuficiente o SQLite é usado com frequência como um mecanismo de banco de dados em dispositivos móveis, aplicativos para computador e navegadores da Web.
Uma das características principais do SQLite é que ele é um banco de dados sem servidor, ou seja, ele não requer um processo de servidor separado para funcionar. Em vez disso, o banco de dados é armazenado em um único arquivo no dispositivo do usuário, facilitando se integrar aos aplicativos.
SQLite com base em Web Assembly
Há várias versões não oficiais do SQLite baseadas em Web Assembly (Wasm), permitindo que ele seja usado em navegadores da Web, por exemplo, sql.js (link em inglês). A O subprojeto sqlite3 WASM/JS é o que está oficialmente associado ao Projeto SQLite fazendo builds Wasm da biblioteca membros estabelecidos da família de entregas SQLite suportadas. O concreto deste projeto incluem:
- Vincular uma API sqlite3 de baixo nível que seja o mais próxima possível da C os termos de uso.
- Uma API orientada a objetos de nível mais alto, mais parecida com sql.js e Implementações no estilo Node.js, que se comunica diretamente com a API de nível inferior. Essa API precisa ser usada com o mesmo como a API de baixo nível.
- Uma API baseada em worker que se comunica com as APIs anteriores por meio de mensagens de worker. Isso Uma delas se destina ao uso na linha de execução principal, com as APIs de nível inferior instalada em uma linha de execução de worker e se comunica com ele por meio de mensagens de worker.
- Uma variante da API Worker baseada em promessas que oculta inteiramente aspectos de comunicação do usuário entre linhas de execução.
- Suporte para armazenamento persistente do lado do cliente usando APIs JavaScript disponíveis, incluindo o Sistema de arquivos particulares de origem (OPFS, na sigla em inglês).
Como usar o SQLite Wasm com o back-end de persistência do sistema de arquivos particulares de origem
Como instalar a biblioteca do npm
Instale o @sqlite.org/sqlite-wasm do npm com o seguinte comando:
npm install @sqlite.org/sqlite-wasm
O sistema de arquivos particular de origem
O Sistema de Arquivos Privados de Origem (OPFS, na sigla em inglês), parte do API File System Access) é aumentada com uma uma plataforma especial que oferece acesso de alto desempenho aos dados. Essa nova plataforma difere dos existentes, oferecendo acesso de gravação no local e exclusivo a um conteúdo do arquivo. Essa mudança, junto com a capacidade de ler consistentemente modificações não aplicadas e a disponibilidade de uma variante síncrona no de funcionários dedicados, melhora significativamente o desempenho e possibilita novos usos casos de uso diferentes.
Como você pode imaginar, o último ponto das metas do projeto, o suporte para
o armazenamento permanente do lado do cliente usando APIs JavaScript disponíveis, vem com
requisitos rigorosos de desempenho relacionados à persistência de dados no arquivo do banco de dados.
É aqui que o Sistema de Arquivos Privados de Origem e, mais especificamente, o
createSyncAccessHandle()
método de
FileSystemFileHandle
os objetos entram em jogo. Esse método retorna uma promessa que é resolvida
FileSystemSyncAccessHandle
que pode ser usado para ler e gravar em um arquivo de forma síncrona. A
síncrona desse método traz vantagens de desempenho, mas
ele só pode ser usado dentro de servidores
Web Workers para
no sistema de arquivos particular de origem para que a linha de execução principal não possa ser bloqueada.
Como definir os cabeçalhos obrigatórios
Entre outros arquivos, o SQLite Wasm transferido por download contém sqlite3.js.
e sqlite3.wasm, que compõem o build do sqlite3 WASM/JS. O jswasm
diretório contém as entregas principais do sqlite3 e o diretório de nível superior
contém apps de demonstração e teste. Os navegadores não veicularão arquivos Wasm de
file://. Portanto, todos os aplicativos que você criar com ele precisarão de um servidor da Web e que
de servidor deve incluir os seguintes cabeçalhos em sua resposta ao exibir o
arquivos:
Cross-Origin-Opener-PolicyDefina como diretivasame-origin, que isola o contexto da navegação exclusivamente em documentos da mesma origem. Os documentos de origem cruzada não são carregados no mesmo contexto de navegação.Cross-Origin-Embedder-PolicyDefina como diretivarequire-corp, Portanto, um documento só pode carregar recursos da mesma origem ou explicitamente marcado como carregável de outra origem.
A razão para esses cabeçalhos é que o SQLite Wasm depende
SharedArrayBuffer,
e definir esses cabeçalhos faz parte da
requisitos de segurança.
Se você inspecionar o tráfego com o DevTools, encontrará o seguinte informações:
Teste de velocidade
A equipe do SQLite fez alguns comparativos de mercado na implementação do WebAssembly em comparação com o SQL da Web descontinuado. Esses comparativos de mercado mostram que o SQLite Wasm é são quase tão rápidos quanto o Web SQL. Às vezes é um pouco mais lento, outras vezes ela é um pouco mais rápida. Confira todos os detalhes na página de resultados.
Exemplo de código para iniciantes
Como mencionado anteriormente, o SQLite Wasm com o sistema de arquivos particular de origem o back-end de persistência precisa ser executado em um contexto de worker. A boa notícia é que a biblioteca cuida automaticamente de tudo isso para você, e você pode usá-la diretamente da linha de execução principal.
import { sqlite3Worker1Promiser } from '@sqlite.org/sqlite-wasm';
(async () => {
try {
console.log('Loading and initializing SQLite3 module...');
const promiser = await new Promise((resolve) => {
const _promiser = sqlite3Worker1Promiser({
onready: () => {
resolve(_promiser);
},
});
});
console.log('Done initializing. Running demo...');
let response;
response = await promiser('config-get', {});
console.log('Running SQLite3 version', response.result.version.libVersion);
response = await promiser('open', {
filename: 'file:worker-promiser.sqlite3?vfs=opfs',
});
const { dbId } = response;
console.log(
'OPFS is available, created persisted database at',
response.result.filename.replace(/^file:(.*?)\?vfs=opfs$/, '$1'),
);
await promiser('exec', { dbId, sql: 'CREATE TABLE IF NOT EXISTS t(a,b)' });
console.log('Creating a table...');
console.log('Insert some data using exec()...');
for (let i = 20; i <= 25; ++i) {
await promiser('exec', {
dbId,
sql: 'INSERT INTO t(a,b) VALUES (?,?)',
bind: [i, i * 2],
});
}
console.log('Query data with exec()');
await promiser('exec', {
dbId,
sql: 'SELECT a FROM t ORDER BY a LIMIT 3',
callback: (result) => {
if (!result.row) {
return;
}
console.log(result.row);
},
});
await promiser('close', { dbId });
} catch (err) {
if (!(err instanceof Error)) {
err = new Error(err.result.message);
}
console.error(err.name, err.message);
}
})();
Demonstração
Confira o código acima em ação na demonstração. Não deixe de conferir código-fonte no Glitch. Observe como a versão incorporada abaixo não usa o back-end OPFS. mas quando você abre a demonstração guia separada, sim.
Como depurar o sistema de arquivos particular de origem
Para depurar a saída do sistema de arquivos particulares de origem do SQLite Wasm, use o Explorador de OPFS Extensão do Chrome.
Depois de instalar a extensão, abra o Chrome DevTools, selecione o arquivo OPFS Explorer para inspecionar o que o SQLite Wasm grava na Sistema de arquivos particular de origem.
Se você clicar em qualquer um dos arquivos na janela do OPFS Explorer no DevTools, você pode salvá-lo no disco local. Depois, você pode usar um app como SQLite Viewer para inspecionar o banco de dados, para que você possa verifique se o SQLite Wasm realmente funciona como prometido.
Como receber ajuda e enviar feedback
O SQLite Wasm é desenvolvido e mantido pela comunidade do SQLite. Receba ajuda e fornecer feedback pesquisando e postando no fórum de suporte. O documentação (link em inglês) está disponível no site do SQLite.
Agradecimentos
Imagem principal de Tobias Fischer no Abrir a página.