JavaScript Academy · Pelajaran

API Cache

Simpan dan sajikan respons dari cache.

API Cache adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Apa Itu Cache API?

Cache API menyimpan pasangan permintaan dan respons di dalam cache bernama. Pekerja layanan menggunakannya untuk menyajikan aset tanpa mengakses jaringan, yang menjadi dasar dukungan luring.

Objek caches

Objek global caches (sebuah CacheStorage) mengelola semua cache bernama Anda. Objek ini tersedia di halaman maupun pekerja layanan.

// Available globally:
// caches.open(name)
// caches.match(request)
// caches.delete(name)
// caches.keys()

Membuka Cache

caches.open(name) mengembalikan Promise untuk cache dengan nama tersebut dan membuatnya jika belum ada. Nama memungkinkan Anda membuat versi cache.

caches.open('static-v1').then(cache => {
  console.log('cache ready');
});

Menyimpan Awal dengan addAll

Selama install, cache.addAll(urls) mengambil dan menyimpan daftar aset dalam satu panggilan. Jika salah satu pengambilan gagal, seluruh operasi ditolak.

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-v1').then(cache =>
      cache.addAll(['/', '/styles.css', '/app.js'])
    )
  );
});

waitUntil

event.waitUntil(promise) memberi tahu peramban untuk menjaga pekerja tetap aktif sampai promise selesai. Bungkus penyiapan cache di dalamnya agar pemasangan tidak selesai terlalu cepat.

self.addEventListener('install', (event) => {
  event.waitUntil(setupCache());
});

Menambahkan Satu Entri

cache.put(request, response) menyimpan satu respons, sedangkan cache.add(url) mengambil dan menyimpan satu URL. Gunakan put jika Anda sudah memiliki respons yang ingin disimpan.

const cache = await caches.open('static-v1');
const response = await fetch('/logo.png');
await cache.put('/logo.png', response);

Mencocokkan dari Cache

cache.match(request) mencari respons yang tersimpan. Operasi ini menghasilkan respons, atau undefined jika tidak ada kecocokan.

const cache = await caches.open('static-v1');
const hit = await cache.match('/styles.css');
if (hit) console.log('served from cache');

Pintasan caches.match

caches.match(request) mencari di semua cache sekaligus, praktis dalam pengendali fetch ketika Anda tidak memedulikan cache mana yang menyimpan aset tersebut.

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(hit =>
      hit || fetch(event.request)
    )
  );
});

respondWith

Di dalam event fetch, event.respondWith(promise) menyediakan respons yang akan digunakan peramban. Selesaikan promise dengan Response yang berasal dari cache atau baru saja diambil.

self.addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request));
});

Menggandakan Respons

Isi respons hanya dapat dibaca satu kali. Agar dapat mengembalikan respons sekaligus menyimpannya, lakukan clone terlebih dahulu.

const response = await fetch(request);
cache.put(request, response.clone()); // store a copy
return response; // return the original

Menghapus Entri Cache

cache.delete(request) menghapus satu entri; caches.delete(name) menghapus seluruh cache bernama. Gunakan keduanya untuk menyingkirkan aset yang sudah usang.

await cache.delete('/old-asset.js');
await caches.delete('static-v0'); // remove old cache version

Uji Cepat

Ujilah pemahaman Anda tentang Cache API.

Ringkasan

Anda telah mempelajari Cache API:

caches.open(name) mendapatkan atau membuat cache bernama.
addAll menyimpan aset awal ke cache; put/add menyimpan entri.
match mengambil respons; caches.match mencari di semua cache.
respondWith menyediakan respons dalam fetch.
Gandakan respons sebelum menyimpan dan mengembalikannya.

Selanjutnya, strategi penggunaan cache.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “API Cache” gratis?

Ya — teks lengkap “API Cache” 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 “API Cache”?

Simpan dan sajikan respons dari cache. 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 2 dari 4.

Berapa lama pelajaran “API Cache” 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.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy