ฉันได้รับคำขอให้เขียนโพสต์นี้เกี่ยวกับการอัปเดตที่ค่อนข้างเล็กน้อยสำหรับ API แคชของโปรแกรมทำงาน หนูไม่คิดว่าบทความจะต้องมุ่งเน้นไปที่บทความ แต่หลังจากถกเถียงกันนานแล้ว ในที่สุดเราก็ได้เกมคีบตุ๊กตาร้าง จบเกมก็มาติดตามกันเลย
พร้อมรับฟังเรื่องการอัปเดตการใช้งาน API แคชของ Service Worker ของ Chrome ไหม
ฉันไม่ได้ยินเสียงคุณ จากที่เราบอกว่า คุณพร้อมจะทราบเกี่ยวกับการอัปเดตการใช้งาน API แคชของ Service Worker ของ Chrome หรือยัง
(คุณอาจอ่านต่อได้เฉพาะเมื่อคุณกระโดดลงเก้าอี้และตะโกนว่า "เย้!" การแกล้งเหวี่ยงบ่วงบาศไปพร้อมๆ กันนั้นไม่บังคับ แต่เราขอแนะนำให้ทำ)
cache.addAll พร้อมใช้งานใน Chrome 46
มี ถูกต้อง แคช! เพิ่มทั้งหมดเลย! Chrome 46
โอเค ยกเว้นการเสียดสีไว้ก่อนนะ เรื่องนี้ค่อนข้างใหญ่มาก เพราะ cache.addAll คือส่วนสุดท้ายที่เหลือของโพลีฟิลล์ "ของสำคัญ" ของแคช ซึ่งหมายความว่าไม่จำเป็นต้องใช้อีกแล้ว
วิธีทำงานของ 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 และคำขอ แล้วดึงข้อมูล แล้วเพิ่มลงในแคช กระบวนการนี้หมายถึงธุรกรรม - หากการดึงข้อมูลหรือการเขียนล้มเหลว การดำเนินการทั้งหมดจะล้มเหลว และแคชจะกลับสู่สถานะก่อนหน้า ซึ่งมีประโยชน์อย่างยิ่งสำหรับการดำเนินการติดตั้งเช่นข้างต้น โดยที่ความล้มเหลว 1 ครั้งหมายถึงความล้มเหลวโดยรวม
ตัวอย่างข้างต้นอยู่ใน Service Worker แต่เข้าถึง Caches API ได้จากหน้าต่างๆ เช่นกัน
Firefox รองรับ 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 1 รายการ หากสามารถแคชได้อย่างอิสระ เช่น อาจมีส่วนหัว 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- ไม่สนใจส่วนหัว "แตกต่าง" ในคำตอบที่แคชไว้
Firefox รองรับการทำงานแบบนี้อยู่แล้วใน... ตอนนี้คุณก็เข้าใจแล้วว่า ไปบอก Ben Kelly ได้เลยว่าเขาเก่งมากแค่ไหนในการทำให้เรื่องเหล่านี้ลงใน Firefox
หากคุณต้องการปฏิบัติตามตัวเลือกการค้นหาแคชของ Chrome โปรดดูที่ crbug.com/426309
พบกันใหม่คราวหน้าสำหรับบทใหม่ที่น่าตื่นเต้นของ "สิ่งที่เรานำมาใช้ใน Cache API"