Aplikasi Siap Pasang di HP & Unduh Laporan PDF | MyPocket

Tantangan & Kebutuhan Pengguna

Pengguna membutuhkan aplikasi keuangan yang tetap sigap dibuka dari layar utama ponsel meskipun koneksi seluler sedang tidak stabil, sekaligus memiliki kebebasan penuh untuk mengekspor dan mencadangkan data keuangannya kapan saja ke dalam format spreadsheet (CSV), cadangan struktur utuh (JSON), maupun laporan resmi siap cetak (PDF) tanpa membebani server dengan proses rendering headless browser yang berat.

Aplikasi finansial yang andal harus tetap responsif saat sinyal jaringan melemah dan selalu siap menyerahkan data milik pengguna dalam format standar yang terbuka.

Solusi & Cara Kerja

Pada sisi PWA, script `build-sw.js` menggunakan `workbox-build` (`injectManifest`) untuk mem-bundle seluruh modul Workbox secara lokal ke `public/sw.js` tanpa ketergantungan CDN eksternal. Service worker membagi rute ke dalam 4 strategi: `CacheFirst` (aset gambar & font selama 30 hari), `StaleWhileRevalidate` (chunk statis `/_next/static/` selama 7 hari), `NetworkFirst` dengan timeout 10 detik untuk `/api/`, serta `NetworkFirst` dengan timeout 5 detik untuk navigasi halaman. Pada sisi pelaporan, endpoint `/api/export` mengeksekusi query pemasukan dan pengeluaran secara paralel dengan `Promise.all`, mengurutkannya secara kronologis, lalu memformat hasilnya menjadi unduhan CSV, JSON Backup, atau halaman laporan HTML-PDF mandiri.

Berikut adalah konfigurasi strategi caching pada `sw.src.js` serta logika pembentukan multi-format pada `src/app/api/export/route.ts`:

Detail & Hal yang Diperhatikan

Zero-Headless PDF Generation: Alih-alih menjalankan Puppeteer/Chromium di server yang memakan ratusan MB RAM, format `'pdf'` menghasilkan dokumen HTML terisolasi dengan aturan `@media print` dan `-webkit-print-color-adjust: exact` sehingga warna kartu ringkasan dan tabel tercetak presisi melalui engine PDF native browser.
Sanitasi Kutip Ganda pada CSV: Catatan transaksi yang mengandung karakter kutip ganda atau koma di-escape menggunakan `.replace(/"/g, '""')` dan dibungkus tanda kutip agar kolom tidak bergeser saat dibuka di Excel.
Fail-Safe Build Pipeline: Script `build-sw.js` menangkap error kompilasi service worker dan keluar dengan `process.exit(0)` sebagai langkah pengaman agar kegagalan opsional SW tidak menghentikan proses deployment utama.

Tantangan & Kebutuhan Pengguna

Aplikasi finansial yang andal harus tetap responsif saat sinyal jaringan melemah dan selalu siap menyerahkan data milik pengguna dalam format standar yang terbuka.

Solusi & Cara Kerja

Berikut adalah konfigurasi strategi caching pada `sw.src.js` serta logika pembentukan multi-format pada `src/app/api/export/route.ts`:

Detail & Hal yang Diperhatikan

Zero-Headless PDF Generation: Alih-alih menjalankan Puppeteer/Chromium di server yang memakan ratusan MB RAM, format `'pdf'` menghasilkan dokumen HTML terisolasi dengan aturan `@media print` dan `-webkit-print-color-adjust: exact` sehingga warna kartu ringkasan dan tabel tercetak presisi melalui engine PDF native browser.
Sanitasi Kutip Ganda pada CSV: Catatan transaksi yang mengandung karakter kutip ganda atau koma di-escape menggunakan `.replace(/"/g, '""')` dan dibungkus tanda kutip agar kolom tidak bergeser saat dibuka di Excel.
Fail-Safe Build Pipeline: Script `build-sw.js` menangkap error kompilasi service worker dan keluar dengan `process.exit(0)` sebagai langkah pengaman agar kegagalan opsional SW tidak menghentikan proses deployment utama.