Akademi JavaScript · Pelajaran

API Cache

Simpan dan hidangkan respons daripada cache.

Pelajaran 2 daripada 413 langkah

API Cache ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah Itu API Cache?

API Cache menyimpan pasangan permintaan dan respons dalam cache yang dinamakan. Service worker menggunakannya untuk memberikan aset tanpa mengakses rangkaian, yang menjadi asas sokongan luar talian.

Objek caches

Objek global caches (sebuah CacheStorage) mengurus semua cache bernama Anda. Objek ini tersedia dalam halaman dan service worker.

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

Membuka Cache

caches.open(name) mengembalikan janji untuk cache dengan nama tersebut dan menciptanya jika belum wujud. Nama membolehkan Anda menetapkan versi cache.

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

Mengisi Cache Awal dengan addAll

Semasa install, cache.addAll(urls) mengambil dan menyimpan senarai aset dalam satu panggilan. Jika mana-mana pengambilan gagal, keseluruhan operasi ditolak.

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

waitUntil

event.waitUntil(promise) memberitahu pelayar supaya memastikan worker terus hidup sehingga janji selesai. Balut persediaan cache Anda dengannya supaya pemasangan tidak selesai terlalu awal.

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

Menambah Satu Entri

cache.put(request, response) menyimpan satu respons, manakala cache.add(url) mengambil dan menyimpan satu URL. Gunakan put apabila Anda sudah mempunyai respons untuk disimpan.

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

Mencari daripada Cache

cache.match(request) mencari respons yang disimpan. Ia diselesaikan kepada respons tersebut atau undefined jika tiada padanan.

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 dalam semua cache serentak, sesuai digunakan dalam pengendali fetch apabila Anda tidak mengambil berat tentang cache 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) membekalkan respons yang akan digunakan oleh pelayar. Selesaikannya dengan Response yang cached atau baru diambil.

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

Clone Respons

Badan respons hanya boleh dibaca sekali. Untuk mengembalikan respons dan menyimpannya, lakukan clone terlebih dahulu.

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

Memadam Entri Cache

cache.delete(request) membuang satu entri; caches.delete(name) membuang seluruh cache bernama. Gunakan kedua-duanya untuk menyingkirkan aset lapuk.

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

Semakan Pantas

Uji pemahaman Anda tentang API Cache.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mempelajari API Cache:

caches.open(name) mendapatkan atau mencipta cache bernama.
addAll mengisi cache awal; put/add menyimpan entri.
match mendapatkan semula; caches.match mencari dalam semua cache.
respondWith membekalkan respons dalam fetch.
Clone respons sebelum cache dan respons tersebut dikembalikan.

Seterusnya, strategi cache.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 59
Pelajaran: 200

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “API Cache” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “API Cache”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “API Cache”?

Simpan dan hidangkan respons daripada cache. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “API Cache” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Akademi JavaScript