Saat pekerja layanan menangani peristiwa fetch, browser akan menunggu pekerja layanan memberikan respons. Meskipun latensi permintaan jaringan merupakan bagian penting dari proses tunggu, browser mungkin juga harus menunggu pekerja layanan melakukan booting dan mengaktifkan callback peristiwa fetch.
Waktu booting bervariasi berdasarkan perangkat dan kemampuannya, tetapi waktu yang diperlukan bisa cukup besar, terkadang hingga setengah detik saat CPU lambat, atau bekerja dalam keadaan yang di-throttle karena kondisi di sekitar. Perolehan performa menghindari jaringan kemungkinan akan lebih besar daripada waktu startup ini jika respons navigasi Anda disalurkan dari instance Cache. Untuk permintaan navigasi yang masuk ke jaringan, memperkenalkan pekerja layanan dapat membuat penundaan yang terasa.
Masukkan pramuat navigasi
Pramuat navigasi adalah fitur pekerja layanan yang menyelesaikan penundaan yang disebabkan oleh waktu booting pekerja layanan. Tanpa mengaktifkan pramuat navigasi, booting pekerja layanan dan permintaan navigasi yang ditangani akan terjadi secara berurutan:
Hal ini tidak ideal, tetapi Anda dapat memperbaikinya dengan mengaktifkan pramuat navigasi, yang memastikan bahwa booting pekerja layanan dan permintaan navigasi terjadi secara serentak:
Meskipun pramuat navigasi adalah pengoptimalan performa yang hebat untuk situs yang menggunakan pekerja layanan, ini bukanlah fitur yang harus Anda aktifkan dalam semua situasi. Secara khusus, situs yang menggunakan app shell yang di-precache tidak memerlukan pramuat navigasi, karena cache melayani permintaan navigasi untuk markup shell aplikasi tanpa latensi navigasi. Dalam kasus ini, respons pramuat akan sia-sia, dan ini bukan hal yang bagus.
Waktu terbaik untuk menggunakan pramuat navigasi adalah saat situs tidak dapat melakukan precache HTML. Pikirkan situs web di mana respons markup bersifat dinamis dan bervariasi dengan hal-hal seperti status otentikasi. Permintaan navigasi untuk permintaan ini dapat menggunakan strategi yang mengutamakan jaringan (atau bahkan hanya jaringan), dan di situlah pramuat navigasi dapat membuat perbedaan besar.
Menggunakan pramuat navigasi di Workbox
Menggunakan pramuat navigasi secara langsung di pekerja layanan yang tidak didukung oleh Workbox sulit dilakukan. Pertama, tidak didukung di semua browser. Kedua, mungkin sulit untuk melakukannya dengan benar. Anda dapat mempelajari cara menggunakannya langsung dalam penjelasan hebat oleh Jake Archibald ini.
Workbox menyederhanakan penggunaan pramuat navigasi karena metode enable modul workbox-navigation-preload melakukan pemeriksaan dukungan fitur yang diperlukan, serta membuat pemroses peristiwa activate guna mengaktifkannya untuk Anda.
Dari sini, manfaat pramuat navigasi diwujudkan dalam mendukung browser dengan menggunakan Workbox untuk menangani permintaan navigasi menggunakan pengendali strategi yang mengutamakan jaringan:
import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst, StaleWhileRevalidate} from 'workbox-strategies';
import {registerRoute, NavigationRoute, Route} from 'workbox-routing';
import {precacheAndRoute} from 'workbox-precaching';
// Precache the manifest
precacheAndRoute(self.__WB_MANIFEST);
// Enable navigation preload
navigationPreload.enable();
// Create a new navigation route that uses the Network-first, falling back to
// cache strategy for navigation requests with its own cache. This route will be
// handled by navigation preload. The NetworkOnly strategy will work as well.
const navigationRoute = new NavigationRoute(new NetworkFirst({
cacheName: 'navigations'
}));
// Register the navigation route
registerRoute(navigationRoute);
// Create a route for image, script, or style requests that use a
// stale-while-revalidate strategy. This route will be unaffected
// by navigation preload.
const staticAssetsRoute = new Route(({request}) => {
return ['image', 'script', 'style'].includes(request.destination);
}, new StaleWhileRevalidate({
cacheName: 'static-assets'
}));
// Register the route handling static assets
registerRoute(staticAssetsRoute);
Saat pramuat navigasi diaktifkan, Workbox akan merespons permintaan navigasi yang menggunakan strategi NetworkFirst atau NetworkOnly dengan respons bawaan.
Bagaimana cara mengetahui apakah pramuat navigasi berfungsi?
Di build pengembangan, Workbox mencatat banyak hal yang dilakukannya. Jika Anda ingin memeriksa apakah pramuat navigasi berfungsi di Workbox, buka konsol di browser pendukung selama permintaan navigasi dan Anda akan melihat pesan log yang menyatakan:
Logging ini tidak akan terlihat dalam build produksi secara default, jadi Anda tidak akan melihatnya saat men-deploy pekerja layanan ke produksi, tetapi ini adalah cara yang bagus untuk memverifikasi bahwa pramuat navigasi berfungsi (di antara lainnya).
Menyesuaikan respons yang dipramuat
Saat menggunakan pramuat navigasi, mungkin ada skenario yang memerlukan penyesuaian respons pramuat di backend aplikasi. Pekerja layanan yang melakukan streaming sebagian konten dari jaringan adalah salah satu skenario yang mungkin dapat dilakukan.
Dalam kasus seperti ini, ada baiknya untuk mengetahui bahwa permintaan pramuat dikirim dengan header Service-Worker-Navigation-Preload yang ditetapkan dengan nilai default true:
Service-Worker-Navigation-Preload: true
Kemudian, di backend aplikasi pilihan, Anda dapat memeriksa header ini dan mengubah respons agar sesuai dengan kebutuhan Anda. Jika nilai default header bermasalah karena alasan apa pun, Anda dapat mengubahnya dalam konteks jendela. Ketahuilah bahwa Anda bebas melakukan pekerjaan apa pun pada server untuk membaca {i>header<i} ini, dan berada di luar cakupan Workbox.
Kesimpulan
Pramuat navigasi sulit dilakukan dengan benar saat digunakan secara langsung, tetapi kerja keras itu layak untuk memastikan bahwa pekerja layanan tidak menghambat browser untuk membuat permintaan navigasi. Berkat Workbox, Anda dapat memanfaatkan pramuat navigasi dengan lebih sedikit upaya. Untuk mendapatkan detail selengkapnya tentang modul workbox-navigation-preload, lihat dokumentasi referensinya.