Melengkapi teknik pengambilan data tradisional dengan pekerja layanan.
Melakukan tugas di situs biasanya melibatkan 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 ke halaman lain berarti membuat permintaan navigasi. Sebagai aturan umum, Anda tidak ingin menggunakan header Cache-Control
yang berumur panjang untuk meng-cache respons HTML untuk permintaan navigasi. Biasanya, permintaan ini harus dipenuhi melalui jaringan, dengan Cache-Control: no-cache
, untuk memastikan bahwa HTML, beserta rantai permintaan jaringan berikutnya, (cukup) baru.
Sayangnya, harus melawan jaringan setiap kali pengguna membuka halaman baru berarti setiap navigasi mungkin lambat—setidaknya, hal ini berarti navigasi tidak akan andal cepat.
Untuk mempercepat permintaan ini, jika dapat mengantisipasi tindakan pengguna, Anda dapat meminta halaman dan aset ini terlebih dahulu dan menyimpannya dalam cache untuk jangka waktu singkat hingga pengguna mengklik link ini. Teknik ini disebut pramuat dan biasanya diterapkan dengan menambahkan tag <link rel="prefetch">
ke halaman, yang menunjukkan resource yang akan dipramuat.
Dalam panduan ini, kita akan mempelajari berbagai cara penggunaan pekerja layanan sebagai pelengkap teknik pengambilan data sebelumnya yang tradisional.
Kasus produksi
MercadoLibre adalah situs e-commerce terbesar di Amerika Latin. Untuk mempercepat navigasi, tag <link rel="prefetch">
dimasukkan secara dinamis di beberapa bagian alur. Misalnya, dalam halaman listingan, halaman tersebut mengambil halaman hasil berikutnya segera setelah pengguna men-scroll ke bagian bawah listingan:
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 aktif resource pengambilan data di luar periode lima menit.
Misalnya, portal olahraga Italia Virgilio Sport menggunakan pekerja layanan untuk melakukan pramuat postingan paling populer di halaman beranda mereka. Aplikasi ini juga menggunakan Network Information API untuk menghindari pengambilan data sebelumnya bagi pengguna yang menggunakan koneksi 2G.
Hasilnya, selama 3 minggu pengamatan, Virgilio Sport mengalami peningkatan waktu pemuatan untuk navigasi ke artikel sebesar 78%, dan peningkatan jumlah tayangan artikel sebesar 45%.
Menerapkan precaching dengan Workbox
Di bagian berikut, kita akan menggunakan Workbox untuk menunjukkan cara menerapkan berbagai teknik penyimpanan dalam cache di pekerja layanan yang dapat digunakan sebagai pelengkap <link rel="prefetch">
, atau bahkan penggantinya, dengan mendelegasikan tugas ini sepenuhnya kepada pekerja layanan.
1. Menyimpan halaman statis dan sub-resource halaman di cache terlebih dahulu
Precaching adalah kemampuan pekerja layanan untuk menyimpan file ke cache saat sedang diinstal.
Dalam kasus berikut, pra-caching digunakan untuk mencapai tujuan yang serupa dengan pra-pengambilan: membuat navigasi lebih cepat.
Menyimpan halaman statis di cache terlebih dahulu
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 pra-cache, sehingga dokumen tersebut sudah tersedia di cache setiap kali pengguna mengaksesnya:
workbox.precaching.precacheAndRoute([
{url: '/about.html', revision: 'abcd1234'},
// ... other entries ...
]);
Subresource halaman precaching
Menyimpan aset statis dalam cache yang mungkin digunakan oleh berbagai bagian situs (misalnya JavaScript, CSS, dll.) adalah praktik terbaik umum dan dapat memberikan peningkatan ekstra dalam skenario pengambilan data sebelumnya.
Untuk mempercepat navigasi di situs e-commerce, Anda dapat menggunakan tag <link rel="prefetch">
di halaman listingan untuk melakukan pengambilan data di muka halaman detail produk untuk beberapa produk pertama di halaman listingan. Jika Anda telah melakukan pra-cache subresource halaman produk, navigasi akan 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 di cache HTTP selama jangka waktu terbatas, setelah itu aturan Cache-Control
untuk resource akan diterapkan. Mulai Chrome 85, nilai ini adalah 5 menit.
Pekerja layanan memungkinkan Anda memperpanjang masa aktif halaman pengambilan data, sekaligus memberikan manfaat tambahan dengan menyediakan resource tersebut untuk penggunaan offline.
Pada contoh sebelumnya, kita 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">
- Terapkan strategi penyimpanan dalam cache 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, kita telah memilih untuk menggunakan strategi stale-while-revalidate. 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 untuk setiap permintaan yang berhasil.
3. Mendelegasikan pengambilan data sebelumnya ke pekerja layanan
Dalam sebagian besar kasus, pendekatan terbaik adalah menggunakan <link rel="prefetch">
. Tag ini 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 melakukan pramuat beberapa produk pertama di halaman listingan produk yang dirender sisi klien, Anda mungkin perlu memasukkan beberapa tag <link rel="prefetch">
secara dinamis di halaman, berdasarkan respons API. Hal ini dapat menghabiskan waktu di thread utama halaman untuk sementara dan mempersulit penerapan.
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():
Paket Workbox Window menyederhanakan jenis komunikasi ini, yang memisahkan banyak detail panggilan yang mendasarinya.
Pengambilan data dengan Jendela Workbox dapat diterapkan dengan cara berikut:
- Di halaman: panggil pekerja layanan yang meneruskan jenis pesan, dan daftar URL yang akan dipramuat:
const wb = new Workbox('/sw.js');
wb.register();
const prefetchResponse = await wb.messageSW({type: 'PREFETCH_URLS', urls: […]});
- Di pekerja layanan: terapkan pengendali pesan untuk mengeluarkan permintaan
fetch()
untuk setiap URL yang akan dipramuat:
addEventListener('message', (event) => {
if (event.data.type === 'PREFETCH_URLS') {
// Fetch URLs and store them in the cache
}
});