ข่าวดีก็คือหากใช้ 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