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

Jeff Posnick

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

มีตัวเลือกใดบ้าง

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

ignoreSearch

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

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 มีประโยชน์เมื่อคุณมีคachéหลายรายการและต้องการคำตอบที่จัดเก็บไว้ในแคชที่เฉพาะเจาะจงรายการเดียว การใช้แคชนี้จะทำให้การค้นหามีประสิทธิภาพมากขึ้น (เนื่องจากเบราว์เซอร์ต้องตรวจสอบภายในแคชเพียงรายการเดียวแทนที่จะตรวจสอบทุกรายการ) และช่วยให้คุณดึงข้อมูลการตอบกลับที่เฉพาะเจาะจงสำหรับ 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 สามารถใช้โพลีฟีลได้ โดยได้รับความอนุเคราะห์จาก Arthur Stolyar