💾 Using SQLite in the Browser with @capacitor-community/sqlite

This guide explains how to enable and use SQLite in the browser during development using the @capacitor-community/sqlite plugin. SQLite does not run natively in browsers, so the plugin uses a WebAssembly + IndexedDB backend when running in a web environment.

---

✅ What This Enables

• Allows development and testing of SQLite logic in the browser.
• Schema, queries, and logic mirror native SQLite.
• Uses jeep-sqlite as a custom web component internally.

---

📦 Prerequisites

Install the plugin (if not already done):

npm install @capacitor-community/sqlite
npx cap sync

---

🛠 Setup: Web Support for SQLite

1. Import and Initialize SQLite for Web

Edit your main.ts:

import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

import { Capacitor } from '@capacitor/core';
import { defineCustomElements } from '@ionic/pwa-elements/loader';

if (environment.production) {
  enableProdMode();
}

if (Capacitor.getPlatform() === 'web') {
  import('@capacitor-community/sqlite/dist/esm/web').then(async (module) => {
    const sqlite = new module.CapacitorSQLiteWeb();
    customElements.define('jeep-sqlite', sqlite.constructor);
    await sqlite.initWebStore(); // ✅ Important: enables browser DB
  });

  defineCustomElements(window); // Required if using Ionic PWA Elements
}

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

---

2. Platform Check in SQLite Service

Update your SQLite service to check for web environment:

import { Capacitor } from '@capacitor/core';
import { CapacitorSQLite, SQLiteConnection } from '@capacitor-community/sqlite';

const platform = Capacitor.getPlatform();
const sqlite = new SQLiteConnection(CapacitorSQLite);

if (platform === 'web') {
  await CapacitorSQLite.initWebStore(); // Ensures web DB is ready
}

const db = await sqlite.createConnection('mydb', false, 'no-encryption', 1);
await db.open();

// Create table example
await db.execute(`CREATE TABLE IF NOT EXISTS test (id INTEGER PRIMARY KEY, name TEXT);`);

---

🧪 Development Notes

• The database is backed by IndexedDB, not a file.
• Data is persistent across browser reloads (within same origin).
• You can inspect data in browser DevTools → Application → IndexedDB → jeep-sqlite-store.

---

⚠️ Limitations

Feature	Browser Support
Standard SQL syntax	✅ Yes
Real SQLite file	❌ No
Data persistence	✅ Yes (IndexedDB)
Export/import	⚠️ Possible with base64
Performance	⚠️ Slower than native

---

📦 Optional: Install Ionic PWA Elements (if using modals, camera, etc.)

npm install @ionic/pwa-elements

Then in main.ts:

import { defineCustomElements } from '@ionic/pwa-elements/loader';
defineCustomElements(window);

---

✅ Summary

• You can run SQLite in the browser using @capacitor-community/sqlite + WebAssembly
• Works seamlessly with the same logic as your native app
• Great for development before deploying to Android/iOS

---