Salah satu fitur pekerja layanan adalah kemampuan untuk menyimpan file ke cache ketika pekerja layanan diinstal. Hal ini disebut sebagai "precaching". Precaching memungkinkan penayangan file yang di-cache ke browser tanpa masuk ke jaringan. Gunakan pra-cache untuk aset penting yang diperlukan situs Anda, bahkan saat offline: halaman utama, gaya, gambar penggantian, dan skrip penting.
Mengapa Anda harus menggunakan Workbox?
Menggunakan Workbox untuk precaching bersifat opsional. Anda dapat menulis kode Anda sendiri untuk melakukan pra-cache aset penting saat pekerja layanan diinstal. Manfaat utama menggunakan Workbox adalah kontrol versinya yang siap digunakan. Anda akan mengalami lebih sedikit kesulitan memperbarui aset pra-cache menggunakan Workbox daripada jika Anda harus mengelola pembuatan versi dan pembaruan file ini sendiri.
Manifes pra-cache
Pracaching didorong oleh daftar URL dan informasi pembuatan versi terkait untuk setiap URL. Secara umum, informasi ini dikenal sebagai manifes precache. Manifes adalah "sumber kebenaran" untuk status segala sesuatu yang dimaksudkan berada di precache untuk versi aplikasi web tertentu. Manifes precache, dalam format yang digunakan oleh Workbox, terlihat seperti ini:
[{
url: 'app.abcd1234.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
Saat pekerja layanan diinstal, tiga entri cache akan dibuat di Cache Storage, untuk masing-masing dari tiga URL yang tercantum. Aset pertama memiliki informasi pembuatan versi yang sudah disertakan dalam URL-nya (app adalah nama file sebenarnya, dan .abcd1234 berisi informasi pembuatan versi, tepat sebelum ekstensi file .js). Alat build Workbox dapat mendeteksi hal ini dan mengecualikan kolom revisi. Dua aset lainnya tidak menyertakan info pembuatan versi apa pun di URL-nya, sehingga alat build Workbox membuat kolom revision terpisah, yang berisi hash konten file lokal.
Menyajikan resource yang di-cache
Menambahkan aset ke cache hanyalah salah satu bagian dari cerita precache—setelah
aset di-cache, aset harus merespons permintaan keluar. Hal ini memerlukan pemroses peristiwa fetch di pekerja layanan yang dapat memeriksa URL mana yang telah di-cache, dan menampilkan respons yang di-cache tersebut dengan andal, mengabaikan jaringan dalam prosesnya. Karena pekerja layanan memeriksa cache untuk menemukan respons (dan menggunakannya sebelum jaringan), hal ini disebut strategi yang mengutamakan cache.
Update yang efisien
Manifes pra-cache memberikan representasi yang tepat dari status cache yang diharapkan; jika kombinasi URL/revisi dalam manifes berubah, pekerja layanan mengetahui bahwa entri yang di-cache sebelumnya tidak lagi valid, dan perlu diupdate. Proses ini hanya memerlukan satu permintaan jaringan, yang dibuat secara otomatis oleh browser sebagai bagian dari pemeriksaan update pekerja layanan, untuk menentukan URL pra-cache mana yang perlu dimuat ulang.
Update pada resource yang di-cache
Saat merilis versi baru aplikasi web dari waktu ke waktu, Anda harus memperbarui URL yang sebelumnya di-cache, meng-cache aset baru, dan menghapus entri yang sudah usang. Selama Anda terus membuat manifes pra-cache lengkap setiap kali membuat ulang situs, manifes tersebut berfungsi sebagai "sumber kebenaran" untuk status pra-cache kapan saja.
Jika sudah ada URL dengan kolom revisi baru, atau jika ada URL yang telah
ditambahkan atau dihapus dari manifes, itu adalah tanda bagi pekerja layanan bahwa
update perlu dilakukan, sebagai bagian dari
pengendali peristiwa
install
dan
activate. Misalnya, jika Anda telah melakukan beberapa perubahan pada situs dan
mem-build ulangnya, manifes precache terbaru mungkin telah mengalami perubahan
berikut:
[{
url: 'app.ffaa4455.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
Setiap perubahan ini memberi tahu pekerja layanan bahwa permintaan baru perlu dibuat untuk memperbarui entri yang sebelumnya di-cache ('offline.svg' dan 'index.html') dan meng-cache URL baru ('app.ffaa4455.js'), serta penghapusan untuk membersihkan URL yang tidak lagi digunakan ('app.abcd1234.js').
Pengalaman penginstalan "app store" sesungguhnya
Manfaat lain dari precache adalah, Anda dapat memberikan pengalaman kepada pengguna yang mungkin sulit dicapai di luar penginstalan "app store". Setelah pengguna mengunjungi halaman apa pun di aplikasi web untuk pertama kalinya, Anda dapat melakukan pra-cache untuk semua URL yang diperlukan untuk menampilkan semua tampilan aplikasi web Anda sebelumnya, tanpa harus menunggu hingga mereka mengunjungi setiap tampilan.
Saat menginstal aplikasi, pengguna berharap setiap bagian ditampilkan dengan cepat, bukan hanya tampilan yang pernah mereka lihat di masa lalu. Precaching menghadirkan pengalaman yang sama ke aplikasi web.
Manakah dari aset Anda yang harus di-precache?
Lihat kembali panduan Mengidentifikasi apa yang dimuat untuk mendapatkan gambaran yang baik tentang URL mana yang paling sesuai untuk di-pracache. Aturan umumnya adalah melakukan precache untuk HTML, JavaScript, atau CSS apa pun yang dimuat lebih awal dan sangat penting untuk menampilkan struktur dasar halaman tertentu.
Sebaiknya hindari melakukan precaching media atau aset lain yang dimuat nanti (kecuali jika penting untuk fungsi aplikasi web). Sebagai gantinya, gunakan strategi caching runtime untuk memastikan aset ini di-cache sesuai penggunaan.
Selalu ingat bahwa precaching melibatkan penggunaan bandwidth dan penyimpanan jaringan di perangkat pengguna (seperti menginstal aplikasi dari app store). Sebagai developer, Anda dapat melakukan precache dengan bijak, dan menghindari manifes precache yang membengkak.
Alat build Workbox membantu Anda dengan memberi tahu jumlah item dalam manifes precache serta ukuran total payload precache.
Pengunjung berulang ke aplikasi web Anda akan mendapatkan manfaat dalam jangka panjang dibandingkan dengan biaya precaching di muka, karena kemampuan yang ditawarkan untuk menghindari jaringan dengan cepat terbayarkan sendiri dalam bandwidth yang dihemat dari waktu ke waktu.