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 สามารถใช้ Polyfill ได้โดยได้รับความอนุเคราะห์จาก Arthur Stolyar