ข้อได้เปรียบของ JavaScript Serviceworker API คือช่วยให้นักพัฒนาเว็บสามารถควบคุมแคชได้อย่างง่ายดาย แม้ว่าการใช้เทคโนโลยีเช่น ETAGs ยังเป็นเทคโนโลยีในการควบคุมแคช แต่การใช้ JavaScript ช่วยให้โปรแกรมสามารถควบคุมแคชที่ทรงพลังและได้อย่างอิสระมากขึ้น แน่นอนว่า Strong มีข้อดีและข้อเสีย - คุณต้องทำการรักษาหลังการดูแล การรักษาที่เรียกว่าหลังการดูแลคือการทำความสะอาดแคช
มาดูวิธีการสร้างวัตถุแคชเพิ่มข้อมูลแคชคำขอในแคชลบข้อมูลแคชคำขอจากแคชและในที่สุดวิธีการลบแคชอย่างสมบูรณ์
กำหนดส่วนสนับสนุนของเบราว์เซอร์สำหรับแคชอ็อบเจ็กต์ API
ตรวจสอบว่าเบราว์เซอร์รองรับ Cache API หรือไม่ ...
if ('caches' ในหน้าต่าง) {// มีการสนับสนุน!}…ตรวจสอบว่ามีวัตถุแคชอยู่ในหน้าต่างหรือไม่
สร้างวัตถุแคช
วิธีการสร้างวัตถุแคชคือการใช้ caches.open () และส่งผ่านในชื่อแคช:
caches.open ('test-cache') จากนั้น (ฟังก์ชั่น (แคช) {// แคชถูกสร้างขึ้นและคุณสามารถเข้าถึงได้ทันที});วิธี caches.open นี้ส่งคืนสัญญาและวัตถุแคชในนั้นถูกสร้างขึ้นใหม่ หากมีการสร้างมาก่อนมันจะไม่ถูกสร้างขึ้นใหม่
เพิ่มข้อมูลที่แคช
สำหรับแคชประเภทนี้คุณสามารถคิดว่ามันเป็นอาร์เรย์ของวัตถุคำขอและข้อมูลการตอบกลับที่ได้รับจากคำขอคำขอจะถูกเก็บไว้ในวัตถุแคชด้วยค่าคีย์ มีสองวิธีในการเพิ่มข้อมูลลงในแคช: เพิ่มและ addall ใช้สองวิธีนี้เพื่อเพิ่มที่อยู่ของคำขอที่จะแคช สำหรับการแนะนำวัตถุคำขอคุณสามารถอ้างถึงบทความ Fetch API
ใช้วิธี Addall เพื่อเพิ่มคำขอแคชในแบทช์:
caches.open ('test-cache'). จากนั้น (ฟังก์ชั่น (แคช) {cache.addall (['/', '/images/logo.png']) .Then (ฟังก์ชั่น () {// แคช!});});วิธี Addall นี้สามารถยอมรับอาร์เรย์ที่อยู่เป็นพารามิเตอร์และข้อมูลการตอบกลับของที่อยู่คำขอเหล่านี้จะถูกแคชในวัตถุแคช Addall ส่งคืนสัญญา หากต้องการเพิ่มที่อยู่เดียวให้ใช้วิธีเพิ่ม:
caches.open ('test-cache') จากนั้น (ฟังก์ชั่น (แคช) {cache.add ('/page/1'); // ที่อยู่ "/page/1" จะถูกร้องขอและข้อมูลการตอบกลับจะถูกแคช});วิธีการเพิ่ม () ยังสามารถยอมรับคำขอที่กำหนดเอง:
caches.open ('test-cache'). จากนั้น (ฟังก์ชั่น (แคช) {cache.add (คำขอใหม่ ('/หน้า/1', {/* พารามิเตอร์คำขอ*/}));});มันคล้ายกับวิธีการเพิ่ม () มาก เมธอด Put () ยังสามารถเพิ่มที่อยู่คำขอและเพิ่มข้อมูลการตอบกลับในเวลาเดียวกัน:
fetch ('/page/1'). จากนั้น (ฟังก์ชั่น (การตอบสนอง) {return caches.open ('test-cache'). จากนั้น (ฟังก์ชั่น (แคช) {return cache.put ('/page/1', การตอบสนอง);});});เข้าถึงข้อมูลที่แคช
ในการดูข้อมูลการร้องขอที่เปลี่ยนแปลงเราสามารถใช้วิธีการคีย์ () ในวัตถุแคชเพื่อรับวัตถุคำขอแคชทั้งหมดในแบบฟอร์มอาร์เรย์:
caches.open ('test-cache') จากนั้น (ฟังก์ชั่น (แคช) {cache.keys (). จากนั้น (ฟังก์ชั่น (cachedrequests) {console.log (cachedrequests); // [คำขอ]});}) "ติดตาม" ผู้อ้างอิง: "" URL: "http://www.webhek.com/images/logo.png"}*/หากคุณต้องการดูเนื้อหาการตอบสนองของคำขอแคชคุณสามารถใช้วิธี Cache.Match () หรือ cache.matchall (): วิธี:
caches.open ('test-cache'). จากนั้น (ฟังก์ชั่น (แคช) {cache.match ('/หน้า/1') จากนั้น (ฟังก์ชั่น (matchedResponse) {console.log (matchedResponse);});});/*การตอบสนอง {body: (... ) "https://www.webhek.com/page/1"}*/สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้งานและรายละเอียดของวัตถุตอบสนองคุณสามารถอ้างถึงบทความ Fetch API
ลบข้อมูลในแคช
ลบข้อมูลจากแคชเราสามารถใช้วิธีการลบ () ในวัตถุแคช:
caches.open ('test-cache'). จากนั้น (ฟังก์ชั่น (แคช) {cache.delete ('/page/1');});ด้วยวิธีนี้จะไม่มีข้อมูลคำขอเพิ่มเติม /หน้า /1 ในแคช
รับชื่อแคชในแคชที่มีอยู่
ในการรับชื่อของข้อมูลแคชที่มีอยู่แล้วในแคชเราจำเป็นต้องใช้วิธี caches.keys ():
caches.keys (). จากนั้น (ฟังก์ชั่น (cachekeys) {console.log (cachekeys); // ex: ["test-cache"]});window.caches.keys () ส่งคืนสัญญา
ลบวัตถุแคช
ในการลบวัตถุที่แคชคุณต้องใช้ชื่อคีย์แคชเท่านั้น:
caches.delete ('test-cache'). จากนั้น (function () {console.log ('แคชที่ถูกลบสำเร็จ!');});วิธีลบข้อมูลแคชเก่าในปริมาณมาก:
// สมมติว่า `cache_name` เป็นชื่อของแคชใหม่ // ตอนนี้ล้างแคชเก่า var cache_name = 'เวอร์ชัน -8'; // ... caches.keys (). จากนั้น (ฟังก์ชั่น (cachenames) {กลับสัญญาทั้งหมด -ต้องการเป็นผู้เชี่ยวชาญด้านพนักงานบริการหรือไม่? รหัสข้างต้นมีค่าควรใส่ในห้องสมุดของคุณ Firefox และ Google Chrome Support Service Worker และฉันเชื่อว่าเว็บไซต์และแอพอื่น ๆ จะใช้เทคโนโลยีการแคชนี้เพื่อปรับปรุงความเร็วในการทำงานในไม่ช้า
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น