Gunakan SQLite untuk menangani semua kebutuhan penyimpanan Anda secara berperforma tinggi di web.
SQLite adalah sistem manajemen database relasional yang populer, ringan, dan disematkan, serta open source. Banyak developer menggunakannya untuk menyimpan data secara terstruktur dan mudah digunakan. Karena ukurannya yang kecil dan persyaratan memori yang rendah, SQLite sering dimanfaatkan sebagai mesin database di perangkat seluler, aplikasi desktop, dan browser web.
Salah satu fitur utama SQLite adalah database serverless, yang berarti tidak memerlukan proses server terpisah untuk beroperasi. Sebagai gantinya, database disimpan dalam satu file di perangkat pengguna, sehingga mudah diintegrasikan ke dalam aplikasi.
SQLite berdasarkan Web Assembly
Ada sejumlah versi SQLite tidak resmi berdasarkan Web Assembly (Wasm), yang memungkinkan SQLite digunakan di browser web, misalnya, sql.js. Subproject WASM/JS sqlite3 adalah upaya pertama yang secara resmi terkait dengan project SQLite, sehingga build Wasm dari library ini menjadi anggota tetap dalam keluarga hasil pengiriman SQLite yang didukung. Tujuan konkret dari project ini meliputi:
- Mengikat API sqlite3 tingkat rendah yang sedekat mungkin dengan API C dalam hal penggunaan.
- API berorientasi objek tingkat yang lebih tinggi, yang lebih mirip dengan sql.js dan implementasi gaya Node.js, yang berinteraksi langsung dengan API tingkat rendah. API ini harus digunakan dari thread yang sama dengan API tingkat rendah.
- API berbasis Worker yang berkomunikasi dengan API sebelumnya melalui pesan Worker. API ini ditujukan untuk digunakan di thread utama, dengan API tingkat lebih rendah yang diinstal di thread Pekerja, dan berkomunikasi dengan API tersebut melalui pesan Pekerja.
- Varian berbasis Promise dari Worker API yang sepenuhnya menyembunyikan aspek komunikasi lintas thread dari pengguna.
- Dukungan untuk penyimpanan sisi klien persisten menggunakan JavaScript API yang tersedia, termasuk Origin Private File System (OPFS).
Menggunakan SQLite Wasm dengan backend persistensi Origin Private File System
Menginstal library dari npm
Instal paket @sqlite.org/sqlite-wasm dari npm dengan perintah berikut:
npm install @sqlite.org/sqlite-wasm
Origin Private File System
Origin Private File System (OPFS, bagian dari File System Access API) dilengkapi dengan area khusus yang memberikan akses data berperforma sangat tinggi. Platform baru ini berbeda dari platform yang sudah ada karena menawarkan akses tulis di tempat dan eksklusif ke konten file. Perubahan ini, bersama dengan kemampuan untuk membaca modifikasi yang belum di-flush secara konsisten dan ketersediaan varian sinkron pada pekerja khusus, secara signifikan meningkatkan performa dan membuka blokir kasus penggunaan baru.
Seperti yang dapat Anda bayangkan, poin terakhir dari sasaran project, Dukungan untuk penyimpanan sisi klien yang persisten menggunakan JavaScript API yang tersedia, disertai dengan persyaratan performa yang ketat terkait penyimpanan data ke file database.
Di sinilah Origin Private File System, dan khususnya, metode
createSyncAccessHandle()
objek
FileSystemFileHandle
berperan. Metode ini menampilkan Promise yang diselesaikan ke objek FileSystemSyncAccessHandle yang dapat digunakan untuk membaca dan menulis ke file secara serentak. Sifat sinkron metode ini memberikan keuntungan performa, tetapi oleh karena itu, metode ini hanya dapat digunakan di dalam Web Workers khusus untuk file dalam Origin Private File System sehingga thread utama tidak dapat diblokir.
Menetapkan header yang diperlukan
Di antara file lainnya, arsip SQLite Wasm yang didownload berisi file sqlite3.js dan sqlite3.wasm, yang membentuk build WASM/JS sqlite3. Direktori jswasm
berisi hasil pengiriman sqlite3 inti dan direktori tingkat teratas
berisi aplikasi demonstrasi dan pengujian. Browser tidak akan menayangkan file Wasm dari URL file://, jadi aplikasi apa pun yang Anda buat dengan ini memerlukan server web dan server tersebut harus menyertakan header berikut dalam responsnya saat menayangkan file:
Cross-Origin-Opener-Policyditetapkan kesame-origindirektif, yang mengisolasi konteks penjelajahan secara eksklusif ke dokumen dengan origin yang sama. Dokumen lintas origin tidak dimuat dalam konteks penjelajahan yang sama.Cross-Origin-Embedder-Policyditetapkan kerequire-corpdirective, sehingga dokumen hanya dapat memuat resource dari origin yang sama, atau resource yang secara eksplisit ditandai sebagai dapat dimuat dari origin lain.
Alasan adanya header ini adalah karena SQLite Wasm bergantung pada
SharedArrayBuffer,
dan menyetel header ini adalah bagian dari
persyaratan keamanannya.
Jika Anda memeriksa traffic dengan DevTools, Anda akan menemukan informasi berikut:
Speedtest
Tim SQLite telah menjalankan beberapa tolok ukur pada penerapan WebAssembly mereka dibandingkan dengan Web SQL yang tidak digunakan lagi. Tolok ukur ini menunjukkan bahwa SQLite Wasm umumnya sama cepatnya dengan Web SQL. Terkadang sedikit lebih lambat, terkadang sedikit lebih cepat. Lihat semua detail di halaman hasil.
Contoh kode untuk memulai
Seperti yang disebutkan sebelumnya, SQLite Wasm dengan backend persistensi Origin Private File System perlu dijalankan dari konteks Worker. Kabar baiknya adalah library ini otomatis menangani semua ini untuk Anda dan Anda dapat menggunakannya langsung dari thread utama.
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
Lihat cara kerja kode di atas dalam demo. Pastikan untuk melihat kode sumber di GitHub. Perhatikan bagaimana versi sematan di bawah tidak menggunakan backend OPFS, tetapi saat Anda membuka demo di tab terpisah, demo akan menggunakan backend OPFS.
Men-debug Origin Private File System
Untuk men-debug output Origin Private File System SQLite Wasm, gunakan ekstensi Chrome OPFS Explorer.
Setelah menginstal ekstensi, buka Chrome DevTools, pilih tab OPFS Explorer, lalu Anda siap memeriksa apa yang ditulis SQLite Wasm ke Origin Private File System.
Jika Anda memilih salah satu file di jendela OPFS Explorer di DevTools, Anda dapat menyimpannya ke disk lokal. Anda kemudian dapat menggunakan aplikasi seperti SQLite Viewer untuk memeriksa database, sehingga Anda dapat memastikan bahwa SQLite Wasm benar-benar berfungsi seperti yang dijanjikan.
Mendapatkan bantuan dan memberikan masukan
SQLite Wasm dikembangkan dan dikelola oleh komunitas SQLite. Dapatkan bantuan dan berikan masukan dengan menelusuri dan memposting di forum dukungan. Dokumentasi lengkap tersedia di situs SQLite.