การแคช Service Worker และการแคช HTTP

ข้อดีและข้อเสียของการใช้ตรรกะการหมดอายุที่สอดคล้องกันหรือแตกต่างกันในแคชของ Service Worker และเลเยอร์แคช HTTP

Jonathan Chen

ในขณะที่ Service Worker และ PWA กลายเป็นมาตรฐานของเว็บแอปพลิเคชันสมัยใหม่ การแคชทรัพยากร มีความซับซ้อนมากขึ้น บทความนี้ครอบคลุมภาพรวมของการแคชของเบราว์เซอร์ ซึ่งรวมถึงข้อมูลต่อไปนี้

• กรณีการใช้งานและความแตกต่างระหว่างการแคช Service Worker กับการแคช HTTP
• ข้อดีและข้อเสียของกลยุทธ์การหมดอายุการแคชของ Service Worker แต่ละกลยุทธ์เมื่อเทียบกับกลยุทธ์การแคช HTTP ปกติ

ภาพรวมของขั้นตอนการแคช

ในระดับสูง เบราว์เซอร์จะทำตามลำดับการแคชด้านล่างเมื่อขอทรัพยากร

1. แคชของ Service Worker: โปรแกรมทำงานของบริการจะตรวจสอบว่าทรัพยากรอยู่ในแคชหรือไม่ และ ตัดสินใจว่าจะส่งคืนทรัพยากรตามกลยุทธ์การแคชที่ตั้งโปรแกรมไว้หรือไม่ หมายเหตุ เหตุการณ์นี้จะไม่ได้เกิดขึ้นโดยอัตโนมัติ คุณต้องสร้างตัวแฮนเดิลเหตุการณ์การดึงข้อมูลใน Service Worker และขัดขวางคําขอเครือข่ายเพื่อให้ระบบแสดงคําขอจากแคชของ Service Worker แทนเครือข่าย
2. แคช HTTP (หรือที่เรียกว่าแคชเบราว์เซอร์): หากพบทรัพยากรในแคช HTTP และยังไม่ได้หมดอายุ เบราว์เซอร์จะใช้ทรัพยากรจากแคช HTTP โดยอัตโนมัติ
3. ฝั่งเซิร์ฟเวอร์: หากไม่พบข้อมูลในแคช Service Worker หรือแคช HTTP เบราว์เซอร์จะไปที่เครือข่ายเพื่อขอทรัพยากร หากไม่มีแคชทรัพยากรไว้ใน CDN คำขอจะต้องกลับไปที่เซิร์ฟเวอร์ต้นทาง

เลเยอร์การแคช

การแคช Service Worker

โปรแกรมทำงานของบริการจะสกัดกั้นคำขอ HTTP ประเภทเครือข่ายและใช้ กลยุทธ์การแคช เพื่อกำหนดทรัพยากรที่ควรส่งไปยังเบราว์เซอร์ แคชของ Service Worker และแคช HTTP มีวัตถุประสงค์ทั่วไปเหมือนกัน แต่แคชของ Service Worker มีความสามารถในการแคชมากกว่า เช่น การควบคุมอย่างละเอียดเกี่ยวกับสิ่งที่จะแคชและวิธีแคช

การควบคุมแคชของ Service Worker

บริการเวิร์กเกอร์จะขัดขวางคำขอ HTTP ด้วยตัวรับฟังเหตุการณ์ (โดยปกติคือเหตุการณ์ fetch) ข้อมูลโค้ดนี้แสดงตรรกะของกลยุทธ์การแคชแบบใช้แคชก่อน

เราขอแนะนำอย่างยิ่งให้ใช้กล่องงานเพื่อหลีกเลี่ยง คิดค้นวงล้อขึ้นมาใหม่ เช่น คุณสามารถลงทะเบียนเส้นทาง URL ของทรัพยากรด้วยโค้ดนิพจน์ทั่วไป 1 บรรทัด

import {registerRoute} from 'workbox-routing';

registerRoute(new RegExp('styles/.*\\.css'), callbackHandler);

กลยุทธ์การแคชและกรณีการใช้งานของโปรแกรมทำงานของบริการ

ตารางถัดไปจะแสดงกลยุทธ์การแคช Service Worker ทั่วไปและกรณีที่แต่ละกลยุทธ์มีประโยชน์

ประโยชน์เพิ่มเติมของการแคชของ Service Worker

นอกจากการควบคุมตรรกะการแคชแบบละเอียดแล้ว การแคชของ Service Worker ยังมีประโยชน์ดังนี้

• หน่วยความจําและพื้นที่เก็บข้อมูลมากขึ้นสําหรับต้นทาง: เบราว์เซอร์จะจัดสรรทรัพยากรแคช HTTP ตามต้นทาง กล่าวคือ หากคุณมีโดเมนย่อยหลายรายการ โดเมนย่อยทั้งหมดจะใช้แคช HTTP เดียวกัน เราไม่รับประกันว่าเนื้อหาของต้นทาง/โดเมนจะอยู่ในแคช HTTP เป็นเวลานาน สำหรับ ตัวอย่างเช่น ผู้ใช้อาจล้างแคชอย่างถาวรได้โดยการล้างข้อมูลด้วยตนเองจาก UI การตั้งค่าของเบราว์เซอร์ หรือ การฮาร์ดรีโหลดบนหน้า เมื่อใช้แคช Service Worker คุณมีแนวโน้มที่เนื้อหาที่แคชไว้จะยังคงอยู่ในแคชได้นานขึ้น ดูถาวร เพื่อดูข้อมูลเพิ่มเติม
• ความยืดหยุ่นที่มากขึ้นสำหรับเครือข่ายที่ไม่สม่ำเสมอหรือการใช้งานแบบออฟไลน์: ด้วยแคช HTTP คุณจะ ให้ใช้ไบนารีทางเลือกเท่านั้น นั่นคือแคชทรัพยากรไว้ หรือไม่ก็แคช เมื่อใช้การแคช Service Worker คุณจะสามารถลด "ปัญหาเล็กๆ น้อยๆ" ได้ง่ายขึ้น (โดยใช้กลยุทธ์ "stale-while-revalidate") มอบประสบการณ์การใช้งานแบบออฟไลน์ที่สมบูรณ์ (โดยใช้กลยุทธ์ "Cache only") หรือแม้แต่ใช้กลยุทธ์แบบกลางๆ เช่น UI ที่กําหนดเองซึ่งมีบางส่วนของหน้ามาจากแคช Service Worker และยกเว้นบางส่วน (โดยใช้กลยุทธ์ "Set catch handler") ตามความเหมาะสม

การแคช HTTP

เมื่อเบราว์เซอร์โหลดหน้าเว็บและทรัพยากรที่เกี่ยวข้องเป็นครั้งแรก ระบบจะจัดเก็บทรัพยากรเหล่านี้ไว้ในแคช HTTP เบราว์เซอร์มักจะเปิดใช้แคช HTTP โดยอัตโนมัติ เว้นแต่ว่า ปิดใช้อย่างชัดแจ้งโดยผู้ใช้ปลายทาง

การใช้การแคช HTTP หมายถึงการใช้เซิร์ฟเวอร์ในการพิจารณาว่าจะแคชแหล่งข้อมูลเมื่อใดและอย่างไร ยาว

ควบคุมการหมดอายุของแคช HTTP ด้วยส่วนหัวการตอบกลับ HTTP

เมื่อเซิร์ฟเวอร์ตอบสนองต่อคำขอทรัพยากรจากเบราว์เซอร์ เซิร์ฟเวอร์จะใช้ส่วนหัวการตอบกลับ HTTP เพื่อบอกเบราว์เซอร์ว่าควรแคชทรัพยากรไว้นานเท่าใด โปรดดูส่วนหัวการตอบกลับ: กำหนดค่าเว็บของคุณ เพื่อดูข้อมูลเพิ่มเติม

กลยุทธ์การแคช HTTP และกรณีการใช้งาน

การแคช HTTP นั้นง่ายกว่าการแคช Service Worker มาก เนื่องจากแคช HTTP จะจัดการเฉพาะตรรกะการหมดอายุของทรัพยากรตามเวลา (TTL) โปรดดู คุณควรใช้ค่าส่วนหัวการตอบกลับใด และสรุปเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับกลยุทธ์การแคช HTTP

การออกแบบตรรกะวันหมดอายุของแคช

ส่วนนี้จะอธิบายข้อดีและข้อเสียของการใช้ตรรกะการหมดอายุที่สอดคล้องกันในแคชของ Service Worker และเลเยอร์แคช HTTP รวมถึงข้อดีและข้อเสียของการใช้ตรรกะการหมดอายุแยกกันในเลเยอร์เหล่านี้

Glitch ด้านล่างแสดงวิธีการทำงานของการแคช Service Worker และการแคช HTTP ในสถานการณ์ต่างๆ

ตรรกะการหมดอายุที่สอดคล้องกันสำหรับเลเยอร์แคชทั้งหมด

ในการสาธิตข้อดีและข้อเสีย เราจะดู 3 สถานการณ์ ได้แก่ ระยะยาว ระยะกลาง และ ในระยะสั้น

สถานการณ์: การแคชระยะยาว (แคช กลับไปใช้เครือข่าย)

• เมื่อทรัพยากรที่แคชไว้ถูกต้อง (<= 30 วัน): Service Worker จะแสดงแคช ทรัพยากรได้ทันทีโดยไม่ต้องไปที่เครือข่าย
• เมื่อทรัพยากรที่แคชไว้หมดอายุ (มากกว่า 30 วัน): Service Worker จะไปที่เครือข่ายเพื่อ เพื่อดึงทรัพยากร เบราว์เซอร์ไม่มีสำเนาของแหล่งข้อมูลในแคช HTTP ดังนั้น ไปยังฝั่งเซิร์ฟเวอร์สำหรับทรัพยากร

ข้อเสีย: ในสถานการณ์นี้ การแคช HTTP จะให้ค่าน้อยกว่า เนื่องจากเบราว์เซอร์จะ ส่งคำขอไปยังฝั่งเซิร์ฟเวอร์เมื่อแคชหมดอายุใน Service Worker

สถานการณ์: การแคชระยะกลาง (Stale-while-revalidate)

• เมื่อทรัพยากรที่แคชไว้ถูกต้อง (<= 1 วัน): Service Worker จะแสดงแคช ทรัพยากรโดยทันที และไปที่เครือข่ายเพื่อดึงข้อมูลทรัพยากร เบราว์เซอร์มีสำเนาของ ทรัพยากรในแคช HTTP จึงส่งคืนสำเนานั้นไปยัง Service Worker
• เมื่อทรัพยากรที่แคชไว้หมดอายุ (มากกว่า 1 วัน): Service Worker จะแสดงแคช ทรัพยากรโดยทันที และไปที่เครือข่ายเพื่อดึงข้อมูลทรัพยากร เบราว์เซอร์ไม่มี สำเนาของทรัพยากรในแคช HTTP จึงส่งไปฝั่งเซิร์ฟเวอร์เพื่อดึงข้อมูลทรัพยากรนั้น

ข้อเสีย: โปรแกรมทำงานของบริการต้องการการป้องกันแคชเพิ่มเติมเพื่อลบล้างแคช HTTP ใน เพื่อใช้ประโยชน์จาก "ตรวจสอบความถูกต้องอีกครั้ง" ครั้งแรก

สถานการณ์: การแคชระยะสั้น (เครือข่ายกลับไปใช้แคช)

• เมื่อทรัพยากรที่แคชไว้ใช้งานได้ (<= 10 นาที): บริการเวิร์กเกอร์จะไปที่เครือข่ายเพื่อดึงข้อมูลทรัพยากร เนื่องจากเบราว์เซอร์มีสำเนาของทรัพยากรในแคช HTTP จึงส่งคืนทรัพยากรนั้นไปยัง Service Worker โดยไม่ต้องไปที่ฝั่งเซิร์ฟเวอร์
• เมื่อทรัพยากรที่แคชไว้หมดอายุ (นานกว่า 10 นาที): Service Worker จะแสดงแคช ทรัพยากรโดยทันที และไปที่เครือข่ายเพื่อดึงข้อมูลทรัพยากร เบราว์เซอร์ไม่มี สำเนาของทรัพยากรในแคช HTTP จึงส่งไปฝั่งเซิร์ฟเวอร์เพื่อดึงข้อมูลทรัพยากรนั้น

ข้อเสีย: เช่นเดียวกับสถานการณ์การแคชระยะกลาง โปรแกรมทำงานของบริการต้องการเพิ่มเติม ตรรกะการป้องกันแคชเพื่อลบล้างแคช HTTP เพื่อดึงข้อมูลทรัพยากรล่าสุดจาก ฝั่งเซิร์ฟเวอร์

Service Worker ในทุกสถานการณ์

ในทุกสถานการณ์ แคช Service Worker จะยังคงแสดงทรัพยากรที่แคชไว้ได้เมื่อเครือข่ายไม่เสถียร ในทางกลับกัน แคช HTTP ไม่น่าเชื่อถือเมื่อเครือข่ายไม่เสถียรหรือหยุดทำงาน

ตรรกะวันหมดอายุของแคชที่แตกต่างกันที่แคช Service Worker และเลเยอร์ HTTP

เพื่อแสดงให้เห็นถึงข้อดีและข้อเสีย เราจะดูระยะสั้น ระยะกลาง และระยะสั้นอีกครั้ง สถานการณ์

สถานการณ์: การแคชระยะยาว (แคช กลับไปใช้เครือข่าย)

• เมื่อทรัพยากรที่แคชไว้ใช้งานได้ในแคช Service Worker (<= 90 วัน): Service Worker จะแสดงทรัพยากรที่แคชไว้ทันที
• เมื่อทรัพยากรที่แคชไว้หมดอายุในแคชของ Service Worker (> 90 วัน): Service Worker จะไปที่เครือข่ายเพื่อดึงข้อมูลทรัพยากร เบราว์เซอร์ไม่มีสำเนาของทรัพยากรในแคช HTTP จึงต้องส่งคำขอไปยังฝั่งเซิร์ฟเวอร์

ข้อดีและข้อเสีย

• ข้อดี: ผู้ใช้จะได้รับการตอบสนองทันทีเมื่อโปรแกรมทำงานของบริการส่งคืนทรัพยากรที่แคชไว้ ทันที
• ข้อดี: ผู้ให้บริการสามารถควบคุมได้ละเอียดยิ่งขึ้นว่าจะให้ใช้แคชเมื่อใดและขอทรัพยากรเวอร์ชันใหม่เมื่อใด
• ข้อเสีย: ต้องมีกลยุทธ์การแคชโปรแกรมทำงานของบริการที่กำหนดไว้อย่างชัดเจน

สถานการณ์: การแคชช่วงกลางภาค (ไม่มีอัปเดตขณะตรวจสอบความถูกต้องอีกครั้ง)

• เมื่อทรัพยากรที่แคชไว้ในแคชของ Service Worker ถูกต้อง (<= 30 วัน): บริการ ส่งคืนทรัพยากรที่แคชไว้ทันที
• เมื่อทรัพยากรที่แคชไว้หมดอายุในแคชของ Service Worker (> 30 วัน): Service Worker จะไปที่เครือข่ายเพื่อขอทรัพยากร เบราว์เซอร์ไม่มีสำเนาของแหล่งข้อมูลใน แคช HTTP จึงทำงานที่ฝั่งเซิร์ฟเวอร์

ข้อดีและข้อเสีย

• ข้อดี: ผู้ใช้จะได้รับการตอบสนองทันทีเมื่อโปรแกรมทำงานของบริการส่งคืนทรัพยากรที่แคชไว้ ทันที
• ข้อดี: บริการเวิร์กเกอร์ช่วยให้มั่นใจได้ว่าคำขอ ถัดไปสำหรับ URL หนึ่งๆ จะใช้การตอบกลับใหม่จากเครือข่ายได้ เนื่องจากการตรวจสอบอีกครั้งที่เกิดขึ้น "ในเบื้องหลัง"
• ข้อเสีย: ต้องมีกลยุทธ์การแคชโปรแกรมทำงานของบริการที่กำหนดไว้อย่างชัดเจน

สถานการณ์: การแคชระยะสั้น (เครือข่ายกลับไปใช้แคช)

• เมื่อทรัพยากรที่แคชไว้ในแคชของ Service Worker ถูกต้อง (<= 1 วัน): บริการ ไปที่เครือข่ายสำหรับทรัพยากร เบราว์เซอร์ส่งคืนทรัพยากรจาก HTTP หากมี หากเครือข่ายไม่ทํางาน Service Worker จะแสดงทรัพยากรจากแคช Service Worker
• เมื่อทรัพยากรที่แคชไว้หมดอายุในแคชของ Service Worker (> 1 วัน): Service Worker จะไปที่เครือข่ายเพื่อดึงข้อมูลทรัพยากร เบราว์เซอร์จะดึงข้อมูลทรัพยากรผ่านเครือข่ายเนื่องจากเวอร์ชันที่แคชไว้ในแคช HTTP หมดอายุแล้ว

ข้อดีและข้อเสีย

• ข้อดี: เมื่อเครือข่ายไม่เสถียรหรือไม่ทำงาน โปรแกรมทำงานของบริการจะแสดงผลแคช ทรัพยากรได้ทันที
• ข้อเสีย: โปรแกรมทำงานของบริการต้องการการป้องกันแคชเพิ่มเติมเพื่อลบล้างแคช HTTP และ สร้าง "เครือข่ายเป็นอันดับแรก" คำขอ

บทสรุป

ด้วยความซับซ้อนของชุดค่าผสมของสถานการณ์การแคช จึงไม่สามารถออกแบบกฎเดียวที่ครอบคลุมทุกกรณีได้ อย่างไรก็ตาม จากข้อมูลที่ค้นพบในส่วนก่อนหน้านี้ มี คำแนะนำที่ควรพิจารณาเมื่อออกแบบกลยุทธ์แคชของคุณ:

• ตรรกะการแคชของ Service Worker ไม่จำเป็นต้องสอดคล้องกับการหมดอายุการแคช HTTP หากเป็นไปได้ ให้ใช้ตรรกะการหมดอายุที่นานขึ้นใน Service Worker เพื่อให้สิทธิ์โปรแกรมทำงาน ควบคุมได้มากขึ้น
• การแคช HTTP ยังคงมีบทบาทสำคัญ แต่ไม่น่าเชื่อถือเมื่อเครือข่ายไม่เสถียรหรือหยุดทำงาน
• กลับไปดูกลยุทธ์การแคชสำหรับทรัพยากรแต่ละรายการเพื่อให้แน่ใจว่าการแคชโปรแกรมทำงานของบริการ จะให้ค่าโดยไม่ขัดแย้งกับแคช HTTP

ดูข้อมูลเพิ่มเติม

• ความน่าเชื่อถือของเครือข่าย
• ป้องกันคำขอเครือข่ายที่ไม่จำเป็นด้วยแคช HTTP
• Codelab แคช HTTP
• การวัดผลกระทบต่อประสิทธิภาพจริงของ Service Worker
• การควบคุมแคชและวันหมดอายุ
• ถอดรหัสการแคช: ตรวจสอบ ล้าง และปิดใช้แคช