Utilizza SQLite per gestire tutto il tuo spazio di archiviazione in modo efficiente sul web.
Informazioni su SQLite
SQLite è un popolare sistema di gestione di database relazionali open source, leggero e incorporato. Molti sviluppatori lo usano per archiviare i dati in modo strutturato e facile da usare. A causa delle sue dimensioni ridotte e dei requisiti di memoria ridotta, SQLite viene spesso utilizzato come motore di database in dispositivi mobili, applicazioni desktop e browser web.
Una delle caratteristiche principali di SQLite è che si tratta di un database serverless, il che significa che non richiede un processo server separato per funzionare. Il database viene invece archiviato in un unico file sul dispositivo dell'utente, semplificando l'integrazione nelle applicazioni.
SQLite basato su Web Assembly
Esistono diverse versioni SQLite non ufficiali basate su Web Assembly (Wasm), che ne consentono l'utilizzo nei browser web, ad esempio sql.js. Il sottoprogetto WASM/JS sqlite3 è il primo progetto associato ufficialmente al progetto SQLite che realizza le build Wasm dei membri consolidati della libreria della famiglia di prodotti SQLite supportati. Gli obiettivi concreti di questo progetto includono:
- Associazione di un'API Squarespace3 di basso livello che è il più vicino possibile a quella C in termini di utilizzo.
- Un'API orientata agli oggetti di livello superiore, più simile a sql.js e implementazioni di tipo Node.js, che comunica direttamente all'API di basso livello. Questa API deve essere utilizzata dallo stesso thread dell'API di basso livello.
- Un'API basata su worker che parla con le API precedenti tramite messaggi Worker. È destinata all'uso nel thread principale, con le API di livello inferiore installate in un thread di worker e per le comunicazioni tramite messaggi worker.
- Una variante basata su Promise dell'API Worker che nasconde completamente all'utente gli aspetti della comunicazione cross-thread.
- Supporto per l'archiviazione permanente lato client utilizzando le API JavaScript disponibili, incluso il file system privato di origine (OPFS).
Utilizzo di SQLite Wasm con il backend di persistenza del file system privato di origine
Installazione della libreria da npm
Installa il pacchetto @sqlite.org/sqlite-wasm da npm con il seguente comando:
npm install @sqlite.org/sqlite-wasm
Il file system privato di origine
Il file system privato di origine (OPFS, parte dell'API File System Access) è dotato di una piattaforma speciale che offre un accesso ai dati con prestazioni elevate. Questa nuova piattaforma, diversa da quelle esistenti, offre accesso esclusivo in scrittura ai contenuti di un file. Questa modifica, insieme alla possibilità di leggere in modo coerente le modifiche non aggiornate e alla disponibilità di una variante sincrona sui worker dedicati, migliora notevolmente le prestazioni e sblocca nuovi casi d'uso.
Come puoi immaginare, l'ultimo punto degli obiettivi del progetto, il supporto per l'archiviazione lato client permanente mediante le API JavaScript disponibili, prevede requisiti di prestazioni rigorosi per quanto riguarda la memorizzazione di dati nel file di database.
È qui che entra in gioco il file system privato di origine e, più nello specifico, il metodo createSyncAccessHandle() degli oggetti FileSystemFileHandle. Questo metodo restituisce un oggetto Promise che si risolve in un oggetto FileSystemSyncAccessHandle che può essere utilizzato per leggere e scrivere in un file in modo sincrono. La
natura sincrona di questo metodo offre vantaggi in termini di prestazioni, ma pertanto
è utilizzabile solo all'interno di
web worker dedicati per
i file all'interno del file system privato di origine, in modo che il thread principale non possa essere bloccato.
Impostazione delle intestazioni richieste
Tra gli altri file, l'archivio SQLite Wasm scaricato contiene i file sqlite3.js
e sqlite3.wasm, che compongono la build WASM/JS diqlite3. La directory jswasm contiene i risultati finali di SQLlite3 principali, mentre la directory di primo livello contiene app di dimostrazione e test. I browser non pubblicano i file Wasm dagli URL di file://, pertanto le app che crei con questo metodo richiedono un server web, che deve includere le seguenti intestazioni nella risposta durante la pubblicazione dei file:
Cross-Origin-Opener-Policyimpostato sull'istruzionesame-origin, che isola il contesto di navigazione esclusivamente in base ai documenti della stessa origine. I documenti multiorigine non vengono caricati nello stesso contesto di navigazione.Cross-Origin-Embedder-Policyimpostato sull'istruzionerequire-corp, quindi un documento può caricare solo risorse dalla stessa origine o risorse contrassegnate esplicitamente come caricabili da un'altra origine.
Il motivo di queste intestazioni è che SQLite Wasm dipende da SharedArrayBuffer e l'impostazione di queste intestazioni fa parte dei requisiti di sicurezza.
Se esamini il traffico con DevTools, dovresti trovare le seguenti informazioni:
Test di velocità
Il team SQLite ha eseguito alcuni benchmark sull'implementazione di WebAssembly rispetto all'SQL web deprecato. Questi benchmark mostrano che SQLite Wasm è generalmente più veloce dell'SQL web. A volte è un po' più lenta, a volte un po' più veloce. Visualizza tutti i dettagli nella pagina dei risultati.
Esempio di codice per iniziare
Come accennato in precedenza, SQLite Wasm con il backend di persistenza del file system privato di origine deve essere eseguito da un contesto worker. La buona notizia è che la raccolta si occupa automaticamente di tutto questo e puoi usarlo direttamente dal thread principale.
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);
}
})();
Demo
Guarda il codice riportato in azione nella demo. Assicurati di controllare il codice sorgente su Glitch. Nota che la versione incorporata di seguito non utilizza il backend OPFS, ma quando apri la demo in una scheda separata lo fa.
Debug del file system privato di origine
Per eseguire il debug dell'output del file system privato di origine di SQLite Wasm, utilizza l'estensione di Chrome OPFS Explorer.
Dopo aver installato l'estensione, apri Chrome DevTools, seleziona la scheda Explorer OPFS e potrai controllare ciò che SQLite Wasm scrive nel file system privato di origine.
Se fai clic su uno dei file nella finestra di OPFS Explorer in DevTools, puoi salvarlo sul disco locale. Puoi quindi utilizzare un'app come SQLite Viewer per ispezionare il database in modo da assicurarti che SQLite Wasm funzioni effettivamente come promesso.
Ricevere assistenza e fornire feedback
SQLite Wasm è sviluppato e gestito dalla community SQLite. Ricevi assistenza e fornisci feedback effettuando una ricerca e pubblicando un post sul forum di assistenza. La documentazione completa è disponibile sul sito SQLite.
Ringraziamenti
Immagine hero di Tobias Fischer su Unsplash.