@magieno/web-sqlite

Web SQLite

Web SQLite is a wrapper for SQLite Wasm that uses the Origin Private File System (OPFS) to persist the SQLite database file.

It only supports OPFS as a persistence mechanism.

Installation

npm install @magieno/web-sqlite

Bundling using NPM

This library has two important files: web-sqlite.js and web-sqlite-worker.js. Due to some browser restrictions, SQLite WASM can only persist over OPFS in a Worker. Behind the scenes, WebSqlite communicates with a worker to run the SQL statements and return you the results on the main thread.

1- Install the NPM package

npm install @magieno/web-sqlite

2- Import the web-sqlite library in your code

import {SqliteClient} from "@magieno/web-sqlite";

const webSqliteWorkerPath = "assets/js/web-sqlite-worker.js"; // Must correspond to the path in your final deployed build.
const filename = "/test.sqlite3"; // This is the name of your database. It corresponds to the path in the OPFS.

const sqliteClient = new SqliteClient(filename, webSqliteWorkerPath)
await sqliteClient.init();

await sqliteClient.executeSql("CREATE TABLE IF NOT EXISTS test(a,b)");
await sqliteClient.executeSql("INSERT INTO test VALUES(?, ?)", [6,7]);
const results = await sqliteClient.executeSql("SELECT * FROM test");

3- Copy the node_modules/@magieno/web-sqlite/dist/bundle/web-sqlite-worker.js to your final bundle This is dependent on the framework you are using but the idea is that this .js file should be copied and available in your build.

Angular

Add this path: node_modules/@magieno/web-sqlite/dist/bundle/web-sqlite-worker.js to the angular.json file:

{
    "projects": {
        "app": {
            "architect": {
                "build": {
                    "options": {
                        "scripts": [
                        ...
                            // Add it here
                            "../node_modules/@magieno/web-sqlite/dist/bundle/web-sqlite-worker.js",
                        ]
                    }
                }
            }
        }
    }
}