Pembuatan cache pekerja layanan dan cache HTTP

Kelebihan dan kekurangan penggunaan logika habis masa berlaku yang konsisten atau berbeda di seluruh lapisan cache HTTP dan service worker.

Jonathan Chen

Meskipun pekerja layanan dan PWA menjadi standar aplikasi web modern, penayangan cache resource menjadi lebih kompleks dari sebelumnya. Artikel ini membahas gambaran besar tentang caching browser, termasuk:

• Kasus penggunaan dan perbedaan antara penyimpanan dalam cache service worker dan penyimpanan dalam cache HTTP.
• Kelebihan dan kekurangan berbagai strategi masa berlaku caching service worker dibandingkan dengan strategi caching HTTP reguler.

Ringkasan alur caching

Pada tingkat tinggi, browser mengikuti urutan penyimpanan dalam cache di bawah saat meminta resource:

1. Cache service worker: Service worker memeriksa apakah resource ada di cache-nya dan memutuskan apakah akan menampilkan resource itu sendiri berdasarkan strategi penyimpanan cache yang telah diprogram. Perhatikan bahwa hal ini tidak terjadi secara otomatis. Anda perlu membuat handler peristiwa pengambilan data di service worker dan mencegat permintaan jaringan sehingga permintaan ditayangkan dari cache service worker, bukan dari jaringan.
2. Cache HTTP (juga dikenal sebagai cache browser): Jika resource ditemukan di Cache HTTP dan belum habis masa berlakunya, browser akan otomatis menggunakan resource dari cache HTTP.
3. Sisi server: Jika tidak ada yang ditemukan di cache service worker atau cache HTTP, browser akan membuka jaringan untuk meminta resource. Jika resource tidak di-cache di CDN, permintaan harus kembali ke server asal.

Lapisan penyimpanan dalam cache

Caching service worker

Service worker mencegat permintaan HTTP jenis jaringan dan menggunakan strategi penyimpanan cache untuk menentukan resource apa yang harus ditampilkan ke browser. Cache pekerja layanan dan cache HTTP memiliki tujuan umum yang sama, tetapi cache pekerja layanan menawarkan lebih banyak kemampuan caching, seperti kontrol terperinci atas apa yang di-cache dan cara caching dilakukan.

Mengontrol cache service worker

Service worker mencegat permintaan HTTP dengan pemroses peristiwa (biasanya peristiwa fetch). Cuplikan kode ini menunjukkan logika strategi penayangan Cache-First.

Sangat direkomendasikan untuk menggunakan Workbox agar tidak perlu memulai dari awal. Misalnya, Anda dapat mendaftarkan jalur URL resource dengan satu baris kode ekspresi reguler.

import {registerRoute} from 'workbox-routing';

registerRoute(new RegExp('styles/.*\\.css'), callbackHandler);

Strategi dan kasus penggunaan caching service worker

Tabel berikutnya menguraikan strategi caching service worker umum dan kapan setiap strategi berguna.

Manfaat tambahan penyimpanan dalam cache service worker

Selain kontrol terperinci atas logika penyimpanan dalam cache, penyimpanan dalam cache service worker juga menyediakan:

• Ruang penyimpanan dan memori yang lebih besar untuk origin Anda: Browser mengalokasikan resource cache HTTP berdasarkan per-origin. Dengan kata lain, jika Anda memiliki beberapa subdomain, semuanya akan berbagi cache HTTP yang sama. Tidak ada jaminan bahwa konten asal/domain Anda akan tetap berada di cache HTTP dalam waktu yang lama. Misalnya, pengguna dapat menghapus cache dengan membersihkan secara manual dari UI setelan browser, atau memicu pemuatan ulang paksa di halaman. Dengan cache service worker, Anda memiliki kemungkinan yang jauh lebih tinggi bahwa konten dalam cache Anda tetap di-cache. Lihat Penyimpanan persisten untuk mempelajari lebih lanjut.
• Fleksibilitas yang lebih tinggi dengan jaringan yang tidak stabil atau pengalaman offline: Dengan cache HTTP, Anda hanya memiliki pilihan biner: resource di-cache atau tidak. Dengan caching pekerja layanan, Anda dapat memitigasi "hambatan" kecil dengan lebih mudah (dengan strategi "stale-while-revalidate"), menawarkan pengalaman offline yang lengkap (dengan strategi "Cache only") atau bahkan sesuatu di antaranya, seperti UI yang disesuaikan dengan bagian halaman yang berasal dari cache pekerja layanan dan beberapa bagian yang dikecualikan (dengan strategi "Set catch handler") jika sesuai.

Penyimpanan cache HTTP

Saat pertama kali memuat halaman web dan resource terkait, browser akan menyimpan resource ini di cache HTTP-nya. Cache HTTP biasanya diaktifkan secara otomatis oleh browser, kecuali jika telah dinonaktifkan secara eksplisit oleh pengguna akhir.

Menggunakan HTTP caching berarti mengandalkan server untuk menentukan kapan harus melakukan caching resource dan berapa lama.

Mengontrol masa habis berlaku cache HTTP dengan header respons HTTP

Saat server merespons permintaan browser untuk suatu resource, server menggunakan header respons HTTP untuk memberi tahu browser berapa lama browser harus menyimpan resource tersebut dalam cache. Lihat Header respons: mengonfigurasi server web untuk mempelajari lebih lanjut.

Strategi dan kasus penggunaan penyimpanan cache HTTP

Penyimpanan cache HTTP jauh lebih sederhana daripada penyimpanan cache service worker, karena penyimpanan cache HTTP hanya menangani logika habis masa berlaku resource berbasis waktu (TTL). Lihat Nilai header respons mana yang harus Anda gunakan? dan Mencegah permintaan jaringan yang tidak diperlukan dengan Cache HTTP (Ringkasan) untuk mempelajari lebih lanjut strategi caching HTTP.

Mendesain logika masa berlaku cache

Bagian ini menjelaskan kelebihan dan kekurangan penggunaan logika masa berlaku yang konsisten di seluruh lapisan cache service worker dan cache HTTP, serta kelebihan dan kekurangan logika masa berlaku yang terpisah di seluruh lapisan ini.

Logika masa berlaku yang konsisten untuk semua lapisan cache

Untuk menunjukkan kelebihan dan kekurangan, kita akan melihat 3 skenario: jangka panjang, jangka menengah, dan jangka pendek.

Skenario: Caching jangka panjang (Cache, kembali ke jaringan)

• Jika resource yang di-cache valid (<= 30 hari): Service worker akan segera menampilkan resource yang di-cache tanpa membuka jaringan.
• Jika masa berlaku resource yang di-cache telah berakhir (> 30 hari): Service worker akan membuka jaringan untuk mengambil resource. Browser tidak memiliki salinan resource di cache HTTP-nya, sehingga browser mengambil resource dari sisi server.

Kontra: Dalam skenario ini, caching HTTP memberikan lebih sedikit nilai karena browser akan selalu meneruskan permintaan ke sisi server saat cache berakhir di service worker.

Skenario: Penayangan cache jangka menengah (Stale-while-revalidate)

• Jika resource yang di-cache valid (<= 1 hari): Service worker akan segera menampilkan resource yang di-cache, dan membuka jaringan untuk mengambil resource. Browser memiliki salinan resource di cache HTTP-nya, sehingga browser menampilkan salinan tersebut ke service worker.
• Jika resource yang di-cache sudah habis masa berlakunya (> 1 hari): service worker akan segera menampilkan resource yang di-cache, dan membuka jaringan untuk mengambil resource. Browser tidak memiliki salinan resource di cache HTTP-nya, sehingga browser akan mengambil resource dari sisi server.

Kontra: Pekerja layanan memerlukan penghapusan cache tambahan untuk menggantikan cache HTTP agar dapat memanfaatkan langkah "validasi ulang" secara maksimal.

Skenario: Caching jangka pendek (Jaringan kembali ke cache)

• Jika resource yang di-cache valid (<= 10 menit): Service worker akan membuka jaringan untuk mengambil resource. Browser memiliki salinan resource di cache HTTP-nya, sehingga browser akan menayangkannya ke service worker tanpa perlu mengakses sisi server.
• Jika resource yang di-cache sudah habis masa berlakunya (> 10 menit): Service worker akan segera menampilkan resource yang di-cache, dan membuka jaringan untuk mengambil resource. Browser tidak memiliki salinan resource di cache HTTP-nya, sehingga browser akan mengambil resource dari sisi server.

Kontra: Mirip dengan skenario caching jangka menengah, service worker memerlukan logika penghapusan cache tambahan untuk menggantikan cache HTTP guna mengambil resource terbaru dari sisi server.

Service worker dalam semua skenario

Dalam semua skenario, cache service worker masih dapat menampilkan resource dalam cache saat jaringan tidak stabil. Di sisi lain, cache HTTP tidak dapat diandalkan saat jaringan tidak stabil atau tidak berfungsi.

Logika masa berlaku cache yang berbeda di cache service worker dan lapisan HTTP

Untuk menunjukkan kelebihan dan kekurangan, kita akan melihat lagi skenario jangka panjang, jangka menengah, dan jangka pendek.

Skenario: Caching jangka panjang (Cache, kembali ke jaringan)

• Jika resource yang di-cache valid di cache service worker (<= 90 hari): service worker akan segera menampilkan resource yang di-cache.
• Jika resource yang di-cache telah habis masa berlakunya di cache service worker (> 90 hari): Service worker akan membuka jaringan untuk mengambil resource. Browser tidak memiliki salinan resource di cache HTTP-nya, sehingga browser akan membuka sisi server.

Pro dan kontra:

• Pro: Pengguna mendapatkan respons instan karena service worker segera menampilkan resource yang di-cache.
• Pro: Pekerja layanan memiliki kontrol yang lebih terperinci tentang kapan harus menggunakan cache-nya dan kapan harus meminta versi baru resource.
• Kontra: Diperlukan strategi caching service worker yang terdefinisi dengan baik.

Skenario: Penyimpanan cache jangka menengah (Stale-while-revalidate)

• Jika resource yang di-cache valid di cache service worker (<= 30 hari): Service worker akan segera menampilkan resource yang di-cache.
• Jika resource yang di-cache telah habis masa berlakunya di cache service worker (> 30 hari): service worker akan mengakses jaringan untuk mendapatkan resource. Browser tidak memiliki salinan resource di cache HTTP-nya, sehingga browser akan mengakses sisi server.

Pro dan kontra:

• Pro: Pengguna mendapatkan respons instan karena service worker segera menampilkan resource yang di-cache.
• Pro: Service worker dapat memastikan bahwa permintaan berikutnya untuk URL tertentu menggunakan respons baru dari jaringan, berkat validasi ulang yang terjadi "di latar belakang".
• Kontra: Diperlukan strategi caching service worker yang terdefinisi dengan baik.

Skenario: Caching jangka pendek (Jaringan kembali ke cache)

• Jika resource yang di-cache valid di cache service worker (<= 1 hari): service worker akan membuka jaringan untuk mendapatkan resource. Browser menampilkan resource dari cache HTTP jika ada. Jika jaringan tidak berfungsi, service worker akan menampilkan resource dari cache service worker
• Jika resource yang di-cache telah habis masa berlakunya di cache service worker (> 1 hari): Service worker akan membuka jaringan untuk mengambil resource. Browser mengambil resource melalui jaringan karena versi yang di-cache di cache HTTP-nya telah habis masa berlakunya.

Pro dan kontra:

• Pro: Saat jaringan tidak stabil atau tidak berfungsi, service worker akan segera menampilkan resource yang di-cache.
• Kontra: Service worker memerlukan penghapusan cache tambahan untuk menggantikan Cache HTTP dan membuat permintaan "Network first".

Kesimpulan

Mengingat kompleksitas kombinasi skenario caching, tidak mungkin merancang satu aturan yang mencakup semua kasus. Namun, berdasarkan temuan di bagian sebelumnya, ada beberapa saran yang perlu dipertimbangkan saat mendesain strategi cache Anda:

• Logika penyimpanan cache service worker tidak harus konsisten dengan logika masa berlaku penyimpanan cache HTTP. Jika memungkinkan, gunakan logika masa berlaku yang lebih lama di service worker untuk memberikan kontrol yang lebih besar kepada service worker.
• Caching HTTP masih berperan penting, tetapi tidak dapat diandalkan saat jaringan tidak stabil atau tidak berfungsi.
• Tinjau kembali strategi penyimpanan dalam cache untuk setiap resource guna memastikan strategi penyimpanan dalam cache service worker Anda memberikan nilainya, tanpa bertentangan dengan cache HTTP.

Pelajari lebih lanjut

• Keandalan jaringan
• Mencegah permintaan jaringan yang tidak perlu dengan Cache HTTP
• Codelab cache HTTP
• Mengukur dampak performa pekerja layanan di dunia nyata
• Cache-Control vs. Expires
• Caching Demystified: Inspect, Clear, and Disable Caches