Perintah dan konteks
Situs Anda mengintersepsi request navigasi dengan Service Worker untuk fallback offline dan caching bersama. Navigasi pertama menunggu worker dimulai sebelum network request berjalan. Rancang navigation preload untuk browser yang tidak mendukungnya sambil mencegah request duplikat, penulisan cache yang usang, dan race condition pada respons.
Apa yang sedang diuji oleh pewawancara
Navigation preload adalah request navigasi yang dimulai oleh browser yang berjalan saat Service Worker dimulai; ini bukan precaching maupun link rel=preload untuk sembarang resource. Cakup pengaktifannya selama activate, membaca preloadResponse di fetch, kebijakan network-versus-cache, header Service-Worker-Navigation-Preload, fallback untuk batas waktu dan error, serta pengukuran.
Pertanyaan klarifikasi untuk diajukan terlebih dahulu
Target halaman dan cache
Perjelas apakah navigasi mengembalikan SSR HTML, shell SPA, atau halaman offline; path mana yang dapat di-cache; dan apakah data khusus pengguna harus melewati shared cache. Respons yang dipersonalisasi tidak boleh ditulis ke public cache.
Lifecycle dan dukungan browser
Konfirmasikan registrasi, pembaruan, cakupan kontrol, dan target dukungan browser untuk navigationPreload. Navigasi pertama yang tidak terkontrol tidak dapat diasumsikan melewati worker saat ini.
Kebijakan jaringan dan konsistensi
Pilih perilaku network-first, cache-first, atau stale-while-revalidate dan tentukan respons offline. Tentukan bagaimana server membaca header preload tanpa secara tidak sengaja mengubah cache key.
Kerangka jawaban 30 detik
“Lakukan feature-detect dan aktifkan navigation preload pada event activate Service Worker. Browser memulai request navigasi saat worker dimulai; fetch handler pertama-tama menunggu event.preloadResponse, lalu memeriksa cache atau memanggil fetch hanya jika tidak ada respons preload yang dapat digunakan. Terima respons hanya jika URL, identitas, dan kebijakan cache cocok. Bandingkan dukungan, waktu startup, TTFB, cache hit, request duplikat, dan fallback error sebelum dan sesudah peluncuran.”
Jawaban mendalam langkah demi langkah
Langkah 1: Aktifkan selama activate
Setelah memeriksa registration.navigationPreload, panggil enable() di dalam waitUntil milik activate agar konfigurasi selesai sebelum worker baru dianggap siap. setHeaderValue() dapat menambahkan konteks, tetapi nilainya tidak boleh berisi state privat atau state yang tidak dapat di-cache.
Langkah 2: Gunakan preloadResponse di fetch
Baca event.preloadResponse hanya untuk request navigasi. Ini dapat me-resolve ke Response atau undefined. Utamakan respons preload yang valid; jika tidak, ikuti kebijakan cache atau fetch biasa. Jangan memulai network request kedua sebelum memutuskan apakah promise preload telah menghasilkan hasil yang dapat digunakan.
Langkah 3: Tentukan batas cache dan identitas
SSR HTML yang berisi data identitas, geografi, atau eksperimen harus menghormati cache key dan header respons yang ada. Jangan memasukkannya ke Cache Storage tanpa syarat. Shell statis bisa bersifat cache-first; halaman yang dipersonalisasi bisa bersifat network-first, dengan perilaku Cookie, Authorization, dan Vary yang diuji secara eksplisit.
Langkah 4: Tangani header dan routing server
Server dapat memeriksa Service-Worker-Navigation-Preload untuk mengenali request paralel dan melewati pekerjaan yang berat atau menggunakan cache khusus. Proksi dan CDN memerlukan aturan eksplisit untuk meneruskan, mengabaikan, atau menerapkan vary pada header tersebut sehingga tidak menciptakan pembagian cache antar pengguna.
Langkah 5: Tangani race condition, timeout, dan error
Jika preload gagal, mengalami batas waktu, atau mengembalikan status yang tidak sesuai, beralihlah ke cache atau fetch biasa sesuai kebijakan. Response body biasanya bersifat sekali pakai; gunakan clone() saat dibutuhkan dua konsumen, dan batasi pembatalan serta timeout. Coba halaman offline setelah terjadi network error, tetapi jangan menyembunyikan server error yang sebenarnya.
Langkah 6: Lakukan degradasi dan pembaruan dengan aman
Browser yang tidak didukung melanjutkan dengan fetch Service Worker biasa; browser tanpa dukungan Service Worker menggunakan jaringan. Selama pembaruan worker, pertahankan protokol cache lama dan tunda penghapusan sampai worker baru dapat digunakan, guna menghindari pemadaman pada waktu aktivasi.
Langkah 7: Ukur performa nyata dan kebenaran
Bandingkan cold start dan warm start, jaringan lambat, mode offline, kunjungan pertama yang tidak terkontrol, dan pembaruan worker. Catat waktu navigation-to-response, TTFB, startup worker, preload hit, cache hit, request duplikat, dan fallback error. Verifikasi isolasi identitas dan perilaku browser, bukan hanya rata-rata waktu pemuatan.
Contoh jawaban berkualitas tinggi
Saya akan melakukan feature-detect dan mengaktifkan navigation preload di activate, lalu menunggu preloadResponse terlebih dahulu di fetch handler navigasi. Hanya jika tidak ada atau tidak sesuai, handler akan menggunakan cache atau fetch biasa. Kebijakan cache harus memisahkan shell statis dari SSR HTML yang dipersonalisasi, dan server dapat menggunakan header preload tanpa mengubah isolasi cache. Browser yang tidak mendukung tetap mempertahankan perilaku fetch biasa. Saya akan menguji cold start, jaringan lambat, mode offline, kunjungan yang tidak terkontrol, pembaruan, dan jumlah request duplikat sambil membandingkan TTFB dan waktu startup.
Kesalahan umum
- Kesalahan: Memperlakukan navigation preload sebagai precaching resource statis. → Mengapa gagal: Ini menargetkan navigasi dan berjalan bersamaan dengan startup worker. → Solusi: Gunakan
preloadResponsedi dalam fetch handler. - Kesalahan: Memulai fetch tanpa syarat ketika preload belum memberikan hasil langsung. → Mengapa gagal: Hal ini dapat menduplikasi request dan efek samping. → Solusi: Tentukan urutan promise, cache, dan fetch.
- Kesalahan: Menulis HTML yang dipersonalisasi ke shared Cache Storage. → Mengapa gagal: Batasan Cookie, Authorization, atau Vary diabaikan. → Solusi: Gunakan kebijakan network-first yang sadar identitas.
- Kesalahan: Hanya membandingkan rata-rata waktu pemuatan. → Mengapa gagal: Cold start, kunjungan yang tidak terkontrol, dan request duplikat hilang dalam nilai rata-rata. → Solusi: Lacak TTFB, startup, hit, dan error berdasarkan kohort.
Pertanyaan lanjutan dan jawaban
Pertanyaan lanjutan 1: Mengapa tidak menggunakan link preload secara langsung?
link rel=preload dideklarasikan di halaman dan berorientasi pada resource. Navigation preload adalah request browser untuk navigasi yang berjalan selama startup Service Worker; lifecycle dan API penggunaannya berbeda.
Pertanyaan lanjutan 2: Mengapa preloadResponse bisa undefined?
Browser mungkin tidak mendukungnya, request tersebut mungkin bukan navigasi, preload mungkin dinonaktifkan, atau network request mungkin gagal sebelum event worker berlangsung. Perlakukan undefined sebagai percabangan normal.
Pertanyaan lanjutan 3: Bagaimana cara menghindari pembacaan Response body dua kali?
Response body biasanya bersifat sekali pakai. Panggil clone() saat halaman dan cache sama-sama membutuhkannya, serta tangani error dan pembatalan di kedua konsumen.
Pertanyaan lanjutan 4: Mengapa kunjungan pertama mungkin masih belum melihat peningkatan kecepatan?
Halaman yang tidak terkontrol tidak merutekan navigasi melalui worker saat ini, dan registrasi, penginstalan, serta aktivasi membutuhkan waktu. Ukur kunjungan pertama yang tidak terkontrol secara terpisah alih-alih menganggapnya sebagai kegagalan preload.