เราได้รับขอให้เขียนโพสต์นี้เกี่ยวกับการอัปเดตเล็กน้อยใน Service Worker Cache API เราคิดว่าเรื่องนี้ไม่น่าจะเขียนเป็นบทความแยกต่างหาก แต่หลังจากการโต้แย้งกันนานจนสุดท้ายต้องตัดสินด้วยการเล่นเกมปั่นแปะ ปรากฏว่าเราแพ้ ก็เลยได้บทความนี้มา
พร้อมที่จะฟังข้อมูลอัปเดตเกี่ยวกับการใช้งาน Service Worker Cache API ของ Chrome แล้วหรือยัง
เราได้ยินเสียงคุณไม่ชัด เราถามว่าคุณพร้อมที่จะฟังข้อมูลอัปเดตเกี่ยวกับการใช้งาน Service Worker Cache API ของ Chrome ไหม
(คุณอ่านต่อได้ก็ต่อเมื่อกระโดดขึ้นบนเก้าอี้แล้วตะโกนว่า "เย้" เท่านั้น การแกล้งทำท่าเหวี่ยงเชือกคล้องไปพร้อมๆ กันนั้นไม่บังคับ แต่เราขอแนะนำให้ทำ)
cache.addAll พร้อมใช้งานใน Chrome 46
ได้ ถูกต้อง แคช จุดเพิ่มทั้งหมด Chrome 46
โอเค โอเค เลิกพูดจาประชดประชันกัน เรื่องนี้เป็นเรื่องสำคัญมาก เนื่องจาก cache.addAll คือส่วนสุดท้ายที่เหลืออยู่ของ polyfill "สําคัญ" ของแคช ซึ่งหมายความว่าไม่จําเป็นต้องใช้อีกต่อไป
cache.addAll ทำงานดังนี้
// when the browser sees this SW for the first time
self.addEventListener('install', function(event) {
// wait until the following promise resolves
event.waitUntil(
// open/create a cache named 'mysite-static-v1'
caches.open('mysite-static-v1').then(function(cache) {
// fetch and add this stuff to it
return cache.addAll([
'/',
'/css/styles.css',
'/js/script.js',
'/imgs/cat-falls-over.gif'
]);
})
);
});
addAll จะรับอาร์เรย์ของ URL และคำขอ ดึงข้อมูล และเพิ่มลงในแคช การดำเนินการนี้เป็นธุรกรรม หากการดึงข้อมูลหรือการเขียนไม่สำเร็จ การดำเนินการทั้งหมดก็จะไม่สำเร็จ และแคชจะกลับสู่สถานะก่อนหน้า ซึ่งจะเป็นประโยชน์อย่างยิ่งสำหรับการดำเนินการติดตั้ง เช่น ด้านบน ซึ่งความล้มเหลวเพียงครั้งเดียวควรถือเป็นความล้มเหลวโดยรวม
ตัวอย่างข้างต้นอยู่ใน Service Worker แต่คุณเข้าถึงแคช API จากหน้าเว็บได้อย่างเต็มที่เช่นกัน
Firefox รองรับ API นี้อยู่แล้วในรุ่นสำหรับนักพัฒนาซอฟต์แวร์ ดังนั้น API นี้จะพร้อมใช้งานพร้อมกับการติดตั้งใช้งาน Service Worker ที่เหลือ
แต่นั่นไม่ใช่ทั้งหมด ยังมีอีกหลายอย่างที่เราจะปรับปรุงแคชได้ในอนาคต
cache.matchAll กำลังจะเปิดตัวใน Chrome 47
ซึ่งจะช่วยให้คุณได้รับรายการที่ตรงกันหลายรายการ
caches.open('mysite-static-v1').then(function(cache) {
return cache.matchAll('/');
}).then(function(responses) {
// …
});
คำสั่งข้างต้นจะแสดงทุกอย่างใน mysite-static-v1 ที่ตรงกับ / แคชช่วยให้คุณมีรายการหลายรายการต่อ URL ได้หากแคชได้แบบอิสระ เช่น มีส่วนหัว Vary ต่างกัน
Firefox รองรับการดำเนินการนี้ในรุ่นสำหรับนักพัฒนาซอฟต์แวร์อยู่แล้ว ดังนั้นจึงจะพร้อมใช้งานพร้อมกับการใช้งาน Service Worker ที่เหลือ
ตัวเลือกการค้นหาแคชจะพร้อมใช้งานใน Chrome เร็วๆ นี้
ตัวแฮนเดิลการดึงข้อมูลมาตรฐานมีดังนี้
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
หากเราแคช / ไว้และได้รับคําขอ / ระบบจะแสดง / จากแคช อย่างไรก็ตาม หากเราได้รับคำขอสำหรับ /?utm_source=blahblahwhatever คำขอนั้นจะไม่มาจากแคช คุณแก้ปัญหานี้ได้ด้วยการละเว้นสตริงการค้นหา URL ขณะจับคู่ โดยทําดังนี้
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request, {
ignoreSearch: true
}).then(function(response) {
return response || fetch(event.request);
})
);
});
ตอนนี้ /?utm_source=blahblahwhatever จะจับคู่กับรายการ / ตัวเลือกทั้งหมดมีดังนี้
ignoreSearch- ละเว้นส่วนการค้นหาของ URL ทั้งในส่วนอาร์กิวเมนต์คำขอและคำขอที่แคชไว้ignoreMethod- ละเว้นเมธอดของอาร์กิวเมนต์คําขอ เพื่อให้คําขอ POST จับคู่กับรายการ GET ในแคชได้ignoreVary- ละเว้นส่วนหัว Vary ในการตอบกลับที่แคชไว้
Firefox รองรับการดำเนินการนี้อยู่แล้วใน… คงไม่ต้องอธิบายแล้ว อย่าลืมไปบอก Ben Kelly ว่าเขายอดเยี่ยมเพียงใดที่ใส่ฟีเจอร์ทั้งหมดนี้ไว้ใน Firefox
หากต้องการติดตามการใช้งานตัวเลือกการค้นหาแคชของ Chrome โปรดไปที่ crbug.com/426309
แล้วพบกันใหม่ในบทถัดไปของ "สิ่งที่เราติดตั้งใช้งานในแคช API"