Studi Kasus Vetmo: Pasang Workbox untuk Mode Offline Booking Klinik Hewan di 2026

TL;DR: Saat membangun Vetmo, layanan booking klinik hewan, kami menemukan 18 persen sesi booking gagal di tengah jalan karena sinyal pengguna ngedrop. Solusinya bukan menyalahkan koneksi, melainkan memasang Workbox untuk mode offline-first. Hasilnya: completion rate booking naik 22 persen dalam 60 hari, dan repeat user di area sinyal lemah tetap bisa booking.

Dalam beberapa proyek terakhir, saya melihat banyak website bisnis di Indonesia mengabaikan satu kenyataan sederhana: sinyal 4G di lapangan bukan 4G di Speedtest. Pengguna di basement mall, parkiran rumah sakit, atau di dalam mobil yang sedang bergerak akan kehilangan koneksi mendadak. Kalau form booking belum sempat tersimpan, semua usaha marketing untuk mendatangkan mereka ke landing page menjadi sia-sia.

Vetmo, salah satu portfolio Vito Atmo di kategori pet care, menghadapi masalah ini di Q1 2026. Booking funnel kami terlihat bagus: traffic naik, klik tombol "Booking Sekarang" konsisten, tapi conversion mentok di 31 persen. Setelah audit dengan RUM (Real User Monitoring), kami menemukan polanya: 18 persen sesi mati di langkah 3 dari 4, tepat saat memilih slot waktu.

Masalah: Sinyal Lemah Membunuh Booking

Vetmo melayani pemilik hewan di Jakarta, Bekasi, dan Tangerang. Banyak klinik mitra berada di area dengan struktur bangunan tebal, dan pemilik hewan sering mengakses aplikasi sambil menggendong hewan menuju mobil. Skenario worst-case: mereka kehilangan koneksi tepat di tengah pemilihan slot waktu.

Tanpa service worker, halaman akan menampilkan dinosaurus Chrome ketika navigasi ke step berikutnya. Pengguna refresh, semua state hilang, mereka frustasi, dan abandonment terjadi.

Pilihan: Service Worker Manual vs Workbox

Saya sempat mempertimbangkan menulis service worker dari nol. Tapi setelah membaca dokumentasi Workbox di web.dev, saya memutuskan pakai Workbox karena tiga alasan:

Workbox memberikan strategi cache-first untuk asset statis, network-first untuk data booking, dan stale-while-revalidate untuk daftar klinik. Tidak perlu menulis cache invalidation logic dari nol.

Implementasi di Vetmo

Kami pasang Workbox 7 lewat plugin next-pwa di stack Next.js 15. Konfigurasi inti:

1. Cache-first untuk font, ikon, dan CSS statis dengan expiry 30 hari.
2. Network-first dengan timeout 3 detik untuk endpoint /api/booking/slots, fallback ke cache kalau timeout.
3. Background sync untuk POST booking yang gagal, queue dan retry saat koneksi pulih.

Background sync adalah game-changer. Ketika pengguna menekan "Konfirmasi Booking" di kondisi offline, request masuk ke queue Workbox. Begitu sinyal balik, request otomatis dikirim, dan pengguna mendapat notifikasi sukses tanpa harus mengisi ulang form.

Hasil 60 Hari Setelah Rilis

Data dari April sampai Juni 2026 menunjukkan perubahan konsisten:

Angka ini berasal dari Vetmo internal analytics dan terverifikasi via field data CrUX. Saya tidak klaim ini akan menghasilkan angka sama untuk semua website. Variasi 5 sampai 10 persen wajar tergantung industri dan profil pengguna.

Pertanyaan Umum

Apakah Workbox cocok untuk semua website bisnis?

Tidak. Workbox paling bermanfaat untuk website dengan repeat user, form multi-step, atau data yang bisa disajikan dari cache. Untuk landing page satu halaman, manfaatnya minim.

Apakah Workbox menambah bundle size signifikan?

Tidak. Runtime Workbox sekitar 5 sampai 8 KB gzipped dan dimuat dari service worker, bukan main thread.

Bagaimana kalau Workbox bermasalah saat update?

Aktifkan skipWaiting dan clientsClaim, lalu pakai versioning di cache name. Worst case, pengguna refresh sekali.

Pelajaran untuk Marketer Indonesia

Investasi 3 sampai 5 hari development untuk Workbox terbayar dalam 60 hari di Vetmo. Untuk website yang melayani area dengan kualitas sinyal variatif (banyak di Indonesia), service worker bukan lagi pelengkap, melainkan kebutuhan dasar conversion.