Gebruik SQLite om al uw opslagbehoeften op het web op een efficiënte manier te verwerken.
SQLite is een populair, open-source , lichtgewicht, embedded relationeel databasemanagementsysteem. Veel ontwikkelaars gebruiken het om gegevens op een gestructureerde en gebruiksvriendelijke manier op te slaan. Vanwege de kleine omvang en lage geheugenvereisten wordt SQLite vaak gebruikt als database-engine in 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 nodig is om te functioneren. In plaats daarvan wordt de database opgeslagen in één bestand op het apparaat van de gebruiker, waardoor deze eenvoudig te integreren is in applicaties.
SQLite gebaseerd op Web Assembly
Er zijn een aantal onofficiële SQLite-versies gebaseerd op Web Assembly (Wasm), waardoor het gebruikt kan worden in webbrowsers, bijvoorbeeld sql.js. Het sqlite3 WASM/JS-subproject is de eerste poging die officieel is gekoppeld aan het SQLite-project en Wasm-builds maakt van de bibliotheek die vaste leden van de familie van ondersteunde SQLite-deliverables bevat. De concrete doelen van dit project zijn onder andere:
- Een low-level sqlite3 API binden die qua gebruik zo dicht mogelijk bij de C API ligt.
- Een objectgeoriënteerde API op een hoger niveau, meer verwant aan sql.js- en Node.js-achtige implementaties , die rechtstreeks communiceert met de low-level API. Deze API moet vanuit dezelfde thread worden gebruikt als de low-level API.
- Een op Workers gebaseerde API die via Worker-berichten met de vorige API's communiceert. Deze is bedoeld voor gebruik in de hoofdthread, waarbij de onderliggende API's in een Worker-thread worden geïnstalleerd en via Worker-berichten met hen communiceren.
- Een Promise-gebaseerde variant van de Worker API die de cross-thread communicatieaspecten volledig verbergt voor de gebruiker.
- Ondersteuning voor permanente client-side opslag met behulp van beschikbare JavaScript API's, waaronder Origin Private File System (OPFS).
SQLite Wasm gebruiken met de persistentie-backend van Origin Private File System
De bibliotheek installeren vanuit npm
Installeer het @sqlite.org/sqlite-wasm -pakket vanuit npm met de volgende opdracht:
npm install @sqlite.org/sqlite-wasm
Het Origin Private File System
Het Origin Private File System (OPFS, onderdeel van de File System Access API ) is uitgebreid met een speciaal platform dat zeer performante toegang tot gegevens biedt. Dit nieuwe platform onderscheidt zich van bestaande platformen door in-place en exclusieve schrijftoegang tot de inhoud van een bestand te bieden. Deze wijziging, samen met de mogelijkheid om ongeflushte wijzigingen consistent te lezen en de beschikbaarheid van een synchrone variant op dedicated workers, verbetert de prestaties aanzienlijk en maakt nieuwe use cases mogelijk.
Zoals u zich kunt voorstellen, gaat het laatste punt van de projectdoelen, ondersteuning voor persistente client-side opslag met behulp van beschikbare JavaScript API's, gepaard met strenge prestatievereisten met betrekking tot het persistent maken van gegevens in het databasebestand. Dit is waar het Origin Private File System, en meer specifiek de createSyncAccessHandle() -methode van FileSystemFileHandle objecten, in het spel komt. Deze methode retourneert een Promise die resulteert 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 biedt prestatievoordelen, maar is daarom alleen bruikbaar binnen speciale webworkers voor bestanden binnen het Origin Private File System, zodat de hoofdthread niet kan worden geblokkeerd.
De vereiste headers instellen
Het gedownloade SQLite Wasm-archief bevat onder andere de bestanden sqlite3.js en sqlite3.wasm , die samen de sqlite3 WASM/JS-build vormen. De map jswasm bevat de belangrijkste sqlite3-deliverables en de hoofdmap bevat demonstratie- en test-apps. Browsers serveren geen Wasm-bestanden van file:// -URL's, dus alle apps die u hiermee bouwt, vereisen een webserver en die server moet de volgende headers in zijn antwoord opnemen bij het serveren van de bestanden:
-
Cross-Origin-Opener-Policyingesteld op desame-origin-richtlijn , die de browsecontext uitsluitend isoleert tot documenten met dezelfde oorsprong. Cross-origin-documenten worden niet in dezelfde browsecontext geladen. -
Cross-Origin-Embedder-Policyis ingesteld op derequire-corprichtlijn , zodat een document alleen bronnen kan laden vanaf dezelfde oorsprong, of bronnen die expliciet zijn gemarkeerd als laadbaar vanaf een andere oorsprong.
De reden voor deze headers is dat SQLite Wasm afhankelijk is van SharedArrayBuffer en het instellen van deze headers onderdeel is van de beveiligingsvereisten .
Als u het verkeer met DevTools inspecteert, zou u de volgende informatie moeten vinden:
Snelheidstest
Het SQLite-team heeft een aantal benchmarks uitgevoerd op hun WebAssembly-implementatie in vergelijking met de verouderde Web SQL. Deze benchmarks laten zien dat SQLite Wasm over het algemeen ongeveer net zo snel is als Web SQL. Soms is het iets langzamer, soms iets 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 vanuit een Worker-context worden uitgevoerd. Het goede nieuws is dat de bibliotheek dit allemaal automatisch voor je regelt en dat je het direct 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);
}
})();
Demonstratie
Bekijk de bovenstaande code in actie in de demo . Bekijk ook de broncode op GitHub. Merk op dat de ingebedde versie hieronder de OPFS-backend niet gebruikt, maar dat dit wel het geval is wanneer je de demo in een apart tabblad opent.
Debug het Origin Private File System
Gebruik de Chrome-extensie OPFS Explorer om de uitvoer van SQLite Wasm's Origin Private File System te debuggen.
Nadat u de extensie hebt geïnstalleerd, opent u Chrome DevTools, selecteert u het tabblad OPFS Explorer en bent u klaar om te controleren wat SQLite Wasm naar het Origin Private File System schrijft.
Als u een van de bestanden in het OPFS Explorer-venster in DevTools selecteert, kunt u deze opslaan op de lokale schijf. Vervolgens kunt u een app zoals SQLite Viewer gebruiken om de database te inspecteren, zodat u zeker weet dat SQLite Wasm daadwerkelijk werkt zoals beloofd.
Krijg hulp en geef feedback
SQLite Wasm wordt ontwikkeld en onderhouden door de SQLite-community. Krijg hulp en geef feedback door te zoeken en te posten op het supportforum . De volledige documentatie is beschikbaar op de SQLite-website.