Dengan SQLite Wasm yang didukung oleh sistem file pribadi asal, ada pengganti serbaguna untuk teknologi database Web SQL yang tidak digunakan lagi. Artikel ini adalah panduan untuk memigrasikan data dari Web SQL ke SQLite Wasm.
Latar belakang yang diperlukan
Postingan Penghentian penggunaan dan penghapusan Web SQL mengumumkan penghentian penggunaan teknologi database Web SQL. Meskipun teknologi itu sendiri mungkin tidak digunakan lagi, kasus penggunaan yang ditangani oleh teknologi tersebut masih sangat banyak, sehingga postingan lanjutan SQLite Wasm di browser yang didukung oleh Sistem File Pribadi Origin, menguraikan kumpulan teknologi pengganti berdasarkan database SQLite, dikompilasi ke Web Assembly (Wasm), dan didukung oleh sistem file pribadi origin. Untuk menutup lingkaran, artikel ini menunjukkan cara memigrasikan database dari Web SQL ke SQLite Wasm.
Memigrasikan database
Empat langkah berikut menunjukkan ide konseptual untuk memigrasikan database Web SQL ke SQLite Wasm, dengan database SQLite yang didukung oleh sistem file pribadi asal. Ini dapat berfungsi sebagai dasar untuk kode Anda sendiri yang disesuaikan dengan kebutuhan migrasi Web SQL Anda.
Database Web SQL yang akan dimigrasikan
Asumsi dasar panduan migrasi ini adalah Anda memiliki satu (atau beberapa) database Web SQL yang ada yang menyimpan data yang relevan dengan aplikasi Anda. Pada screenshot di bawah, Anda melihat contoh database bernama mydatabase dengan tabel hujan deras yang memetakan suasana hati ke tingkat keparahan. Chrome DevTools memungkinkan Anda melihat database Web SQL untuk proses debug, seperti yang ditunjukkan pada screenshot berikut.
Menerjemahkan database Web SQL ke pernyataan SQL
Untuk memigrasikan data dengan cara yang transparan bagi pengguna, yaitu tanpa mengharuskan mereka melakukan langkah migrasi sendiri, potongan data dalam database harus diterjemahkan kembali ke pernyataan SQL asli yang membuatnya. Tantangan ini telah muncul sebelumnya, dan skrip migrasi yang digunakan dalam artikel ini—mywebsqldump.js
—didasarkan pada library komunitas yang disebut websqldump.js
, dengan beberapa penyesuaian kecil. Contoh kode berikut menunjukkan kode yang diperlukan untuk menerjemahkan database Web SQL mydatabase ke kumpulan pernyataan SQL.
websqldump.export({
database: 'mydatabase',
version: '1.0',
success: function(sql) {
// The SQL statements.
},
error: function(err) {
// Handle the error.
}
});
Menjalankan kode ini akan menghasilkan string pernyataan SQL di bawah.
CREATE TABLE IF NOT EXISTS rainstorms (mood text, severity int);
INSERT INTO rainstorms(mood,severity) VALUES ('somber','6');
INSERT INTO rainstorms(mood,severity) VALUES ('rainy','8');
INSERT INTO rainstorms(mood,severity) VALUES ('stormy','2');
Mengimpor data ke SQLite Wasm
Yang tersisa hanyalah menjalankan perintah SQL ini dalam konteks SQLite Wasm. Untuk mengetahui semua detail terkait penyiapan SQLite Wasm, lihat artikel SQLite Wasm di browser yang didukung oleh Sistem File Pribadi Origin, tetapi intinya ada di bawah. Ingat bahwa kode ini harus berjalan di Pekerja (yang dibuat secara otomatis oleh library untuk Anda), dengan header HTTP yang diperlukan ditetapkan dengan benar. Anda dapat menginstal paket @sqlite.org/sqlite-wasm
dari npm.
import { sqlite3Worker1Promiser } from '@sqlite.org/sqlite-wasm';
(async () => {
try {
const promiser = await new Promise((resolve) => {
const _promiser = sqlite3Worker1Promiser({
onready: () => {
resolve(_promiser);
},
});
});
let response;
response = await promiser('open', {
filename: 'file:mydatabase.db?vfs=opfs',
});
const { dbId } = response;
const sql = `
CREATE TABLE IF NOT EXISTS rainstorms (mood text, severity int);
INSERT INTO rainstorms(mood,severity) VALUES ('somber','6');
INSERT INTO rainstorms(mood,severity) VALUES ('rainy','8');
INSERT INTO rainstorms(mood,severity) VALUES ('stormy','2');`
await promiser('exec', { dbId, sql });
await promiser('close', { dbId });
} catch (err) {
if (!(err instanceof Error)) {
err = new Error(err.result.message);
}
console.error(err.name, err.message);
}
})();
Setelah menjalankan kode ini, periksa file database yang diimpor dengan ekstensi Chrome DevTools OPFS Explorer. Sekarang ada dua file, satu dengan database yang sebenarnya, dan satu lagi dengan informasi pencatatan jurnal. Perhatikan bahwa kedua file ini berada di sistem file pribadi asal, sehingga Anda perlu menggunakan ekstensi OPFS Explorer untuk melihatnya.
Untuk benar-benar memverifikasi bahwa data yang diimpor sama dengan data Web SQL awal, klik file mydatabase.db
dan ekstensi OPFS Explorer akan menampilkan dialog Save File untuk memungkinkan Anda menyimpan file dalam sistem file yang terlihat pengguna. Setelah file database disimpan, gunakan aplikasi penampil SQLite untuk menjelajahi data. Project Fugu API Showcase menampilkan beberapa aplikasi untuk menggunakan SQLite di browser. Misalnya, Sqlime — SQLite Playground memungkinkan Anda membuka file database SQLite dari hard disk dan menjalankan kueri di database. Seperti yang Anda lihat pada screenshot di bawah, tabel hujan badai telah diimpor dengan benar ke SQLite.
Mengosongkan penyimpanan Web SQL
Meskipun (mungkin mengejutkan) tidak mungkin menghapus database Web SQL, Anda tetap harus mengosongkan beberapa penyimpanan dengan menghapus tabel Web SQL yang sekarang tidak digunakan lagi setelah memigrasikan data ke SQLite Wasm. Untuk mencantumkan semua tabel dalam database Web SQL dan menghapusnya menggunakan JavaScript, gunakan kode seperti dalam cuplikan berikut:
const dropAllTables = () => {
try {
db.transaction(function (tx) {
tx.executeSql(
"SELECT name FROM sqlite_master WHERE type='table' AND name !='__WebKitDatabaseInfoTable__'",
[],
function (tx, result) {
const len = result.rows.length;
const tableNames = [];
for (let i = 0; i < len; i++) {
const tableName = result.rows.item(i).name;
tableNames.push(`'${tableName}'`);
db.transaction(function (tx) {
tx.executeSql('DROP TABLE ' + tableName);
});
}
console.log(`Dropped table${tableNames.length > 1 ? 's' : ''}: ${tableNames.join(', ')}.`);
}
);
});
} catch (err) {
console.error(err.name, err.message);
}
};
Menangani data setelah migrasi
Setelah memigrasikan data, gunakan data tersebut seperti yang diuraikan dalam Contoh kode memulai ini. Lihat referensi SQLite Wasm API untuk mengetahui detailnya. Sekali lagi, perlu diingat bahwa Anda perlu mengakses SQLite Wasm dari Pekerja jika menggunakan sistem file pribadi asal sebagai backend penyimpanan.
Melakukan pengujian
Demo ini memungkinkan Anda mengisi database Web SQL dengan data contoh, lalu membuang data Web SQL sebagai pernyataan SQL, yang selanjutnya akan diimpor ke SQLite Wasm yang didukung oleh sistem file pribadi asal. Terakhir, Anda mengosongkan penyimpanan dengan menghapus data Web SQL yang sudah tidak digunakan. Periksa kode sumber untuk implementasi lengkap, termasuk file mywebsqldump.js
yang di-patch.
Kesimpulan
Memigrasikan database Web SQL ke SQLite Wasm yang didukung oleh sistem file pribadi asal dapat dilakukan dengan cara yang transparan bagi pengguna. Mereka tidak akan menyadari bahwa data mereka kini dihosting di sistem file pribadi asal dalam database SQLite, dan tidak lagi berada di Web SQL. Secara keseluruhan, migrasi dari Web SQL ke SQLite adalah langkah yang diperlukan bagi developer web yang ingin memastikan stabilitas dan skalabilitas jangka panjang aplikasi mereka. Meskipun prosesnya mungkin memerlukan beberapa upaya awal, manfaat dari solusi database yang lebih andal, fleksibel, dan, yang terpenting, siap untuk masa depan, membuat investasi ini sangat berharga.