Strategi Caching
Terapkan pola cache-first dan network-first.
Strategi Caching adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.
Mengapa Strategi Penting
Aset yang berbeda memerlukan penanganan yang berbeda. Logo dapat disajikan dari cache selamanya, sedangkan umpan API harus tetap fresh. Strategi penggunaan cache menentukan apakah cache atau jaringan dicoba terlebih dahulu, serta cara menggabungkan keduanya.
Mengutamakan Cache
Cache-first: periksa cache; jika ditemukan, kembalikan hasilnya; jika tidak, ambil dari jaringan. Strategi ini ideal untuk aset statis yang jarang berubah, seperti fon, CSS, dan gambar.
async function cacheFirst(request) {
const cached = await caches.match(request);
return cached || fetch(request);
}Mengutamakan Cache dengan Fallback
Saat cache tidak menemukan kecocokan, Anda dapat mengambil hasilnya sekaligus menyimpannya agar permintaan berikutnya berlangsung cepat. Dengan cara ini, cache dihangatkan secara bertahap saat pengguna menjelajah.
async function cacheFirst(request) {
const cached = await caches.match(request);
if (cached) return cached;
const fresh = await fetch(request);
const cache = await caches.open('runtime');
cache.put(request, fresh.clone());
return fresh;
}Mengutamakan Jaringan
Network-first: coba jaringan; jika berhasil, gunakan dan simpan hasilnya ke cache; jika gagal (luring), gunakan cache sebagai fallback. Strategi ini paling baik untuk konten yang sering diperbarui, seperti berita atau dasbor.
async function networkFirst(request) {
try {
const fresh = await fetch(request);
const cache = await caches.open('runtime');
cache.put(request, fresh.clone());
return fresh;
} catch (err) {
return caches.match(request);
}
}Salinan Lama Sambil Validasi Ulang
Salinan lama sambil validasi ulang: segera kembalikan salinan yang tersimpan dalam cache agar cepat, sambil mengambil salinan baru di latar belakang untuk memperbarui cache pada penggunaan berikutnya. Cara ini memberikan keseimbangan yang sangat baik antara kecepatan dan kemutakhiran.
async function staleWhileRevalidate(request) {
const cache = await caches.open('runtime');
const cached = await cache.match(request);
const network = fetch(request).then(res => {
cache.put(request, res.clone());
return res;
});
return cached || network;
}Hanya Jaringan dan Hanya Cache
Dua pilihan ekstrem yang sederhana:
- Hanya jaringan: selalu mengambil data dan tidak pernah menyimpannya dalam cache, misalnya sinyal analitik.
- Hanya cache: hanya menyajikan aset yang sudah disimpan sebelumnya dalam cache dan tidak pernah mengakses jaringan, misalnya kerangka aplikasi.
// network-only:
// return fetch(request);
// cache-only:
// return caches.match(request);Pengarahan Berdasarkan Jenis Permintaan
Aplikasi nyata memilih strategi untuk setiap permintaan. Periksa request.url atau request.destination di penangan pengambilan, lalu arahkan permintaan sesuai hasilnya.
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
if (url.pathname.startsWith('/api/')) {
event.respondWith(networkFirst(event.request));
} else {
event.respondWith(cacheFirst(event.request));
}
});Menangani Cadangan Offline
Jika jaringan dan cache sama-sama tidak menemukan data, kembalikan halaman offline atau pengganti yang ramah, bukan respons yang rusak.
async function withOfflineFallback(request) {
return (await caches.match(request)) ||
(await caches.match('/offline.html'));
}Menyimpan Hanya Respons yang Berhasil
Hindari menyimpan kesalahan dalam cache. Periksa response.ok (atau status) sebelum menyimpan, agar respons 404 atau 500 tidak merusak cache Anda.
const fresh = await fetch(request);
if (fresh.ok) {
cache.put(request, fresh.clone());
}
return fresh;Memilih Strategi
Sesuaikan strategi dengan konten:
- Aset statis: gunakan cache terlebih dahulu
- Data dinamis: gunakan jaringan terlebih dahulu
- Konten campuran: gunakan salinan lama sambil validasi ulang
Sebagian besar aplikasi menggabungkan beberapa strategi melalui pengarahan permintaan.
Ringkasan Strategi
Strategi penyimpanan cache memungkinkan satu pekerja layanan melayani seluruh aplikasi secara cerdas: aset statis tampil seketika, data dinamis tetap mutakhir, dan cadangan offline ditangani dengan baik, semuanya dipilih untuk setiap permintaan.
Uji Cepat
Uji pemahaman Anda tentang strategi penyimpanan cache.
Ringkasan
Anda telah mempelajari strategi penyimpanan cache:
- Cache terlebih dahulu untuk aset statis.
- Jaringan terlebih dahulu untuk data dinamis yang mutakhir.
- Salinan lama sambil validasi ulang untuk menggabungkan kecepatan dan kemutakhiran.
- Arahkan setiap permintaan melalui
request.url/destination. - Simpan hanya respons yang berhasil dan sediakan cadangan offline.
Selanjutnya, kita akan membahas sinkronisasi di latar belakang dan pembaruan cache.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Strategi Caching” gratis?
Ya — teks lengkap “Strategi Caching” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Strategi Caching”?
Terapkan pola cache-first dan network-first. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai JavaScript Academy?
Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Strategi Caching” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?
Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.