Melengkapi teknik pengambilan data tradisional dengan pekerja layanan.
Menjalankan tugas di situs biasanya memerlukan beberapa langkah. Misalnya, membeli produk di situs web e-commerce mungkin melibatkan pencarian produk, memilih item dari daftar hasil, menambahkan item ke keranjang, dan menyelesaikan operasi dengan {i>check out<i}.
Dalam istilah teknis, berpindah antar-halaman yang berbeda berarti membuat permintaan navigasi. Sebagai aturan umum, Anda tidak ingin menggunakan header Cache-Control
yang aktif dalam waktu lama untuk meng-cache respons HTML bagi permintaan navigasi. Mereka biasanya harus dipenuhi melalui jaringan, dengan Cache-Control: no-cache
, untuk memastikan bahwa HTML, bersama dengan rantai permintaan jaringan berikutnya, (cukup) baru.
Sayangnya, setiap kali harus melanggar jaringan setiap kali pengguna membuka halaman baru berarti setiap navigasi mungkin akan berjalan lambat. Setidaknya, navigasi ini tidak akan dapat diandalkan dengan cepat.
Untuk mempercepat permintaan ini, jika Anda dapat mengantisipasi tindakan pengguna, Anda dapat meminta halaman dan aset ini terlebih dahulu, dan menyimpannya di cache dalam waktu singkat hingga pengguna mengklik link tersebut. Teknik ini disebut pengambilan data dan umumnya diterapkan dengan menambahkan tag <link rel="prefetch">
ke halaman, yang menunjukkan resource ke pengambilan data.
Dalam panduan ini, kita akan mempelajari berbagai cara penggunaan pekerja layanan sebagai pelengkap teknik pengambilan data tradisional.
Kasus produksi
MercadoLibre adalah situs e-commerce terbesar di Amerika Latin. Untuk mempercepat navigasi, fitur ini secara dinamis memasukkan tag <link rel="prefetch">
di beberapa bagian alur. Misalnya, dalam halaman listingan, halaman tersebut mengambil halaman hasil berikutnya segera setelah pengguna men-scroll ke bagian bawah listingan:
![Screenshot halaman listingan MercadoLibre satu dan dua serta tag Pengambilan Link Link yang menghubungkan keduanya.](https://web.dev/static/case-studies/instant-navigation-experiences/image/screenshot-mercadolibre-d7ea81d9139ce.png?authuser=6&hl=id)
File yang diambil sebelumnya diminta pada prioritas "terendah" dan disimpan di cache HTTP atau cache memori (bergantung pada apakah resource dapat di-cache atau tidak), selama jangka waktu yang bervariasi menurut browser. Misalnya, mulai Chrome 85, nilai ini adalah 5 menit. Resource disimpan selama lima menit, setelah itu aturan Cache-Control
normal untuk resource akan berlaku.
Menggunakan cache pekerja layanan dapat membantu Anda memperpanjang masa pakai resource pengambilan data di luar periode lima menit.
Misalnya, portal olahraga Italia, Virgilio Sport, menggunakan pekerja layanan untuk mengambil data postingan terpopuler di halaman berandanya. Mereka juga menggunakan Network Information API untuk menghindari pengambilan data bagi pengguna yang menggunakan koneksi 2G.
![Logo Virgilio Sport.](https://web.dev/static/case-studies/instant-navigation-experiences/image/virgilio-sport-logo-918a872c04c19.png?authuser=6&hl=id)
Sebagai hasilnya, selama 3 minggu pengamatan Virgilio Sport menyaksikan waktu pemuatan untuk navigasi ke artikel meningkat 78%, dan jumlah tayangan artikel meningkat 45%.
![Screenshot halaman beranda dan artikel Virgilio Sport, dengan metrik dampak setelah pengambilan data.](https://web.dev/static/case-studies/instant-navigation-experiences/image/a-screenshot-virgilio-sp-d2d12e8b2de72.png?authuser=6&hl=id)
Mengimplementasikan precaching dengan Workbox
Di bagian berikut, kita akan menggunakan Workbox untuk menunjukkan cara menerapkan teknik penyimpanan cache yang berbeda di pekerja layanan yang dapat digunakan sebagai pelengkap <link rel="prefetch">
, atau bahkan penggantinya, dengan mendelegasikan tugas ini sepenuhnya ke pekerja layanan.
1. Lakukan pra-cache halaman statis dan subresource halaman
Precaching adalah kemampuan pekerja layanan untuk menyimpan file ke cache saat sedang diinstal.
Dalam kasus berikut, precaching digunakan untuk mencapai tujuan yang sama dengan pengambilan data: membuat navigasi menjadi lebih cepat.
Precaching halaman statis
Untuk halaman yang dibuat pada waktu build (misalnya, about.html
, contact.html
), atau di situs yang sepenuhnya statis, Anda cukup menambahkan dokumen situs ke daftar precache, sehingga halaman tersebut sudah tersedia di cache setiap kali pengguna mengaksesnya:
workbox.precaching.precacheAndRoute([
{url: '/about.html', revision: 'abcd1234'},
// ... other entries ...
]);
Subresource halaman precaching
Precaching aset statis yang mungkin digunakan oleh berbagai bagian situs (misalnya JavaScript, CSS, dll.), adalah praktik terbaik umum dan dapat memberikan peningkatan ekstra dalam skenario pengambilan data.
Untuk mempercepat navigasi di situs e-commerce, Anda dapat menggunakan tag <link rel="prefetch">
di halaman listingan untuk mengambil data halaman detail produk untuk beberapa produk pertama halaman listingan. Jika Anda telah melakukan pra-cache subresource halaman produk, tindakan ini dapat membuat navigasi menjadi lebih cepat.
Untuk menerapkannya:
- Tambahkan tag
<link rel="prefetch">
ke halaman:
<link rel="prefetch" href="/phones/smartphone-5x.html" as="document">
- Tambahkan subresource halaman ke daftar precache di pekerja layanan:
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
// ... other entries ...
]);
2. Memperpanjang masa pakai resource pengambilan data
Seperti yang disebutkan sebelumnya, <link rel="prefetch">
mengambil dan menyimpan resource dalam cache HTTP selama jangka waktu terbatas. Setelah itu, aturan Cache-Control
untuk resource akan berlaku. Mulai Chrome 85, nilai ini adalah 5 menit.
Pekerja layanan memungkinkan Anda memperpanjang masa pakai halaman pengambilan data, sekaligus memberikan manfaat tambahan dengan membuat resource tersebut tersedia untuk penggunaan offline.
Pada contoh sebelumnya, seseorang dapat melengkapi <link rel="prefetch">
yang digunakan untuk mengambil data halaman produk dengan strategi caching runtime Workbox.
Untuk menerapkannya:
- Tambahkan tag
<link rel="prefetch">
ke halaman:
<link rel="prefetch" href="/phones/smartphone-5x.html" as="document">
- Implementasikan strategi caching runtime di pekerja layanan untuk jenis permintaan berikut:
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'document-cache',
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
}),
],
});
Dalam hal ini, kami telah memilih untuk menggunakan strategi validasi ulang saat sudah tidak berlaku. Dalam strategi ini, halaman dapat diminta dari cache dan jaringan, secara paralel. Respons berasal dari cache jika tersedia, jika tidak dari jaringan. Cache selalu diperbarui dengan respons jaringan pada setiap permintaan yang berhasil.
3. Mendelegasikan pengambilan data ke pekerja layanan
Dalam sebagian besar kasus, pendekatan terbaik adalah menggunakan <link rel="prefetch">
. Tag adalah petunjuk resource yang dirancang untuk membuat pengambilan data seefisien mungkin.
Namun, dalam beberapa kasus, mungkin lebih baik mendelegasikan tugas ini sepenuhnya ke pekerja layanan.
Misalnya: untuk mengambil data beberapa produk pertama di halaman listingan produk yang dirender sisi klien, seseorang mungkin perlu memasukkan beberapa tag <link rel="prefetch">
secara dinamis di halaman, berdasarkan respons API. Hal ini dapat seketika menghabiskan waktu di thread utama halaman dan membuat implementasi menjadi lebih sulit.
Dalam kasus seperti ini, gunakan "strategi komunikasi halaman ke pekerja layanan", untuk mendelegasikan tugas pengambilan data sepenuhnya ke pekerja layanan. Jenis komunikasi ini dapat dicapai dengan menggunakan worker.postMessage():
![Ikon halaman yang membuat komunikasi dua arah dengan pekerja layanan.](https://web.dev/static/case-studies/instant-navigation-experiences/image/an-icon-a-page-making-w-55c345d50b803.png?authuser=6&hl=id)
Paket Jendela Workbox menyederhanakan jenis komunikasi ini, mengabstraksi banyak detail panggilan pokok yang dilakukan.
Pengambilan data dengan Jendela Workbox dapat diterapkan dengan cara berikut:
- Di halaman: panggil pekerja layanan dengan meneruskan jenis pesan, dan daftar URL ke pengambilan data:
const wb = new Workbox('/sw.js');
wb.register();
const prefetchResponse = await wb.messageSW({type: 'PREFETCH_URLS', urls: […]});
- Di pekerja layanan: implementasikan pengendali pesan guna mengeluarkan permintaan
fetch()
untuk setiap URL untuk pengambilan data:
addEventListener('message', (event) => {
if (event.data.type === 'PREFETCH_URLS') {
// Fetch URLs and store them in the cache
}
});