JavaScript Academy · บทเรียน

Cache API

จัดเก็บและให้บริการการตอบกลับจากแคช

Cache API เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

Cache API คืออะไร

API สำหรับจัดการ cache ใช้จัดเก็บคู่คำขอและผลตอบกลับไว้ใน cache ที่ตั้งชื่อไว้ เซอร์วิสเวิร์กเกอร์ใช้สิ่งนี้เพื่อส่งทรัพยากรโดยไม่ต้องเข้าถึงเครือข่าย ซึ่งเป็นพื้นฐานของการรองรับการใช้งานออฟไลน์

วัตถุ caches

วัตถุส่วนกลาง caches ซึ่งเป็น CacheStorage ใช้จัดการ cache ที่ตั้งชื่อไว้ทั้งหมดของคุณ และพร้อมใช้งานทั้งในหน้าเว็บและเซอร์วิสเวิร์กเกอร์

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

การเปิด cache

caches.open(name) ส่งคืนพรอมิสสำหรับ cache ที่มีชื่อนั้น และจะสร้าง cache ให้หากยังไม่มีชื่อดังกล่าว การตั้งชื่อช่วยให้คุณจัดการรุ่นของ cache ได้

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

การจัดเก็บล่วงหน้าด้วย addAll

ระหว่าง install cache.addAll(urls) จะดึงและจัดเก็บรายการทรัพยากรทั้งหมดในคำสั่งเดียว หากการดึงข้อมูลรายการใดล้มเหลว การดำเนินการทั้งหมดจะถูกปฏิเสธ

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

waitUntil

event.waitUntil(promise) แจ้งเบราว์เซอร์ให้คงเวิร์กเกอร์ไว้จนกว่าพรอมิสจะเสร็จสิ้น ให้ครอบการตั้งค่า cache ไว้ภายในคำสั่งนี้ เพื่อไม่ให้การติดตั้งเสร็จเร็วเกินไป

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

การเพิ่มรายการเดียว

cache.put(request, response) ใช้จัดเก็บผลตอบกลับเดียว ส่วน cache.add(url) จะดึงและจัดเก็บ URL หนึ่งรายการ ใช้ put เมื่อคุณมีผลตอบกลับที่ต้องการบันทึกอยู่แล้ว

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

การจับคู่จาก cache

cache.match(request) ใช้ค้นหาผลตอบกลับที่จัดเก็บไว้ โดยจะส่งคืนผลตอบกลับ หรือส่งคืน undefined หากไม่พบรายการที่ตรงกัน

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

ทางลัด caches.match

caches.match(request) ค้นหาจาก cache ทั้งหมดพร้อมกัน สะดวกในตัวจัดการ fetch เมื่อคุณไม่สนใจว่าทรัพยากรนั้นอยู่ใน cache ใด

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

respondWith

ภายในเหตุการณ์ fetch event.respondWith(promise) จะจัดหาผลตอบกลับที่เบราว์เซอร์จะใช้ ให้พรอมิสเสร็จสมบูรณ์ด้วยผลตอบกลับจาก cache หรือผลตอบกลับที่ดึงมาใหม่แบบ fresh

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

การโคลนผลตอบกลับ

เนื้อหาของผลตอบกลับสามารถอ่านได้เพียงครั้งเดียว หากต้องการส่งคืนผลตอบกลับและจัดเก็บผลตอบกลับนั้นด้วย ให้โคลนก่อน

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

การลบรายการใน cache

cache.delete(request) ลบรายการหนึ่งรายการ ส่วน caches.delete(name) จะลบ cache ที่ตั้งชื่อไว้ทั้งชุด ใช้คำสั่งเหล่านี้เพื่อนำทรัพยากรเก่าออก

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

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจเกี่ยวกับ API สำหรับจัดการ cache

ทบทวน

คุณได้เรียนรู้เกี่ยวกับ API สำหรับจัดการ cache แล้ว:

caches.open(name) ใช้รับหรือสร้าง cache ที่ตั้งชื่อไว้
addAll ใช้จัดเก็บล่วงหน้า ส่วน put/add ใช้จัดเก็บรายการ
match ใช้ดึงข้อมูล ส่วน caches.match ใช้ค้นหาจาก cache ทั้งหมด
respondWith ใช้จัดหาผลตอบกลับในเหตุการณ์ fetch
โคลนผลตอบกลับก่อนจัดเก็บและส่งคืน

ถัดไปคือกลยุทธ์การแคช

คำถามที่พบบ่อย

บทเรียน “Cache API” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Cache API” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Cache API”

จัดเก็บและให้บริการการตอบกลับจากแคช คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “Cache API” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy