Gunakan SQLite untuk menangani semua kebutuhan penyimpanan Anda secara berperforma tinggi di web.
Tentang SQLite
SQLite adalah sistem pengelolaan database relasional open source yang ringan dan tersemat. 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 ini merupakan database serverless, sehingga tidak memerlukan proses server terpisah untuk beroperasi. Sebaliknya, database disimpan dalam satu file di perangkat pengguna, sehingga mudah untuk diintegrasikan 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 peralatan audio adalah upaya pertama yang secara resmi terkait dengan project SQLite yang membuat build Wasm dari library yang merupakan anggota mapan dari kelompok hasil SQLite yang didukung. Tujuan konkret dari proyek ini meliputi:
- Mengikat HMAC3 API tingkat rendah yang semirip mungkin dengan API C dalam hal penggunaan.
- API berorientasi objek tingkat tinggi, lebih mirip dengan sql.js dan implementasi gaya Node.js, yang berkomunikasi 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. Fitur ini dimaksudkan untuk digunakan di thread utama, dengan API tingkat rendah yang diinstal di thread Pekerja, dan berkomunikasi dengannya 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
Origin Private File System
Origin Private File System (OPFS, bagian dari File System Access API) ditambahkan dengan platform khusus yang menghadirkan akses berperforma sangat tinggi ke data. Platform baru ini berbeda dari yang sudah ada dengan menawarkan akses tulis langsung dan eksklusif ke konten file. Perubahan ini, beserta kemampuan untuk secara konsisten membaca perubahan yang tidak dihapus dan ketersediaan varian sinkron pada pekerja khusus, meningkatkan performa secara signifikan dan menghentikan 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 mempertahankan data ke file database.
Di sinilah Sistem File Pribadi Origin, dan, lebih khusus lagi, metode
createSyncAccessHandle()
dari
objek
FileSystemFileHandle
akan berperan. Metode ini menampilkan Promise yang me-resolve ke
objek FileSystemSyncAccessHandle
yang dapat digunakan untuk membaca dan menulis ke file secara sinkron. Sifat
sinkron dari metode ini memberikan keunggulan performa, tetapi oleh karena itu
hanya dapat digunakan di dalam
Pekerja Web khusus untuk
file dalam Origin Private File System sehingga thread utama tidak dapat diblokir.
Menyetel header yang diperlukan
Di antara file lainnya, arsip SQLite Wasm yang didownload berisi file sqlite3.js
dan sqlite3.wasm, yang membentuk build WASM/JS diizinkan 3. Direktori jswasm
berisi hasil HMAC3 inti dan direktori level teratas
berisi aplikasi demonstrasi dan pengujian. Browser tidak akan menyajikan file Wasm dari
URL file://, sehingga aplikasi yang Anda build dengan URL ini memerlukan server web dan
server tersebut harus menyertakan header berikut dalam responsnya saat menyajikan
file:
Cross-Origin-Opener-Policyditetapkan ke perintahsame-origin, yang mengisolasi konteks penjelajahan secara eksklusif ke dokumen dengan origin yang sama. Dokumen lintas asal 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 menyetel header ini merupakan bagian dari
persyaratan keamanannya.
Jika memeriksa traffic dengan DevTools, Anda akan menemukan informasi berikut:
Uji kecepatan
Tim SQLite telah menjalankan beberapa tolok ukur pada implementasi WebAssembly dibandingkan dengan Web SQL yang tidak digunakan lagi. Tolok ukur ini menunjukkan bahwa SQLite Wasm umumnya sama cepatnya dengan Web SQL. Kadang 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 persistensi Origin Private File System harus dijalankan dari konteks Pekerja. Kabar baiknya, 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. Perlu diperhatikan bahwa versi tersemat di bawah tidak menggunakan backend OPFS, tetapi saat Anda membuka demo di tab terpisah, versi tersebut menggunakannya.
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 dapat memeriksa apa yang ditulis SQLite Wasm ke Origin Private File System.
Jika mengklik salah satu file di jendela OPFS Explorer di DevTools, Anda dapat menyimpannya ke disk lokal. Selanjutnya Anda dapat menggunakan aplikasi seperti SQLite Viewer untuk memeriksa database sehingga Anda dapat meyakinkan 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.
Ucapan terima kasih
Banner besar oleh Tobias Fischer di Unsplash.