Pengalaman navigasi instan

Melengkapi teknik pengambilan data tradisional dengan pekerja layanan.

Demián Renzulli

Gilberto Cocchi

Jeff Posnick

Menjalankan tugas di situs biasanya melibatkan beberapa langkah. Misalnya, pembelian produk di situs web e-commerce mungkin melibatkan pencarian produk, memilih item dari daftar hasil, menambahkan item ke keranjang, dan menyelesaikan operasi dengan melakukan check out.

Dalam istilah teknis, berpindah antar-halaman 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. Permintaan tersebut biasanya akan dipenuhi melalui jaringan, dengan Cache-Control: no-cache, untuk memastikan bahwa HTML, bersama dengan rantai permintaan jaringan berikutnya, (secara wajar) baru. Sayangnya, setiap navigasi harus melawan jaringan setiap kali pengguna menavigasi ke halaman baru. Artinya, setiap navigasi mungkin akan lambat—setidaknya, ini berarti navigasi tersebut tidak akan dapat diandalkan cepat.

Untuk mempercepat permintaan ini, jika Anda dapat mengantisipasi tindakan pengguna, Anda dapat meminta halaman dan aset ini terlebih dahulu, lalu menyimpannya di cache selama jangka waktu yang singkat hingga pengguna mengklik link ini. Teknik ini disebut pengambilan data dan biasanya diterapkan dengan menambahkan tag <link rel="prefetch"> ke halaman, yang menunjukkan resource untuk 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, alat ini memasukkan tag <link rel="prefetch"> secara dinamis di beberapa bagian alur. Misalnya, di halaman listingan, mereka mengambil halaman hasil berikutnya segera setelah pengguna men-scroll ke bagian bawah listingan:

File yang diambil sebelumnya akan diminta dengan prioritas "Terendah" dan disimpan di cache HTTP atau cache memori (bergantung pada apakah resource dapat di-cache atau tidak), untuk jangka waktu yang berbeda menurut browser. Misalnya, mulai Chrome 85, nilai ini adalah 5 menit. Resource disimpan selama lima menit, setelah itu aturan Cache-Control normal untuk resource tersebut akan diterapkan.

Menggunakan caching pekerja layanan bisa membantu Anda memperpanjang masa pakai resource pengambilan data lebih dari periode lima menit.

Misalnya, portal olahraga Italia Virgilio Sport menggunakan pekerja layanan untuk mengambil data postingan paling populer di halaman berandanya. Mereka juga menggunakan Network Information API untuk menghindari pengambilan data bagi pengguna yang menggunakan koneksi 2G.

Hasilnya, selama 3 minggu pengamatan, Virgilio Sport memperoleh waktu pemuatan untuk navigasi ke artikel yang meningkat 78%, dan jumlah tayangan artikel meningkat 45%.

Mengimplementasikan precaching dengan Workbox

Di bagian berikut, kita akan menggunakan Workbox untuk menunjukkan cara menerapkan berbagai teknik caching dalam pekerja layanan yang dapat digunakan sebagai pelengkap <link rel="prefetch">, atau bahkan penggantinya, dengan mendelegasikan tugas ini sepenuhnya ke pekerja layanan.

Perhatian: Anda harus mengambil langkah-langkah untuk memastikan bahwa menambahkan pekerja layanan ke situs Anda tidak benar-benar memperlambat navigasi Anda. Memulai pekerja layanan tanpa menggunakannya untuk merespons permintaan navigasi akan menghasilkan latensi kecil (seperti yang dijelaskan dalam Membuat Aplikasi yang Lebih Cepat dan Lebih Tangguh dengan Service Worker). Anda dapat mengurangi overhead ini dengan mengaktifkan fitur yang disebut pramuat navigasi, lalu menggunakan respons jaringan yang telah dimuat sebelumnya di dalam pengendali peristiwa pengambilan Anda.

1. Melakukan pra-cache halaman statis dan subresource halaman

Precaching adalah kemampuan pekerja layanan untuk menyimpan file ke cache saat sedang diinstal.

Catatan: Suara pra-cache mirip dengan pengambilan data, tetapi tekniknya berbeda. Yang pertama, pekerja layanan mengambil dan menyimpan resource (biasanya file statis) saat menginstal dan menyimpannya dalam cache hingga versi baru file tersedia. Dalam contoh kedua, resource diminta terlebih dahulu untuk menyimpannya di cache selama jangka waktu singkat guna mempercepat navigasi berikutnya.

Dalam kasus berikut, precaching digunakan untuk mencapai tujuan yang sama dengan pengambilan data: membuat navigasi lebih cepat.

Precaching halaman statis

Untuk halaman yang dihasilkan pada waktu build (misalnya, about.html, contact.html), atau di situs yang sepenuhnya statis, pengguna cukup menambahkan dokumen situs ke daftar precache, sehingga dokumen 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 meng-cache subresource halaman produk, hal 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 telah 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.

Service worker memungkinkan Anda memperpanjang masa pakai halaman pengambilan data, sekaligus memberikan manfaat tambahan berupa membuat resource tersebut tersedia untuk penggunaan offline.

Pada contoh sebelumnya, salah satunya 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 dalam pekerja layanan untuk jenis permintaan ini:

new workbox.strategies.StaleWhileRevalidate({
  cacheName: 'document-cache',
  plugins: [
    new workbox.expiration.Plugin({
      maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
    }),
  ],
});

Dalam kasus ini, kami memilih untuk menggunakan strategi yang sudah tidak berlaku saat validasi ulang. Dalam strategi ini, halaman dapat diminta dari cache dan jaringan, secara paralel. Respons berasal dari cache jika tersedia, atau 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 akan lebih baik untuk mendelegasikan tugas ini sepenuhnya ke pekerja layanan. Misalnya: untuk mengambil data beberapa produk pertama di halaman listingan produk yang dirender sisi klien, pengguna mungkin perlu memasukkan beberapa tag <link rel="prefetch"> secara dinamis di halaman, berdasarkan respons API. Hal ini dapat menghabiskan waktu di thread utama halaman dan membuat penerapan menjadi lebih sulit.

Dalam kasus seperti ini, gunakan "strategi komunikasi halaman ke service worker", untuk mendelegasikan tugas pengambilan data sepenuhnya ke pekerja layanan. Jenis komunikasi ini dapat dilakukan dengan menggunakan worker.postMessage():

Paket Jendela Workbox menyederhanakan jenis komunikasi ini, mengabstraksi banyak detail dari panggilan dasar yang dilakukan.

Pengambilan data dengan Jendela Workbox dapat diterapkan dengan cara berikut:

• Di halaman: panggil service worker yang meneruskan jenis pesan ke sini, dan daftar URL yang akan diambil data:

const wb = new Workbox('/sw.js');
wb.register();

const prefetchResponse = await wb.messageSW({type: 'PREFETCH_URLS', urls: […]});

• Di pekerja layanan: terapkan pengendali pesan untuk membuat permintaan fetch() bagi setiap URL yang akan mengambil data:

addEventListener('message', (event) => {
  if (event.data.type === 'PREFETCH_URLS') {
    // Fetch URLs and store them in the cache
  }
});