SQLite Wasm in de browser ondersteund door het Origin Private File System

Gebruik SQLite om al uw opslagbehoeften op internet efficiënt af te handelen.

SQLite is een populair, open-source , lichtgewicht, ingebed relationeel databasebeheersysteem. Veel ontwikkelaars gebruiken het om gegevens op een gestructureerde, gebruiksvriendelijke manier op te slaan. Vanwege het kleine formaat en de lage geheugenvereisten wordt SQLite vaak gebruikt als database-engine op mobiele apparaten, desktopapplicaties en webbrowsers.

Een van de belangrijkste kenmerken van SQLite is dat het een serverloze database is, wat betekent dat er geen apart serverproces voor nodig is. In plaats daarvan wordt de database in één bestand op het apparaat van de gebruiker opgeslagen, waardoor deze eenvoudig in applicaties kan worden geïntegreerd.

SQLite-logo.

SQLite gebaseerd op Web Assembly

Er zijn een aantal niet-officiële SQLite-versies gebaseerd op Web Assembly (Wasm), waardoor deze in webbrowsers kan worden gebruikt, bijvoorbeeld sql.js . Het sqlite3 WASM/JS-subproject is de eerste poging die officieel is geassocieerd met het SQLite-project, waarbij Wasm-builds worden gemaakt van de gevestigde bibliotheekleden van de familie van ondersteunde SQLite-producten. De concrete doelstellingen van dit project zijn onder meer:

  • Het binden van een sqlite3 API op laag niveau die qua gebruik zo dicht mogelijk bij de C ligt.
  • Een objectgeoriënteerde API op een hoger niveau, meer vergelijkbaar met implementaties in sql.js en Node.js-stijl, die rechtstreeks spreekt met de API op laag niveau. Deze API moet worden gebruikt vanuit dezelfde thread als de low-level API.
  • Een op Worker gebaseerde API die via Worker-berichten met de vorige API's spreekt. Deze is bedoeld voor gebruik in de hoofdthread, waarbij de API's op een lager niveau zijn geïnstalleerd in een Worker-thread, en om met hen te praten via Worker-berichten.
  • Een op Promise gebaseerde variant van de Worker API die de cross-thread communicatieaspecten volledig verbergt voor de gebruiker.
  • Ondersteuning voor permanente opslag aan de clientzijde met behulp van beschikbare JavaScript-API's, waaronder het Origin Private File System (OPFS).

SQLite Wasm gebruiken met de persistentie-backend van het Origin Private File System

De bibliotheek installeren vanaf npm

Installeer het @sqlite.org/sqlite-wasm -pakket van npm met de volgende opdracht:

npm install @sqlite.org/sqlite-wasm

Het Origin privébestandssysteem

Het Origin Private File System (OPFS, onderdeel van de File System Access API ) is uitgebreid met een speciaal oppervlak dat zeer performante toegang tot gegevens biedt. Dit nieuwe oppervlak verschilt van de bestaande doordat het interne en exclusieve schrijftoegang biedt tot de inhoud van een bestand. Deze verandering, samen met de mogelijkheid om consequent niet-doorgespoelde wijzigingen te lezen en de beschikbaarheid van een synchrone variant op speciale werkers, verbetert de prestaties aanzienlijk en deblokkeert nieuwe gebruiksscenario's.

Zoals u zich kunt voorstellen, gaat het laatste punt van de doelstellingen van het project, Ondersteuning voor persistente opslag aan de clientzijde met behulp van beschikbare JavaScript API's, gepaard met strikte prestatie-eisen met betrekking tot het persistent maken van gegevens in het databasebestand. Dit is waar het Origin Private File System, en meer specifiek de methode createSyncAccessHandle() van FileSystemFileHandle objecten, in het spel komt. Deze methode retourneert een Promise die wordt omgezet in een FileSystemSyncAccessHandle object dat kan worden gebruikt om synchroon te lezen van en te schrijven naar een bestand. Het synchrone karakter van deze methode brengt prestatievoordelen met zich mee, maar is daarom alleen bruikbaar binnen speciale Web Workers voor bestanden binnen het Origin Private File System, zodat de hoofdthread niet kan worden geblokkeerd.

Het instellen van de vereiste headers

Het gedownloade SQLite Wasm-archief bevat naast andere bestanden de bestanden sqlite3.js en sqlite3.wasm , waaruit de sqlite3 WASM/JS-build bestaat. De jswasm -map bevat de kernproducten van sqlite3 en de map op het hoogste niveau bevat demonstratie- en test-apps. Browsers leveren geen Wasm-bestanden aan vanaf file:// URL's, dus alle apps die u hiermee bouwt vereisen een webserver en die server moet de volgende headers opnemen in zijn reactie bij het aanbieden van de bestanden:

De reden voor deze headers is dat SQLite Wasm afhankelijk is van SharedArrayBuffer , en het instellen van deze headers is onderdeel van de beveiligingsvereisten .

Als u het verkeer met DevTools inspecteert, zou u de volgende informatie moeten vinden:

De twee hierboven genoemde headers, Cross-Origin-Embedder-Policy en Cross-Origin-Opener-Policy, gemarkeerd in Chrome DevTools.

Snelheidstest

Het SQLite-team heeft een aantal benchmarks uitgevoerd voor hun WebAssembly-implementatie in vergelijking met de verouderde Web SQL. Uit deze benchmarks blijkt dat SQLite Wasm over het algemeen ongeveer net zo snel is als Web SQL. Soms is het een beetje langzamer, soms is het een beetje sneller. Bekijk alle details op de resultatenpagina .

Aan de slag met codevoorbeeld

Zoals eerder vermeld, moet SQLite Wasm met de persistentie-backend van Origin Private File System worden uitgevoerd vanuit een Worker-context. Het goede nieuws is dat de bibliotheek dit allemaal automatisch voor je regelt en dat je het rechtstreeks vanuit de hoofdthread kunt gebruiken.

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

Zie de bovenstaande code in actie in de demo . Zorg ervoor dat je de broncode op Glitch bekijkt. Merk op dat de onderstaande ingebedde versie de OPFS-backend niet gebruikt, maar wanneer u de demo op een apart tabblad opent, doet dit dat wel.

Debug het Origin privébestandssysteem

Om de Origin Private File System-uitvoer van SQLite Wasm te debuggen, gebruikt u de OPFS Explorer Chrome-extensie.

OPFS Explorer in de Chrome Web Store.

Nadat u de extensie hebt geïnstalleerd, opent u Chrome DevTools, selecteert u het tabblad OPFS Explorer en bent u klaar om te inspecteren wat SQLite Wasm naar het Origin Private File System schrijft.

OPFS Explorer Chrome-extensie die de Origin Private File System-structuur van de demo-app toont.

Als u een van de bestanden in het OPFS Explorer-venster in DevTools selecteert, kunt u deze op de lokale schijf opslaan. Vervolgens kunt u een app als SQLite Viewer gebruiken om de database te inspecteren, zodat u er zeker van kunt zijn dat SQLite Wasm ook daadwerkelijk werkt zoals beloofd.

SQLite Viewer-app die wordt gebruikt om een ​​databasebestand te openen vanuit de SQLite Wasm-demo.

Krijg hulp en geef feedback

SQLite Wasm is ontwikkeld en wordt onderhouden door de SQLite-gemeenschap. Krijg hulp en geef feedback door te zoeken en berichten te plaatsen op het ondersteuningsforum . De volledige documentatie is beschikbaar op de SQLite-site.