กลยุทธ์ Service Worker
แคชก่อน เครือข่ายก่อน stale-while-revalidate และการเลือกใช้ตามชนิดทรัพยากร
กลยุทธ์ Service Worker เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
ภาพรวมกลยุทธ์การแคช
service worker จะดักจับคำขอเครือข่ายและตัดสินใจว่าจะให้บริการจากแคช จากเครือข่าย หรือจากทั้งสองแหล่ง Workbox มีกลยุทธ์หลักสี่แบบ โดยแต่ละแบบเหมาะกับทรัพยากรคนละประเภท
CacheFirst
CacheFirst จะให้บริการจากแคช และเรียกเครือข่ายเฉพาะเมื่อไม่พบข้อมูลในแคช เหมาะที่สุดสำหรับทรัพยากรที่เปลี่ยนแปลงไม่บ่อยและมีแฮชในเนื้อหา เช่น แบบอักษรและรูปภาพ
// serve cached, fall back to network on missNetworkFirst
NetworkFirst จะลองเรียกเครือข่ายก่อน และใช้แคชเป็นทางเลือกสำรองเมื่อออฟไลน์หรือหมดเวลา เหมาะที่สุดสำหรับการตอบกลับจาก API ที่ต้องการข้อมูลใหม่ แต่ก็ต้องการให้เข้าถึงได้แบบออฟไลน์
// try network, fall back to cache when offlineStaleWhileRevalidate
StaleWhileRevalidate จะส่งสำเนาที่อยู่ในแคชกลับทันทีเพื่อความเร็ว พร้อมดึงสำเนาใหม่ในเบื้องหลังเพื่ออัปเดตแคช เหมาะอย่างยิ่งสำหรับบันเดิล JS และ CSS
// return cache now, update cache in backgroundNetworkOnly และ CacheOnly
สองแนวทางสุดขั้วคือ NetworkOnly จะดึงข้อมูลจากเครือข่ายเสมอโดยไม่แคช ส่วน CacheOnly จะให้บริการเฉพาะเนื้อหาที่แคชไว้ล่วงหน้าเท่านั้น ใช้สองแบบนี้กับคำขอ POST ที่แคชไม่ได้ หรือทรัพยากรที่ต้องแคชไว้ล่วงหน้าอย่างเคร่งครัด
อาร์เรย์ runtimeCaching
ในการกำหนดค่า Workbox runtimeCaching คืออาร์เรย์ของกฎ แต่ละกฎจะจับคู่ URL ของคำขอ และกำหนดกลยุทธ์กับชื่อแคช
VitePWA({
workbox: {
runtimeCaching: [ /* rules */ ]
}
});กฎ urlPattern
แต่ละกฎมี urlPattern (นิพจน์ทั่วไปหรือฟังก์ชัน) มี handler (ชื่อกลยุทธ์) และมี options เช่น ชื่อแคช
{
urlPattern: /\/api\//,
handler: "NetworkFirst",
options: { cacheName: "api-cache" }
}แคชทรัพยากรคงที่ด้วย CacheFirst
จับคู่รูปภาพและแบบอักษร แล้วให้บริการด้วย CacheFirst เนื่องจาก URL ที่มีแฮชในเนื้อหาจะเปลี่ยนเมื่อไฟล์เปลี่ยนแปลง
{
urlPattern: /\.(?:png|jpg|svg|woff2)$/,
handler: "CacheFirst",
options: { cacheName: "static-assets" }
}แคชบันเดิล JS ด้วย StaleWhileRevalidate
ให้บริการบันเดิลสคริปต์และสไตล์จากแคชทันที พร้อมรีเฟรชข้อมูลในเบื้องหลัง
{
urlPattern: /\.(?:js|css)$/,
handler: "StaleWhileRevalidate",
options: { cacheName: "assets" }
}ปลั๊กอินการหมดอายุ
แคชจะเพิ่มขึ้นไม่สิ้นสุดหากไม่มีการจำกัด ตัวเลือก expiration จะจำกัดจำนวนรายการและอายุสูงสุดของรายการ พร้อมนำรายการที่เก่าที่สุดออกก่อน
options: {
cacheName: "api-cache",
expiration: {
maxEntries: 50,
maxAgeSeconds: 60 * 60 * 24
}
}แคชการตอบกลับแบบทึบแสง
สำหรับการตอบกลับจาก API ข้ามต้นทาง โดยทั่วไปคุณจะเพิ่ม cacheableResponse พร้อมสถานะที่อนุญาต เพื่อจัดเก็บเฉพาะการตอบกลับที่สำเร็จ
options: {
cacheableResponse: { statuses: [0, 200] }
}ตรวจสอบอย่างรวดเร็ว
กลยุทธ์ใดเหมาะที่สุดสำหรับการตอบกลับจาก API ที่ควรเป็นข้อมูลใหม่ แต่ยังเข้าถึงได้แบบออฟไลน์
สรุปทบทวน
กลยุทธ์ของ Workbox สอดคล้องกับประเภททรัพยากรดังนี้ CacheFirst สำหรับทรัพยากรคงที่ NetworkFirst สำหรับการตอบกลับจาก API และ StaleWhileRevalidate สำหรับบันเดิล JS/CSS กำหนดกลยุทธ์เหล่านี้ในอาร์เรย์ runtimeCaching โดยใช้ urlPattern, handler และ options เช่น ปลั๊กอิน expiration เพื่อจำกัดขนาดแคช
คำถามที่พบบ่อย
บทเรียน “กลยุทธ์ Service Worker” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “กลยุทธ์ Service Worker” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “กลยุทธ์ Service Worker”
แคชก่อน เครือข่ายก่อน stale-while-revalidate และการเลือกใช้ตามชนิดทรัพยากร คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “กลยุทธ์ Service Worker” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตั้งค่า vite-plugin-pwa
- กลยุทธ์ Service Worker
- การรองรับออฟไลน์และการซิงค์เบื้องหลัง
- การแจ้งเตือนแบบพุชใน Vue PWA