Digital Transformation
Navigation Preload (Service Worker)
TL;DR: Navigation Preload adalah fitur Service Worker yang membiarkan browser mengirim network request ke origin secara paralel saat service worker masih booting. Tanpa fitur ini, navigasi yang dikontrol service worker bisa idle 200 sampai 500 ms menunggu worker siap. Aktifkan dengan
registration.navigationPreload.enable().
Apa itu Navigation Preload?
Navigation Preload adalah API yang memungkinkan browser memulai fetch navigasi ke server tanpa menunggu Service Worker selesai start up. Saat user mengetik URL atau klik link, browser butuh menjalankan service worker handler. Booting handler ini bisa makan waktu, terutama di perangkat low-end Indonesia. Navigation Preload mengirim request paralel ke origin, jadi data sudah tersedia saat handler siap memproses.
Anda bisa membayangkan service worker seperti petugas keamanan yang harus bangun dulu sebelum membuka pintu. Navigation Preload membiarkan kurir tetap berangkat ambil paket dari gudang sambil petugas bangun.
Cara Aktifkan
| Langkah | Kode singkat |
|---|---|
| Saat install | self.addEventListener('activate', e => e.waitUntil(self.registration.navigationPreload.enable())) |
| Saat fetch event | event.preloadResponse berisi Promise response dari browser |
| Fallback | Pakai response preload jika ada, kalau tidak fetch ulang dari cache atau network |
Dukungan browser sudah Baseline luas di Chrome, Edge, Firefox, dan Safari sejak 2023. Lihat dokumentasi Navigation Preload di MDN.
Kenapa Penting?
Banyak Progressive Web App di Indonesia gagal karena saat user kembali dari background, service worker harus restart dan menunda navigasi 1 sampai 2 detik. Berdasarkan praktik yang Vito Atmo pakai di proyek Atmo LMS, mengaktifkan Navigation Preload memangkas waktu navigasi balik dari latar belakang 35 sampai 50 persen. Untuk situs e-commerce dengan service worker offline-first, fitur ini wajib aktif supaya pengalaman tetap mulus.
Pertanyaan Umum
Apakah Navigation Preload mengganti caching service worker?
Tidak. Navigation Preload melengkapi cache, tidak menggantikan. Anda tetap perlu strategi cache untuk offline.
Apakah aman untuk semua situs?
Aman selama Anda menangani event.preloadResponse dengan benar dan tetap punya fallback. Tanpa fallback, request preload yang gagal bisa bikin halaman blank.