Gunakan SQLite untuk menangani semua kebutuhan penyimpanan Anda dengan performa yang baik di web.
SQLite adalah sistem manajemen database relasional yang populer, open source, ringan, dan tersemat. Banyak developer menggunakannya untuk menyimpan data dengan cara yang 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 memudahkan integrasi ke dalam aplikasi.
SQLite berdasarkan Web Assembly
Ada sejumlah versi SQLite tidak resmi berdasarkan Web Assembly (Wasm), yang memungkinkannya digunakan di browser web, misalnya, sql.js. Subproject WASM/JS sqlite3 adalah upaya pertama yang secara resmi dikaitkan dengan project SQLite yang membuat build Wasm dari library yang dibuat anggota dari keluarga hasil SQLite yang didukung. Sasaran konkret project ini mencakup:
- Mengikat API sqlite3 tingkat rendah yang sedekat mungkin dengan API C dalam hal penggunaan.
- API berorientasi objek level yang lebih tinggi, lebih mirip dengan sql.js dan implementasi bergaya Node.js, yang berbicara langsung ke API level rendah. API ini harus digunakan dari thread yang sama dengan API level rendah.
- API berbasis Pekerja yang berkomunikasi dengan API sebelumnya melalui pesan Pekerja. API ini ditujukan untuk digunakan di thread utama, dengan API level lebih rendah diinstal di thread Pekerja, dan berkomunikasi dengan mereka melalui pesan Pekerja.
- Varian Worker API berbasis Promise 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
Sistem File Pribadi Origin
Origin Private File System (OPFS, bagian dari File System Access API) dilengkapi dengan platform khusus yang memberikan akses ke data dengan performa sangat tinggi. Platform baru ini berbeda dari platform yang ada dengan menawarkan akses tulis eksklusif dan di tempat ke konten file. Perubahan ini, bersama dengan kemampuan untuk membaca modifikasi yang tidak dihapus 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 persisten menggunakan JavaScript API yang tersedia, dilengkapi dengan
persyaratan performa yang ketat terkait penyimpanan data ke file database.
Di sinilah Sistem File Pribadi Origin, dan, lebih khusus lagi, metode
createSyncAccessHandle()
dari
objek
FileSystemFileHandle berperan. Metode ini menampilkan Promise yang diselesaikan ke objek FileSystemSyncAccessHandle yang dapat digunakan untuk membaca dan menulis ke file secara sinkron. Sifat
sinkron metode ini memberikan keunggulan performa, tetapi karena itu,
metode ini hanya dapat digunakan di dalam
Web Worker khusus untuk
file dalam Sistem File Pribadi Origin 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 inti sqlite3 dan direktori tingkat atas
berisi aplikasi demonstrasi dan pengujian. Browser tidak akan menayangkan file Wasm dari
URL file://, sehingga aplikasi apa pun yang Anda build dengan ini memerlukan server web dan
server tersebut harus menyertakan header berikut dalam responsnya saat menayangkan
file:
Cross-Origin-Opener-Policyditetapkan ke perintahsame-origin, 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 ke perintahrequire-corp, sehingga dokumen hanya dapat memuat resource dari origin yang sama, atau resource yang secara eksplisit ditandai sebagai dapat dimuat dari origin lain.
Alasan header ini adalah karena SQLite Wasm bergantung pada
SharedArrayBuffer,
dan menetapkan header ini adalah bagian dari
persyaratan keamanannya.
Jika memeriksa traffic dengan DevTools, Anda akan menemukan informasi berikut:
Speedtest
Tim SQLite telah menjalankan beberapa benchmark pada penerapan WebAssembly mereka dibandingkan dengan Web SQL yang tidak digunakan lagi. Benchmark 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 memulai
Seperti yang disebutkan sebelumnya, SQLite Wasm dengan backend persistensi Sistem File Pribadi Origin harus dijalankan dari konteks Pekerja. Kabar baiknya adalah library akan 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 Glitch. Perhatikan bahwa versi tersemat di bawah tidak menggunakan backend OPFS, tetapi saat Anda membuka demo di tab terpisah, versi tersebut akan menggunakan backend OPFS.
Men-debug Sistem File Pribadi Origin
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 untuk memeriksa apa yang ditulis SQLite Wasm ke Origin Private File System.
Jika memilih salah satu file di jendela OPFS Explorer di DevTools, Anda dapat menyimpannya ke disk lokal. Kemudian, Anda 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 ke forum dukungan. Dokumentasi lengkap tersedia di situs SQLite.