CacheQueryOptions มีให้บริการใน Chrome 54

เจฟฟ์ พอสนิก

ข่าวดีก็คือหากใช้ Cache Storage API ไม่ว่าจะภายใน Service Worker หรือจากเว็บแอปผ่าน window.caches โดยตรง ตั้งแต่ Chrome 54 เป็นต้นไป ระบบจะรองรับ CacheQueryOptions อย่างเต็มรูปแบบ ซึ่งจะช่วยให้คุณค้นหาคำตอบที่แคชไว้ทั้งหมดได้ง่ายขึ้น

มีตัวเลือกอะไรบ้าง

คุณสามารถตั้งค่าตัวเลือกต่อไปนี้ในการโทรใดก็ได้โดยใช้ CacheStorage.match() หรือ Cache.match() เมื่อไม่ได้ตั้งค่า ค่าเริ่มต้นทั้งหมดจะเป็น false (หรือ undefined สำหรับ cacheName) และคุณสามารถใช้หลายตัวเลือกในการเรียก match() เพียงครั้งเดียว

ignoreSearch

วิธีนี้จะสั่งให้อัลกอริทึมการจับคู่ละเว้นส่วนการค้นหาของ URL หรือที่เรียกว่าพารามิเตอร์การค้นหาของ URL ซึ่งมีประโยชน์ในกรณีที่คุณมี URL แหล่งที่มาซึ่งมีพารามิเตอร์การค้นหาที่ใช้สำหรับการติดตามการวิเคราะห์ แต่ไม่มีความสำคัญในแง่ของการระบุแหล่งข้อมูลที่ไม่ซ้ำกันในแคช ตัวอย่างเช่น มีหลายคนตกเป็นเหยื่อของ Service Worker ต่อไปนี้ "gotcha":

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache')
      .then(cache => cache.add('index.html'))
  );
});

self.addEventListener('fetch', event => {
  // Make sure this is a navigation request before responding.
  if (event.request.mode === 'navigation') {
    event.respondWith(
      caches.match(event.request) || fetch(event.request)
    );
  }
});

โค้ดประเภทนี้จะทำงานตามที่คาดไว้เมื่อผู้ใช้ไปที่ index.html โดยตรง แต่หากเว็บแอปใช้ผู้ให้บริการวิเคราะห์เพื่อติดตามลิงก์ขาเข้า และผู้ใช้ไปยัง index.html?utm_source=some-referral โดยค่าเริ่มต้น การส่ง index.html?utm_source=some-referral ไปยัง caches.match() จะไม่แสดงรายการสำหรับ index.html แต่หากตั้งค่า ignoreSearch เป็น true คุณสามารถดึงข้อมูลการตอบกลับที่แคชไว้ได้ตามที่คาดหวัง ไม่ว่าจะมีการตั้งค่าพารามิเตอร์การค้นหาไว้อย่างไร ดังนี้

caches.match(event.request, {ignoreSearch: true})

cacheName

cacheName มีประโยชน์เมื่อคุณมีแคชหลายรายการ และคุณต้องการคำตอบที่เก็บอยู่ในแคชที่ระบุเพียงแคชเดียว การใช้คำสั่งนี้จะทำให้การค้นหาของคุณมีประสิทธิภาพมากขึ้น (เนื่องจากเบราว์เซอร์ต้องตรวจสอบภายในแคชเพียงรายการเดียว แทนที่จะเป็นทั้งหมด) และทำให้คุณสามารถดึงการตอบสนองที่เฉพาะเจาะจงสำหรับ URL หนึ่งๆ ได้ เมื่อแคชหลายรายการอาจมี URL นั้นเป็นคีย์ cacheName จะมีผลเมื่อใช้กับ CacheStorage.match() เท่านั้น ไม่ใช่ Cache.match() เนื่องจากCache.match() ทำงานกับแท็กเดียวซึ่งมีชื่อว่าแคชอยู่แล้ว

// The following are functionally equivalent:
caches.open('my-cache')
  .then(cache => cache.match('index.html'));

// or...
caches.match('index.html', {cacheName: 'my-cache'});

ignoreMethodและignoreVary

ignoreMethod และ ignoreVary อยู่เฉพาะกลุ่มกว่า ignoreSearch และ cacheName เล็กน้อย แต่มีไว้เพื่อวัตถุประสงค์เฉพาะ

ignoreMethod อนุญาตให้คุณส่งผ่านออบเจ็กต์ Request ที่มี method (POST, PUT ฯลฯ) เป็นพารามิเตอร์แรกไปยัง match() โดยปกติแล้ว จะอนุญาตเฉพาะคำขอ GET หรือ HEAD เท่านั้น

// In a more realistic scenario, postRequest might come from
// the request property of a FetchEvent.
const postRequest = new Request('index.html', {method: 'post'});

// This will never match anything.
caches.match(postRequest);

// This will match index.html in any cache.
caches.match(postRequest, {ignoreMethod: true});

หากตั้งค่าเป็น true ฟังก์ชัน ignoreVary หมายความว่าระบบจะค้นหาแคชโดยไม่คำนึงถึงส่วนหัว Vary ที่ตั้งค่าไว้ในการตอบกลับที่แคชไว้ หากคุณทราบว่าคุณไม่ได้จัดการกับการตอบกลับที่แคชไว้ซึ่งใช้ส่วนหัว Vary คุณก็ไม่ต้องกังวลเกี่ยวกับการตั้งค่าตัวเลือกนี้

การสนับสนุนเบราว์เซอร์

CacheQueryOptions เกี่ยวข้องเฉพาะในเบราว์เซอร์ที่รองรับ Cache Storage API นอกเหนือจากเบราว์เซอร์ Chrome และเบราว์เซอร์แบบ Chromium แล้ว โปรแกรมนี้จำกัดอยู่ที่ Firefox ซึ่งรองรับ CacheQueryOptions อยู่แล้วโดยค่าเริ่มต้น

นักพัฒนาแอปที่ต้องการใช้ CacheQueryOptions ใน Chrome เวอร์ชันก่อน 54 จะใช้ประโยชน์จาก polyfill ได้ ด้วยความเอื้อเฟื้อจาก Arthur Stolyar