SQLite Wasm nel browser supportato dal file system privato di origine

Utilizza SQLite per gestire con prestazioni elevate tutte le tue esigenze di archiviazione sul web.

Informazioni su SQLite

SQLite è un'applicazione molto diffusa relazionali open source, leggeri e incorporati di gestione dei database. Molti sviluppatori lo usano per archiviare i dati in un strutturata e facile da usare. A causa delle dimensioni ridotte e della memoria insufficiente standard, SQLite viene spesso sfruttato come motore di database nei dispositivi mobili, applicazioni desktop e browser web.

Una delle caratteristiche principali di SQLite è che è un database serverless, significa che non è necessario un processo del server separato per il funzionamento. Invece, il database è archiviato in un unico file sul dispositivo dell'utente, semplificando integrare nelle applicazioni.

Logo SQLite.

SQLite basata su Web Assembly

Esistono diverse versioni SQLite non ufficiali basate su Web Assembly (Wasm), consentendone l'uso nei browser web, ad esempio sql.js. La sqlite3 WASM/JS subproject è al primo tentativo che è ufficialmente associato Progetto SQLite che crea build Wasm della libreria membri consolidati della famiglia di prodotti SQLite supportati. Il cemento di questo progetto includono:

  • Associazione di un'API sqlite3 di basso livello il più vicino possibile a quella C termini di utilizzo.
  • Un'API orientata agli oggetti di livello superiore, sql.js e implementazioni di tipo Node.js, comunica direttamente con l'API di basso livello. Questa API deve essere utilizzata dalla stessa come API di basso livello.
  • Un'API basata su worker che comunica con le API precedenti tramite messaggi del worker. Questo una da usare nel thread principale, con le API di livello inferiore installati in un thread worker e di comunicare con loro tramite messaggi del worker.
  • Una variante basata su Promise dell'API Worker che nasconde interamente gli aspetti della comunicazione tra thread da parte dell'utente.
  • Supporto per l'archiviazione permanente lato client utilizzando le API JavaScript disponibili. tra cui l'Origin Private File System (OPFS).

Utilizzo di SQLite Wasm con il backend di persistenza del file system privato di origine

Installazione della libreria da npm

Installa il @sqlite.org/sqlite-wasm di npm con il seguente comando:

npm install @sqlite.org/sqlite-wasm

Il file system privato di origine

L'Origin Private File System (OPFS, parte del API File System Access) è aumentata con un una piattaforma speciale che offre un accesso ai dati molto performante. Questa nuova piattaforma si differenzia da quelle esistenti offrendo accesso in scrittura ed esclusivo a un i contenuti del file. Questa modifica, insieme alla possibilità di leggere in modo coerente modifiche non completate e la disponibilità di una variante sincrona persone dedicate, migliora significativamente le prestazioni e sblocca le nuove d'uso diversi.

Come potete immaginare, l'ultimo punto degli obiettivi del progetto, ovvero il lo spazio di archiviazione permanente lato client utilizzando le API JavaScript disponibili, severi requisiti di prestazioni per quanto riguarda la conservazione dei dati nel file di database. È qui che si trova il file system privato di origine e, in particolare, lo createSyncAccessHandle() metodo di FileSystemFileHandle degli oggetti che entrano in gioco. Questo metodo restituisce una promessa che si risolve in un FileSystemSyncAccessHandle che può essere utilizzato per leggere e scrivere in un file in modo sincrono. La la natura sincrona di questo metodo offre vantaggi in termini di prestazioni, ma può essere utilizzato solo all'interno Web worker per 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 sqlite3 WASM/JS. jswasm che contiene i risultati finali sqlite3 e la directory di primo livello contiene app dimostrative e di test. I browser non pubblicheranno file Wasm da file:// URL, quindi tutte le app che crei con questo richiedono un server web e che il server web deve includere le seguenti intestazioni nella sua risposta durante l'elaborazione file:

Il motivo di queste intestazioni è che SQLite Wasm dipende SharedArrayBuffer, e l'impostazione di queste intestazioni fa parte requisiti di sicurezza.

Se ispezioni il traffico con DevTools, dovresti trovare quanto segue informazioni:

Le due intestazioni menzionate sopra, Cross-Origin-Embedder-Policy e Cross-Origin-Opener-Policy, sono evidenziate in Chrome DevTools.

Test della velocità

Il team SQLite ha eseguito alcuni benchmark sull'implementazione di WebAssembly rispetto a SQL web deprecato. Questi benchmark mostrano che SQLite Wasm è in genere più veloce di SQL web. A volte è un po' più lento, a volte è un po' più veloce. Leggi tutti i dettagli nella pagina dei risultati.

Esempio di codice per iniziare

Come accennato in precedenza, SQLite Wasm con il file system privato di origine il backend di persistenza deve essere eseguito da un contesto worker. La buona notizia è che la libreria si occupa automaticamente di tutto questo e puoi utilizzarlo 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 sopra in azione nella demo. Assicurati di consultare codice sorgente su Glitch. Nota come la versione incorporata qui sotto non utilizza il backend OPFS, ma quando apri la demo in una scheda separata.

Debug del file system privato di origine

Per eseguire il debug dell'output del file system privato di origine di SQLite Wasm, utilizza Esplora OPFS estensione di Chrome.

OPFS Explorer nel Chrome Web Store.

Dopo aver installato l'estensione, apri Chrome DevTools, seleziona il file OPFS Explorer per esaminare ciò che SQLite Wasm scrive nella File system privato di origine.

Estensione di Chrome OPFS Explorer che mostra la struttura del file system privato di origine dell&#39;app demo.

Se fai clic su uno dei file nella finestra Explorer OPFS in DevTools, possono salvarlo sul disco locale. Puoi quindi usare un'app come Visualizzatore SQLite per ispezionare il database, in modo da poter assicurarti che SQLite Wasm funziona effettivamente come promesso.

App Visualizzatore SQLite utilizzata per aprire un file di database dalla demo SQLite Wasm.

Ricevere assistenza e fornire feedback

SQLite Wasm è sviluppato e gestito dalla community SQLite. Ricevi assistenza e fornire un feedback cercando e pubblicando forum di assistenza. L'intero documentazione è disponibile sul sito SQLite.

Ringraziamenti

Immagine hero di Tobias Fischer su Rimuovi schermo.