Pengalaman navigasi instan

Melengkapi teknik pengambilan data tradisional dengan pekerja layanan.

Demián Renzulli

Gilberto Cocchi

Jeff Posnick

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:

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.

Sebagai hasilnya, selama 3 minggu pengamatan Virgilio Sport menyaksikan waktu pemuatan untuk navigasi ke artikel meningkat 78%, dan jumlah tayangan artikel meningkat 45%.

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.

Perhatian: Anda harus mengambil langkah-langkah untuk memastikan bahwa menambahkan pekerja layanan ke situs Anda tidak benar-benar memperlambat navigasi. Memulai pekerja layanan tanpa menggunakannya untuk merespons permintaan navigasi akan menimbulkan sejumlah kecil latensi (seperti yang dijelaskan dalam Membuat Aplikasi yang Lebih Cepat dan 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. Lakukan pra-cache halaman statis dan subresource halaman

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

Catatan: Precaching terdengar mirip dengan pengambilan data, tetapi tekniknya berbeda. Yang pertama, pekerja layanan mengambil dan menyimpan resource (biasanya file statis) saat sedang diinstal dan menyimpannya dalam cache sampai tersedia versi baru untuk file tersebut. Dalam versi kedua, resource diminta terlebih dahulu agar dapat disimpan di cache selama jangka waktu singkat untuk mempercepat navigasi berikutnya.

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():

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
  }
});