การลงทะเบียนและวงจรชีวิตของ Service Worker
ลงทะเบียนสคริปต์ Service Worker ทำความเข้าใจเหตุการณ์ในวงจรชีวิต install, activate และ fetch และใช้ skipWaiting กับ clients.claim
การลงทะเบียนและวงจรชีวิตของ Service Worker เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
Service Worker คืออะไร
Service Worker คือไฟล์ JavaScript ที่ทำงานในเวิร์กเกอร์ของเบราว์เซอร์แยกต่างหาก ไม่ใช่เธรดหลัก และดักจับคำขอเครือข่ายสำหรับต้นทางของคุณ นี่คือกลไกเบื้องหลัง PWA แบบออฟไลน์ การแจ้งเตือนแบบพุช และการซิงค์เบื้องหลัง
การลงทะเบียน Service Worker
ลงทะเบียนจากสคริปต์หลักของคุณ Service worker ต้องใช้ HTTPS ยกเว้นบน localhost
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js', { scope: '/' })
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW registration failed:', err));
});
}ขอบเขต
Service worker จะควบคุมคำขอภายในขอบเขตของตนเอง ซึ่งก็คือไดเรกทอรีที่ใช้ให้บริการไฟล์นั้น /sw.js ที่รากจะควบคุมทุกอย่าง ส่วน SW ที่ /app/sw.js จะควบคุมเฉพาะ /app/*
วงจรการทำงาน: ติดตั้ง → เปิดใช้งาน → ดึงข้อมูล
เหตุการณ์หลักสามอย่างคือ install (เกิดครั้งเดียว ใช้ตั้งค่าแคช), activate (เกิดครั้งเดียว ใช้ล้างแคชเก่า) และ fetch (เกิดกับทุกคำขอ ใช้ตัดสินใจว่าจะใช้แคชหรือเครือข่าย)
// sw.js
self.addEventListener('install', (event) => {
console.log('SW installing');
event.waitUntil(
caches.open('v1').then(cache =>
cache.addAll(['/', '/index.html', '/styles.css', '/app.js'])
)
);
});
self.addEventListener('activate', (event) => {
console.log('SW active');
event.waitUntil(
caches.keys().then(keys =>
Promise.all(keys.filter(k => k !== 'v1').map(k => caches.delete(k)))
)
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(res => res || fetch(event.request))
);
});skipWaiting()
ตามค่าเริ่มต้น SW ที่อัปเดตแล้วจะรอให้แท็บทั้งหมดปิดก่อนจึงเปิดใช้งาน self.skipWaiting() ในตัวจัดการการติดตั้งจะบังคับให้เปิดใช้งานทันที ทำให้อัปเดตเร็วขึ้น แต่มีความเสี่ยงที่ทรัพยากรเก่าและใหม่จะถูกใช้ปะปนกัน
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate immediately on next reload
// ... cache setup
});clients.claim()
หลังเปิดใช้งาน SW ใหม่จะยังไม่ควบคุมหน้าที่โหลดไว้ก่อนหน้า self.clients.claim() ในตัวจัดการการเปิดใช้งานจะเข้าควบคุมทันที
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});การอัปเดต Service Worker
เบราว์เซอร์จะตรวจสอบ sw.js ใหม่ทุกครั้งที่มีการนำทาง โดยมีอายุสูงสุด 24 ชั่วโมง หากเนื้อหาไฟล์เปลี่ยนแปลงแม้แต่ไบต์เดียว จะติดตั้งเป็น SW ใหม่และรอเปิดใช้งาน ให้โหลดใหม่เพื่อเรียกใช้การเปิดใช้งาน
ตรวจจับการอัปเดตจากแอป
ฟังเหตุการณ์ updatefound เพื่อแสดงข้อความแจ้งการอัปเดต
navigator.serviceWorker.register('/sw.js').then(reg => {
reg.addEventListener('updatefound', () => {
const newSW = reg.installing;
newSW.addEventListener('statechange', () => {
if (newSW.state === 'installed' && navigator.serviceWorker.controller) {
// New version ready
showUpdateBanner(() => {
newSW.postMessage('SKIP_WAITING');
window.location.reload();
});
}
});
});
});การยกเลิกการลงทะเบียน
หากต้องการหยุด service worker ที่ทำงานผิดปกติ เช่น เกิดปัญหาระหว่างการพัฒนา ให้ยกเลิกการลงทะเบียน
navigator.serviceWorker.getRegistrations().then(regs => {
for (const reg of regs) reg.unregister();
});DevTools ของเบราว์เซอร์
Chrome DevTools → Application → Service Workers จะแสดง SW ที่ลงทะเบียนไว้ และให้คุณยกเลิกการลงทะเบียน จำลองการอัปเดตเมื่อโหลดใหม่ และตรวจสอบเหตุการณ์ต่าง ๆ ในวงจรการทำงานทีละขั้นได้
ข้อผิดพลาดที่พบบ่อย
1) ไฟล์ SW ต้องอยู่ที่ขอบเขตรากหรือสูงกว่า 2) ต้องใช้ HTTPS 3) การเปลี่ยนแปลง SW ต้องโหลดใหม่แบบล้างแคชระหว่างการพัฒนา 4) เก็บแคชครั้งเดียวแล้วอัปเดตด้วยการกำหนดเวอร์ชัน อย่าปล่อยให้แคชเพิ่มขึ้นไม่สิ้นสุด 5) อย่าเก็บคำขอ POST ในแคช เนื่องจากไม่รองรับ
Workbox — ไลบรารีเพิ่มประสิทธิภาพการทำงาน
Workbox ของ Google ช่วยจัดการวงจรการทำงานและมีกลยุทธ์การเก็บแคชสำเร็จรูปให้ใช้ PWA ที่ใช้งานจริงส่วนใหญ่เลือกใช้ Workbox แทนการเขียนโค้ด SW เองทั้งหมด
ตรวจสอบอย่างรวดเร็ว
self.skipWaiting() ภายในตัวจัดการ install ของ service worker ทำอะไร
สรุป: วงจรการทำงานของ Service Worker
เวิร์กเกอร์ JavaScript ที่ดักจับคำขอเครือข่ายสำหรับต้นทางของคุณ ลงทะเบียนผ่าน navigator.serviceWorker.register วงจรการทำงานประกอบด้วยการติดตั้ง (ตั้งค่าแคช) การเปิดใช้งาน (ล้างข้อมูล) และการดึงข้อมูล (ดักจับคำขอ) ใช้ skipWaiting และ clients.claim เพื่ออัปเดตทันที ฟังเหตุการณ์ updatefound เพื่อแจ้งผู้ใช้ Workbox ช่วยจัดการโค้ดพื้นฐานที่ซ้ำซ้อน ต้องใช้ HTTPS ยกเว้น localhost
คำถามที่พบบ่อย
บทเรียน “การลงทะเบียนและวงจรชีวิตของ Service Worker” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การลงทะเบียนและวงจรชีวิตของ Service Worker” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การลงทะเบียนและวงจรชีวิตของ Service Worker”
ลงทะเบียนสคริปต์ Service Worker ทำความเข้าใจเหตุการณ์ในวงจรชีวิต install, activate และ fetch และใช้ skipWaiting กับ clients.claim คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การลงทะเบียนและวงจรชีวิตของ Service Worker” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เว็บแอปแม니เฟสต์
- การลงทะเบียนและวงจรชีวิตของ Service Worker
- กลยุทธ์การแคชออฟไลน์: CacheFirst และ NetworkFirst
- การแจ้งเตือนแบบพุช