Pembuatan cache pekerja layanan dan cache HTTP

Kelebihan dan kekurangan penggunaan logika masa berlaku yang konsisten atau berbeda di seluruh cache pekerja layanan dan lapisan cache HTTP.

Jonathan Chen

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

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

Ringkasan alur penyimpanan dalam cache

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

1. Cache pekerja layanan: Pekerja layanan memeriksa apakah resource ada dalam cache-nya dan memutuskan apakah akan menampilkan resource itu sendiri berdasarkan strategi penyimpanan dalam cache yang diprogram. Perhatikan bahwa hal ini tidak terjadi secara otomatis. Anda perlu membuat pengendali peristiwa pengambilan di pekerja layanan dan mencegat permintaan jaringan sehingga permintaan ditayangkan dari cache pekerja layanan, 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 pekerja layanan 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 pekerja layanan

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

Mengontrol cache pekerja layanan

Pekerja layanan mencegat permintaan HTTP dengan pemroses peristiwa (biasanya peristiwa fetch). Cuplikan kode ini menunjukkan logika strategi cache Cache-First.

Sebaiknya gunakan Workbox untuk menghindari membuat ulang roda. 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 pekerja layanan

Tabel berikutnya menguraikan strategi penyimpanan dalam cache pekerja layanan umum dan kapan setiap strategi berguna.

Manfaat tambahan dari penyimpanan dalam cache pekerja layanan

Selain kontrol terperinci atas logika penyimpanan dalam cache, penyimpanan dalam cache pekerja layanan juga menyediakan:

• Lebih banyak memori dan ruang penyimpanan untuk origin Anda: Browser mengalokasikan resource cache HTTP berdasarkan origin. Dengan kata lain, jika Anda memiliki beberapa subdomain, semuanya akan menggunakan cache HTTP yang sama. Tidak ada jaminan bahwa konten origin/domain Anda akan tetap berada di cache HTTP dalam waktu lama. Misalnya, pengguna dapat menghapus cache dengan membersihkannya secara manual dari UI setelan browser, atau memicu pemuatan ulang paksa di halaman. Dengan cache pekerja layanan, Anda memiliki kemungkinan yang jauh lebih tinggi bahwa konten yang di-cache akan 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 cache pekerja layanan, Anda dapat mengurangi sedikit "masalah" 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 dikecualikan (dengan strategi "Set catch handler") jika sesuai.

Caching 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 caching HTTP berarti mengandalkan server untuk menentukan kapan harus meng-cache resource dan berapa lama.

Mengontrol masa berlaku cache HTTP dengan header respons HTTP

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

Strategi dan kasus penggunaan caching HTTP

Cache HTTP jauh lebih sederhana daripada cache pekerja layanan, karena cache HTTP hanya menangani logika masa berlaku resource berbasis waktu (TTL). Lihat Nilai header respons mana yang harus Anda gunakan? dan Ringkasan untuk mempelajari lebih lanjut strategi penyimpanan dalam cache HTTP.

Mendesain logika masa berlaku cache

Bagian ini menjelaskan pro dan kontra penggunaan logika masa berlaku yang konsisten di seluruh cache pekerja layanan dan lapisan cache HTTP, serta pro dan kontra logika masa berlaku terpisah di seluruh lapisan ini.

Glitch di bawah menunjukkan cara kerja cache service worker dan cache HTTP di berbagai skenario:

Logika habis masa berlaku yang konsisten untuk semua lapisan cache

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

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

• Jika resource yang di-cache valid (<= 30 hari): Pekerja layanan akan segera menampilkan resource yang di-cache tanpa membuka jaringan.
• Saat masa berlaku resource yang di-cache berakhir (> 30 hari): Pekerja layanan akan membuka jaringan untuk mengambil resource. Browser tidak memiliki salinan resource dalam cache HTTP-nya, sehingga browser akan menggunakan sisi server untuk resource tersebut.

Kekurangan: Dalam skenario ini, penyimpanan dalam cache HTTP memberikan lebih sedikit nilai karena browser akan selalu meneruskan permintaan ke sisi server saat masa berlaku cache di service worker berakhir.

Skenario: Cache jangka menengah (Stale-while-revalidate)

• Jika resource yang di-cache valid (<= 1 hari): Pekerja layanan akan segera menampilkan resource yang di-cache, dan membuka jaringan untuk mengambil resource. Browser memiliki salinan resource dalam cache HTTP-nya, sehingga menampilkan salinan tersebut ke pekerja layanan.
• Saat masa berlaku resource yang di-cache habis (> 1 hari): Pekerja layanan akan segera menampilkan resource yang di-cache, dan membuka jaringan untuk mengambil resource. Browser tidak memiliki salinan resource dalam cache HTTP-nya, sehingga browser akan menggunakan sisi server untuk mengambil resource.

Kekurangan: Pekerja layanan memerlukan cache-busting tambahan untuk mengganti cache HTTP agar dapat memaksimalkan langkah "validasi ulang".

Skenario: Cache jangka pendek (Jaringan kembali ke cache)

• Jika resource yang di-cache valid (<= 10 menit): Pekerja layanan akan membuka jaringan untuk mengambil resource. Browser memiliki salinan resource dalam cache HTTP-nya sehingga menampilkannya ke pekerja layanan tanpa membuka sisi server.
• Saat masa berlaku resource yang di-cache habis (> 10 menit): Pekerja layanan akan segera menampilkan resource yang di-cache, dan membuka jaringan untuk mengambil resource. Browser tidak memiliki salinan resource dalam cache HTTP-nya, sehingga browser akan menggunakan sisi server untuk mengambil resource.

Kekurangan: Serupa dengan skenario penyimpanan dalam jangka menengah, pekerja layanan memerlukan logika cache-busting tambahan untuk mengganti cache HTTP guna mengambil resource terbaru dari sisi server.

Pekerja layanan di semua skenario

Dalam semua skenario, cache pekerja layanan masih dapat menampilkan resource yang di-cache saat jaringan tidak stabil. Di sisi lain, cache HTTP tidak dapat diandalkan jika jaringan tidak stabil atau tidak aktif.

Logika masa berlaku cache yang berbeda di cache pekerja layanan dan lapisan HTTP

Untuk menunjukkan kelebihan dan kekurangannya, kita akan melihat kembali skenario jangka panjang, jangka menengah, dan jangka pendek.

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

• Jika resource yang di-cache valid di cache pekerja layanan (<= 90 hari): Pekerja layanan akan segera menampilkan resource yang di-cache.
• Saat resource yang di-cache habis masa berlakunya di cache pekerja layanan (> 90 hari): Pekerja layanan akan membuka jaringan untuk mengambil resource. Browser tidak memiliki salinan resource di cache HTTP-nya, sehingga resource tersebut akan diproses di sisi server.

Pro dan kontra:

• Kelebihan: Pengguna mendapatkan respons instan karena pekerja layanan segera menampilkan resource yang di-cache.
• Kelebihan: Pekerja layanan memiliki kontrol yang lebih terperinci tentang kapan harus menggunakan cache-nya dan kapan harus meminta versi baru resource.
• Kekurangan: Strategi caching pekerja layanan yang ditentukan dengan baik diperlukan.

Skenario: Cache jangka menengah (Stale-while-revalidate)

• Jika resource yang di-cache valid di cache pekerja layanan (<= 30 hari): Pekerja layanan akan segera menampilkan resource yang di-cache.
• Saat masa berlaku resource yang di-cache habis di cache pekerja layanan (> 30 hari): Pekerja layanan akan membuka jaringan untuk mendapatkan resource. Browser tidak memiliki salinan resource di cache HTTP-nya, sehingga resource tersebut akan diakses dari sisi server.

Pro dan kontra:

• Kelebihan: Pengguna mendapatkan respons instan karena pekerja layanan segera menampilkan resource yang di-cache.
• Kelebihan: Pekerja layanan dapat memastikan bahwa permintaan berikutnya untuk URL tertentu menggunakan respons baru dari jaringan, berkat validasi ulang yang terjadi "di latar belakang".
• Kekurangan: Strategi caching pekerja layanan yang ditentukan dengan baik diperlukan.

Skenario: Cache jangka pendek (Jaringan kembali ke cache)

• Jika resource yang di-cache valid di cache pekerja layanan (<= 1 hari): Pekerja layanan akan membuka jaringan untuk resource tersebut. Browser menampilkan resource dari cache HTTP jika ada. Jika jaringan tidak aktif, pekerja layanan akan menampilkan resource dari cache pekerja layanan
• Saat masa berlaku resource yang di-cache habis di cache pekerja layanan (> 1 hari): Pekerja layanan akan membuka jaringan untuk mengambil resource. Browser mengambil resource melalui jaringan karena versi yang di-cache dalam cache HTTP-nya telah habis masa berlakunya.

Pro dan kontra:

• Kelebihan: Saat jaringan tidak stabil atau tidak berfungsi, pekerja layanan akan segera menampilkan resource yang di-cache.
• Kekurangan: Pekerja layanan memerlukan cache-busting tambahan untuk mengganti Cache HTTP dan membuat permintaan "Jaringan terlebih dahulu".

Kesimpulan

Mengingat kompleksitas kombinasi skenario penyimpanan dalam cache, Anda tidak dapat mendesain satu aturan yang mencakup semua kasus. Namun, berdasarkan temuan di bagian sebelumnya, ada beberapa saran yang perlu diperhatikan saat mendesain strategi cache:

• Logika penyimpanan dalam cache pekerja layanan tidak perlu konsisten dengan logika masa berlaku penyimpanan dalam cache HTTP. Jika memungkinkan, gunakan logika masa berlaku yang lebih lama di pekerja layanan untuk memberikan kontrol yang lebih besar kepada pekerja layanan.
• Cache HTTP masih memainkan peran penting, tetapi tidak dapat diandalkan jika jaringan tidak stabil atau tidak berfungsi.
• Tinjau kembali strategi penyimpanan dalam cache untuk setiap resource guna memastikan strategi penyimpanan dalam cache pekerja layanan Anda memberikan nilainya, tanpa bertentangan dengan cache HTTP.

Pelajari lebih lanjut

• Keandalan jaringan
• Mencegah permintaan jaringan yang tidak diperlukan dengan Cache HTTP
• Codelab cache HTTP
• Mengukur dampak performa di dunia nyata dari pekerja layanan
• Cache-Control vs. Expires
• Menjelaskan Penyimpanan dalam Cache: Memeriksa, Menghapus, dan Menonaktifkan Cache