Utilisez SQLite pour gérer efficacement tous vos besoins de stockage sur le Web.
SQLite est un système de gestion de bases de données relationnelles léger, intégré et Open Source populaire. De nombreux développeurs l'utilisent pour stocker des données de manière structurée et facile à utiliser. En raison de sa petite taille et de ses faibles exigences en mémoire, SQLite est souvent utilisé comme moteur de base de données sur les appareils mobiles, les applications de bureau et les navigateurs Web.
L'une des principales caractéristiques de SQLite est qu'il s'agit d'une base de données sans serveur, ce qui signifie qu'elle ne nécessite pas de processus de serveur distinct pour fonctionner. Au lieu de cela, la base de données est stockée dans un seul fichier sur l'appareil de l'utilisateur, ce qui facilite son intégration dans les applications.
SQLite basé sur WebAssembly
Il existe un certain nombre de versions non officielles de SQLite basées sur WebAssembly (Wasm), ce qui permet de l'utiliser dans les navigateurs Web, par exemple sql.js. Le sous-projet sqlite3 WASM/JS est le premier effort officiellement associé au projet SQLite, qui génère des builds Wasm de la bibliothèque en tant que membres établis de la famille des livrables SQLite compatibles. Les objectifs concrets de ce projet incluent les suivants:
- Liaison d'une API sqlite3 de bas niveau qui est aussi proche que possible de celle en C en termes d'utilisation.
- API orientée objet de niveau supérieur, plus proche de sql.js et des implémentations de style Node.js, qui communique directement avec l'API de bas niveau. Cette API doit être utilisée à partir du même thread que l'API de bas niveau.
- API basée sur les workers qui communique avec les API précédentes via des messages de worker. Elle est destinée à être utilisée dans le thread principal, avec les API de bas niveau installées dans un thread de travail et qui communiquent avec elles via des messages de travail.
- Variante de l'API Worker basée sur les promesses qui masque entièrement les aspects de communication interthread à l'utilisateur.
- Prise en charge du stockage côté client persistant à l'aide des API JavaScript disponibles, y compris le système de fichiers privé d'origine (OPFS).
Utiliser SQLite Wasm avec le backend de persistance du système de fichiers privés Origin
Installer la bibliothèque depuis npm
Installez le package @sqlite.org/sqlite-wasm à partir de npm avec la commande suivante:
npm install @sqlite.org/sqlite-wasm
Système de fichiers privé Origin
Le système de fichiers privé d'origine (OPFS, qui fait partie de l'API File System Access) est complété par une surface spéciale qui offre un accès très performant aux données. Cette nouvelle surface se distingue des surfaces existantes en offrant un accès en écriture exclusif et en place au contenu d'un fichier. Cette modification, ainsi que la possibilité de lire de manière cohérente les modifications non purgées et la disponibilité d'une variante synchrone sur des workers dédiés, améliorent considérablement les performances et débloquent de nouveaux cas d'utilisation.
Comme vous pouvez l'imaginer, le dernier point des objectifs du projet, la prise en charge du stockage côté client persistant à l'aide des API JavaScript disponibles, s'accompagne de strictes exigences de performances concernant la persistance des données dans le fichier de base de données.
C'est là que le système de fichiers privé Origin et, plus précisément, la méthode createSyncAccessHandle() des objets FileSystemFileHandle entrent en jeu. Cette méthode renvoie une promesse qui se résout en un objet FileSystemSyncAccessHandle pouvant être utilisé pour lire et écrire de manière synchrone dans un fichier. La nature synchrone de cette méthode offre des avantages en termes de performances, mais elle n'est donc utilisable que dans des Web Workers dédiés pour les fichiers du système de fichiers privé d'origine afin que le thread principal ne puisse pas être bloqué.
Définir les en-têtes requis
L'archive SQLite Wasm téléchargée contient, entre autres, les fichiers sqlite3.js et sqlite3.wasm, qui constituent la compilation sqlite3 WASM/JS. Le répertoire jswasm contient les principaux livrables sqlite3, et le répertoire de premier niveau contient des applications de démonstration et de test. Les navigateurs ne diffusent pas de fichiers Wasm à partir d'URL file://. Par conséquent, toutes les applications que vous créez avec cette méthode nécessitent un serveur Web, et ce serveur doit inclure les en-têtes suivants dans sa réponse lors de la diffusion des fichiers:
Cross-Origin-Opener-Policydéfini sur l'instructionsame-origin, qui isole le contexte de navigation exclusivement aux documents de même origine. Les documents inter-origines ne sont pas chargés dans le même contexte de navigation.Cross-Origin-Embedder-Policydéfini sur la directiverequire-corp, un document ne peut charger que des ressources de la même origine ou des ressources explicitement marquées comme pouvant être chargées à partir d'une autre origine.
Ces en-têtes sont nécessaires, car SQLite Wasm dépend de SharedArrayBuffer, et le fait de définir ces en-têtes fait partie de ses exigences de sécurité.
Si vous inspectez le trafic avec DevTools, vous devriez trouver les informations suivantes:
Speedtest
L'équipe SQLite a effectué des benchmarks sur son implémentation WebAssembly par rapport à l'ancien Web SQL. Ces benchmarks montrent que SQLite Wasm est généralement aussi rapide que Web SQL. Parfois, c'est un peu plus lent, parfois un peu plus rapide. Pour en savoir plus, consultez la page des résultats.
Exemple de code de démarrage
Comme indiqué précédemment, SQLite Wasm avec le backend de persistance du système de fichiers privés Origin doit s'exécuter à partir d'un contexte de worker. La bonne nouvelle est que la bibliothèque s'occupe automatiquement de tout cela pour vous et que vous pouvez l'utiliser directement à partir du thread 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);
}
})();
Démo
Pour voir le code ci-dessus en action, consultez la démonstration. N'oubliez pas de consulter le code source sur Glitch. Notez que la version intégrée ci-dessous n'utilise pas le backend OPFS, mais qu'elle le fait lorsque vous ouvrez la démonstration dans un onglet distinct.
Déboguer le système de fichiers privé Origin
Pour déboguer la sortie du système de fichiers privés d'origine de SQLite Wasm, utilisez l'extension Chrome OPFS Explorer.
Après avoir installé l'extension, ouvrez les outils pour les développeurs Chrome, sélectionnez l'onglet OPFS Explorer (Explorer OPFS), puis vous pouvez inspecter ce que SQLite Wasm écrit dans le système de fichiers privés d'origine.
Si vous sélectionnez l'un des fichiers dans la fenêtre de l'explorateur OPFS dans DevTools, vous pouvez l'enregistrer sur le disque local. Vous pouvez ensuite utiliser une application telle que SQLite Viewer pour inspecter la base de données afin de vous assurer que SQLite Wasm fonctionne comme promis.
Obtenir de l'aide et envoyer des commentaires
SQLite Wasm est développé et géré par la communauté SQLite. Pour obtenir de l'aide et envoyer des commentaires, recherchez des informations sur le forum d'assistance et publiez-y des messages. La documentation complète est disponible sur le site SQLite.