Optimisasi Performa Aplikasi Web Modern

Dalam membangun aplikasi penunjang ibadah harian seperti SakuMuslim, performa aplikasi yang cepat dan kemampuan akses offline adalah prioritas utama. Warga tidak boleh menunggu loading screen hanya untuk mencatat progres tilawah Al-Qur’an mereka ketika koneksi sinyal sedang tidak stabil.

Di artikel ini, kami ingin membagikan tantangan teknis dan keputusan arsitektur yang kami ambil saat melakukan sinkronisasi database lokal dan cloud.

Tantangan Awal

Pada versi awal SakuMuslim, setiap kali pengguna mencatat aktivitas ibadah (seperti checklist salat rawatib atau tadarus), aplikasi langsung melakukan API call ke database Supabase.

Metode sinkron langsung ini memiliki tiga kelemahan utama:

1. Latensi: Ada delay 200ms - 800ms sebelum UI ter-update.
2. Ketergantungan Internet: Aplikasi gagal mencatat jika pengguna berada di tempat minim sinyal.
3. Overhead Database: Terlalu banyak koneksi aktif yang menghabiskan kuota request gratis.

Pendekatan Offline-First dengan SQLite

Untuk mengatasinya, kami merubah arsitektur menjadi Offline-First. Kami menggunakan SQLite (melalui package drift di Flutter) sebagai single source of truth untuk UI aplikasi.

+------------+      membaca/menulis      +---------------+
|     UI     |  <=====================>  | Database Lokal| (SQLite)
+------------+                           +---------------+
                                                ^
                                                | sinkronisasi background
                                                v
                                         +---------------+
                                         | Database Cloud| (Supabase)
                                         +---------------+

Seluruh aktivitas baca-tulis dari antarmuka aplikasi dilakukan secara instan langsung ke penyimpanan internal handphone. Efeknya, UI terasa sangat responsif dan aplikasi dapat berfungsi 100% tanpa internet.

Sinkronisasi Cerdas dengan Delta Sync

Proses sinkronisasi ke Supabase dipindahkan sepenuhnya ke latar belakang (background sync). Agar hemat kuota data pengguna, kami menerapkan teknik Delta Sync dibanding melakukan upload seluruh tabel:

1. Setiap baris data lokal memiliki kolom updated_at dan flag boolean is_synced.
2. Saat koneksi internet terdeteksi kembali, service background akan mencari baris yang memiliki flag is_synced = false.
3. Hanya data yang berubah saja yang di-upload ke Supabase dalam satu batch request.
4. Supabase memproses data tersebut, lalu membalas dengan status sukses yang akan memperbarui flag lokal menjadi is_synced = true.

Dengan pendekatan ini, kami berhasil menghemat penggunaan kuota database Supabase hingga 82% dan memberikan kenyamanan penuh bagi seluruh pengguna SakuMuslim.