Gesaan dan konteks
Laman anda memintas permintaan navigasi dengan Service Worker untuk sandaran luar talian dan caching dikongsi. Navigasi pertama menunggu worker bermula sebelum permintaan rangkaian dimulakan. Reka bentuk navigation preload untuk pelayar yang tidak disokong sambil mengelakkan permintaan pendua, penulisan cache lapuk, dan perlumbaan respons.
Perkara yang diuji oleh penemu duga
Navigation preload ialah permintaan navigasi yang dimulakan oleh pelayar yang berjalan semasa Service Worker bermula; ia bukanlah precaching mahupun link rel=preload untuk sumber sebarangan. Rangkumi pengaktifannya semasa activate, membaca preloadResponse dalam fetch, dasar rangkaian-lawan-cache, pengepala Service-Worker-Navigation-Preload, sandaran tamat masa dan ralat, serta pengukuran.
Soalan penjelasan untuk ditanya terlebih dahulu
Sasaran halaman dan cache
Jelaskan sama ada navigasi mengembalikan SSR HTML, shell SPA, atau halaman luar talian; laluan mana yang boleh dicache; dan sama ada data khusus pengguna mesti memintas cache kongsi. Respons yang diperibadikan tidak boleh ditulis ke cache awam.
Kitaran hayat dan sokongan pelayar
Sahkan pendaftaran, kemas kini, skop kawalan, dan sasaran sokongan pelayar untuk navigationPreload. Navigasi pertama yang tidak dikawal tidak boleh dianggap melalui worker semasa.
Dasar rangkaian dan ketekalan
Pilih tingkah laku network-first, cache-first, atau stale-while-revalidate dan tentukan respons luar talian. Tentukan cara pelayan membaca pengepala preload tanpa mengubah kunci cache secara tidak sengaja.
Rangka kerja jawapan 30 saat
“Kesan ciri dan aktifkan navigation preload dalam acara activate Service Worker. Pelayar memulakan permintaan navigasi semasa worker bermula; pengendali fetch terlebih dahulu menunggu event.preloadResponse, kemudian memeriksa cache atau memanggil fetch hanya apabila tiada respons preload yang boleh digunakan wujud. Terima respons hanya apabila URL, identiti, dan dasar cache sepadan. Bandingkan sokongan, masa pemulaan, TTFB, hit cache, permintaan pendua, dan ralat sandaran sebelum dan selepas pelancaran.”
Jawapan mendalam langkah demi langkah
Langkah 1: Aktifkannya semasa activate
Selepas memeriksa registration.navigationPreload, panggil enable() di dalam waitUntil milik activate supaya konfigurasi selesai sebelum worker baharu dianggap sedia. setHeaderValue() boleh menambah konteks, tetapi nilainya tidak boleh mengandungi keadaan peribadi atau tidak boleh dicache.
Langkah 2: Guna preloadResponse dalam fetch
Baca event.preloadResponse hanya untuk permintaan navigasi. Ia boleh diselesaikan kepada Response atau undefined. Utamakan respons preload yang sah; jika tidak, ikuti dasar cache atau fetch biasa. Jangan mulakan permintaan rangkaian kedua sebelum memutuskan sama ada promise preload telah menghasilkan hasil yang boleh digunakan.
Langkah 3: Tentukan sempadan cache dan identiti
SSR HTML yang mengandungi data identiti, geografi, atau eksperimen mesti menghormati kunci cache dan pengepala respons sedia ada. Jangan letakkannya secara tanpa syarat ke dalam Cache Storage. Shell statik mungkin bersifat cache-first; halaman yang diperibadikan mungkin bersifat network-first, dengan tingkah laku Cookie, Authorization, dan Vary diuji secara eksplisit.
Langkah 4: Kendalikan pengepala dan penghalaan pelayan
Pelayan boleh memeriksa Service-Worker-Navigation-Preload untuk mengenali permintaan selari dan melangkau kerja yang berat atau menggunakan cache khusus. Proksi dan CDN memerlukan peraturan eksplisit untuk memajukan, mengabaikan, atau melakukan vary pada pengepala tersebut supaya ia tidak mewujudkan perkongsian cache antara pengguna.
Langkah 5: Kendalikan perlumbaan, tamat masa, dan ralat
Jika preload gagal, tamat masa, atau mengembalikan status yang tidak sesuai, sandarkan kepada cache atau fetch biasa mengikut dasar. Response body biasanya untuk kegunaan sekali sahaja; gunakan clone() apabila dua pengguna diperlukan, dan hadkan pembatalan serta tamat masa. Cuba halaman luar talian selepas ralat rangkaian, tetapi jangan sembunyikan ralat pelayan yang sebenar.
Langkah 6: Turun taraf dan kemas kini dengan selamat
Pelayar yang tidak disokong meneruskan dengan fetch Service Worker biasa; pelayar tanpa sokongan Service Worker menggunakan rangkaian. Semasa kemas kini worker, kekalkan protokol cache lama dan tangguhkan pemadaman sehingga worker baharu boleh digunakan, mengelakkan gangguan pada masa pengaktifan.
Langkah 7: Ukur prestasi sebenar dan ketepatan
Bandingkan permulaan sejuk dan panas, rangkaian perlahan, mod luar talian, lawatan pertama yang tidak dikawal, dan kemas kini worker. Rekod navigasi-ke-respons, TTFB, pemulaan worker, hit preload, hit cache, permintaan pendua, dan ralat sandaran. Sahkan pengasingan identiti dan tingkah laku pelayar, bukan sekadar purata masa memuatkan.
Contoh jawapan berkualiti tinggi
Saya akan mengesan ciri dan mengaktifkan navigation preload dalam activate, kemudian menunggu preloadResponse terlebih dahulu dalam pengendali fetch navigasi. Hanya apabila ia tiada atau tidak sesuai, pengendali akan menggunakan cache atau fetch biasa. Dasar cache mesti memisahkan shell statik daripada SSR HTML yang diperibadikan, dan pelayan boleh menggunakan pengepala preload tanpa mengubah pengasingan cache. Pelayar yang tidak disokong mengekalkan tingkah laku fetch biasa. Saya akan menguji permulaan sejuk, rangkaian perlahan, mod luar talian, lawatan tidak dikawal, kemas kini, dan kiraan permintaan pendua sambil membandingkan TTFB dan masa pemulaan.
Kesilapan biasa
- Kesilapan: Menganggap navigation preload sebagai precaching sumber statik. → Sebab ia gagal: Ia menyasarkan navigasi dan berjalan bersama-sama pemulaan worker. → Pembetulan: Guna
preloadResponsedalam pengendali fetch. - Kesilapan: Memulakan fetch tanpa syarat apabila preload tidak mempunyai hasil serta-merta. → Sebab ia gagal: Ia boleh menduplikasi permintaan dan kesan sampingan. → Pembetulan: Tentukan susunan promise, cache, dan fetch.
- Kesilapan: Menulis HTML yang diperibadikan ke Cache Storage yang dikongsi. → Sebab ia gagal: Sempadan Cookie, Authorization, atau Vary diabaikan. → Pembetulan: Gunakan dasar network-first yang peka identiti.
- Kesilapan: Hanya membandingkan purata masa memuatkan. → Sebab ia gagal: Permulaan sejuk, lawatan tidak dikawal, dan permintaan pendua hilang dalam nilai min. → Pembetulan: Jejaki TTFB, pemulaan, hit, dan ralat mengikut kohort.
Soalan susulan dan jawapan
Soalan susulan 1: Mengapa tidak menggunakan link preload secara langsung?
link rel=preload diisytiharkan oleh halaman dan berorientasikan sumber. Navigation preload ialah permintaan pelayar untuk navigasi yang berjalan semasa pemulaan Service Worker; kitaran hayat dan API penggunaannya adalah berbeza.
Soalan susulan 2: Mengapa preloadResponse boleh menjadi undefined?
Pelayar mungkin tidak menyokongnya, permintaan mungkin bukan navigasi, preload mungkin dinyahdayakan, atau permintaan rangkaian mungkin gagal sebelum acara worker. Anggap undefined sebagai cabang biasa.
Soalan susulan 3: Bagaimanakah anda mengelak daripada membaca Response body dua kali?
Response body biasanya untuk kegunaan sekali sahaja. Panggil clone() apabila halaman dan cache kedua-duanya memerlukannya, dan kendalikan ralat serta pembatalan dalam kedua-dua pengguna.
Soalan susulan 4: Mengapakah lawatan pertama mungkin masih tidak melihat peningkatan kelajuan?
Halaman yang tidak dikawal tidak menghalakan navigasi melalui worker semasa, dan pendaftaran, pemasangan, serta pengaktifan mengambil masa. Ukur lawatan pertama yang tidak dikawal secara berasingan dan bukannya melabelkannya sebagai kegagalan preload.