JavaScript Academy · บทเรียน

การลงทะเบียน Service Worker

ติดตั้งและเปิดใช้งาน service worker

การลงทะเบียน Service Worker เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

เซอร์วิสเวิร์กเกอร์คืออะไร

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

การตรวจสอบความสามารถ

ไม่ใช่ทุกสภาพแวดล้อมที่รองรับเซอร์วิสเวิร์กเกอร์ ให้ตรวจสอบ navigator.serviceWorker ก่อนลงทะเบียน เพื่อให้เบราว์เซอร์รุ่นเก่าสามารถทำงานต่อได้อย่างเหมาะสม

if ('serviceWorker' in navigator) {
  // safe to register
}

การลงทะเบียน

ลงทะเบียนเซอร์วิสเวิร์กเกอร์โดยส่ง URL ของสคริปต์ให้กับ navigator.serviceWorker.register เมธอดนี้ส่งคืนพรอมิสที่เสร็จสมบูรณ์เป็นวัตถุการลงทะเบียน

navigator.serviceWorker.register('/sw.js')
  .then(reg => console.log('registered, scope:', reg.scope))
  .catch(err => console.log('registration failed:', err));

ขอบเขตการลงทะเบียน

ขอบเขต คือชุด URL ที่เวิร์กเกอร์ควบคุม โดยค่าเริ่มต้นคือไดเรกทอรีที่สคริปต์อยู่ เวิร์กเกอร์ที่ /sw.js จะควบคุมทั้งเว็บไซต์ ส่วนเวิร์กเกอร์ที่ /app/sw.js จะควบคุมเฉพาะ /app/

navigator.serviceWorker.register('/app/sw.js');
// Controls pages under /app/ only.

การกำหนดขอบเขตอย่างชัดเจน

คุณสามารถจำกัดขอบเขตให้แคบลงด้วยตัวเลือก แต่ไม่สามารถขยายให้กว้างเกินไดเรกทอรีของสคริปต์ได้ เว้นแต่เซิร์ฟเวอร์จะกำหนดส่วนหัวพิเศษ

navigator.serviceWorker.register('/sw.js', {
  scope: '/dashboard/'
});

ข้อกำหนด HTTPS

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

เหตุการณ์ติดตั้ง

ครั้งแรกที่เวิร์กเกอร์ลงทะเบียน ระบบจะเรียกใช้เหตุการณ์ install ซึ่งเป็นจุดที่มักใช้จัดเก็บทรัพยากรสำคัญไว้ใน cache ล่วงหน้า เพื่อให้แอปทำงานออฟไลน์ได้

// sw.js
self.addEventListener('install', (event) => {
  console.log('service worker installing');
});

เหตุการณ์เปิดใช้งาน

หลังจากติดตั้ง เวิร์กเกอร์จะเรียกใช้ activate ซึ่งเป็นจุดสำหรับล้าง cache เก่าจากรุ่นก่อนหน้า ก่อนเริ่มควบคุมหน้าเว็บ

// sw.js
self.addEventListener('activate', (event) => {
  console.log('service worker activated');
});

วงจรการทำงาน

เซอร์วิสเวิร์กเกอร์จะเปลี่ยนผ่านสถานะต่าง ๆ ดังนี้:

กำลังติดตั้ง — กำลังเรียกใช้ตัวจัดการการติดตั้ง
ติดตั้งแล้ว/กำลังรอ — พร้อมใช้งานและกำลังรอเข้าควบคุม
กำลังเปิดใช้งาน / เปิดใช้งานแล้ว — กำลังควบคุมหน้าเว็บอยู่

โดยค่าเริ่มต้น เวิร์กเกอร์ใหม่จะรอจนกว่าหน้าเว็บเก่าจะปิดก่อนจึงเปิดใช้งาน

การดักจับคำขอ

เมื่อทำงานแล้ว เวิร์กเกอร์จะรับฟังคำขอเครือข่ายทุกคำขอจากขอบเขตของตนผ่านเหตุการณ์ fetch คุณสามารถตอบกลับจาก cache จากเครือข่าย หรือผสมผสานทั้งสองแบบได้

// sw.js
self.addEventListener('fetch', (event) => {
  // event.request describes the outgoing request
  console.log('intercepted', event.request.url);
});

ทบทวนการลงทะเบียน

การลงทะเบียนเซอร์วิสเวิร์กเกอร์ประกอบด้วยการตรวจสอบความสามารถ เรียก register พร้อม URL ของสคริปต์ ใส่ใจข้อกำหนดด้านขอบเขตและ HTTPS และจัดการเหตุการณ์ install, activate และ fetch ภายในสคริปต์ของเวิร์กเกอร์

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจเกี่ยวกับการลงทะเบียนเซอร์วิสเวิร์กเกอร์

ทบทวน

คุณได้เรียนรู้วิธีลงทะเบียนเซอร์วิสเวิร์กเกอร์แล้ว:

ตรวจสอบความสามารถด้วย 'serviceWorker' in navigator
register(url, { scope }) ส่งคืนพรอมิส
ขอบเขตจะเป็นไดเรกทอรีของสคริปต์โดยค่าเริ่มต้น และต้องใช้ HTTPS
จัดการ install, activate และ fetch ในเวิร์กเกอร์

ถัดไปคือ API สำหรับจัดการ cache

คำถามที่พบบ่อย

บทเรียน “การลงทะเบียน Service Worker” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การลงทะเบียน Service Worker” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การลงทะเบียน Service Worker”

ติดตั้งและเปิดใช้งาน service worker คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การลงทะเบียน Service Worker” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy