HTML Academy · บทเรียน

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

ลงทะเบียน service worker ด้วยแท็กสคริปต์และ API ของ navigator

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

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

เซอร์วิสเวิร์กเกอร์คือไฟล์ JavaScript ที่ทำงานอยู่เบื้องหลัง แยกจากหน้าเว็บใด ๆ และดักจับคำขอเครือข่ายสำหรับขอบเขตของตนเอง เซอร์วิสเวิร์กเกอร์รองรับการทำงานแบบออฟไลน์ การแจ้งเตือนแบบพุช การซิงค์เบื้องหลัง และการโหลดซ้ำที่เร็วขึ้นผ่านการแคช

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

ลงทะเบียนเซอร์วิสเวิร์กเกอร์จากสคริปต์ของหน้าเว็บ: navigator.serviceWorker.register("/sw.js") เบราว์เซอร์จะดึง /sw.js มาแยกวิเคราะห์ เรียกใช้เหตุการณ์ติดตั้ง และเริ่มดักจับคำขอตามขอบเขตของการลงทะเบียน

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js")
    .then((reg) => console.log("Registered, scope:", reg.scope))
    .catch((err) => console.error("Registration failed:", err));
}

ตรวจสอบการรองรับความสามารถก่อน

เบราว์เซอร์รุ่นเก่าไม่รองรับเซอร์วิสเวิร์กเกอร์ ให้ตรวจสอบการรองรับด้วย "serviceWorker" in navigator ก่อนเรียกใช้ register เสมอ มิฉะนั้นการเรียกใช้จะทำให้เกิดข้อผิดพลาดบนเบราว์เซอร์ที่ไม่มีส่วนเชื่อมต่อนี้ การเติมความเข้ากันได้ไม่ใช่ทางเลือกที่ใช้ได้ เพราะเซอร์วิสเวิร์กเกอร์ไม่สามารถเติมความเข้ากันได้ด้วยโค้ดได้ เนื่องจากต้องทำงานร่วมกับเบราว์เซอร์ในระดับระบบ

ขอบเขต

ขอบเขตคือคำนำหน้าของเส้นทางที่เซอร์วิสเวิร์กเกอร์ควบคุม โดยค่าเริ่มต้น ขอบเขตคือไดเรกทอรีของไฟล์เซอร์วิสเวิร์กเกอร์: /sw.js จะควบคุม URL ทั้งหมดภายใต้ / หากต้องการลงทะเบียนเซอร์วิสเวิร์กเกอร์ที่มีขอบเขตลึกกว่าจากตำแหน่งไฟล์อื่น ให้กำหนดตัวเลือกขอบเขต AND ให้บริการส่วนหัวที่อนุญาตให้เซอร์วิสเวิร์กเกอร์ควบคุมขอบเขตนั้น

ควรวาง sw.js ไว้ที่ใด

วาง sw.js ไว้ที่รากของแอปพลิเคชัน (/sw.js) เพื่อให้ขอบเขตเริ่มต้นครอบคลุมทั้งเว็บไซต์ เส้นทางที่ลึกกว่า (/app/sw.js) จะจำกัดขอบเขตไว้ที่ /app/ และเส้นทางภายใต้เส้นทางนี้ ซึ่งไม่ค่อยใช่สิ่งที่ต้องการ

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

ลงทะเบียนเซอร์วิสเวิร์กเกอร์หลังจากหน้าเว็บโหลดแล้ว เพื่อหลีกเลี่ยงการแย่งแบนด์วิดท์ระหว่างการแสดงผลที่สำคัญ: window.addEventListener("load", () => navigator.serviceWorker.register("/sw.js")) ฟีเจอร์ของ PWA จะเริ่มทำงานในการเข้าชมครั้งถัดไปโดยไม่ทำให้การเข้าชมครั้งแรกล่าช้า

การอัปเดต

เบราว์เซอร์จะตรวจสอบ sw.js ที่อัปเดตโดยอัตโนมัติ โดยทั่วไปทุก 24 ชั่วโมงและเมื่อโหลดหน้าเว็บส่วนใหญ่ หากเนื้อหาไฟล์เปลี่ยนแปลง เซอร์วิสเวิร์กเกอร์ตัวใหม่จะถูกดาวน์โหลด ติดตั้ง และรออยู่ในสถานะ "กำลังรอ" จนกว่าแท็บที่มีอยู่ทั้งหมดจะปิดลง จากนั้นจึงเปิดใช้งาน

บังคับการอัปเดต

registration.update() จะเรียกใช้การตรวจสอบการอัปเดตด้วยตนเอง self.skipWaiting() ภายใน sw.js ตัวใหม่จะเปิดใช้งานทันทีโดยไม่ต้องรอให้แท็บปิดลง ใช้ทั้งสองอย่างร่วมกันเพื่อให้เซอร์วิสเวิร์กเกอร์เวอร์ชันล่าสุดทำงานอยู่เสมอ โดยต้องแลกกับการดึงข้อมูลใหม่ระหว่างเซสชัน

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

registration.unregister() จะนำเซอร์วิสเวิร์กเกอร์ออก มีประโยชน์ระหว่างการพัฒนา หากเซอร์วิสเวิร์กเกอร์ที่มีข้อบกพร่องทำให้เว็บไซต์ทำงานผิดพลาด ใน Chrome DevTools ส่วนแอปพลิเคชัน → เซอร์วิสเวิร์กเกอร์มีปุ่ม "ยกเลิกการลงทะเบียน" สำหรับจุดประสงค์เดียวกันระหว่างการแก้ไขข้อบกพร่อง

ข้อผิดพลาดที่พบบ่อย

การลงทะเบียนเซอร์วิสเวิร์กเกอร์ผ่าน HTTP โดยไม่มี HTTPS จะล้มเหลวโดยไม่แสดงข้อความ เพราะเซอร์วิสเวิร์กเกอร์ต้องใช้แหล่งกำเนิดที่ปลอดภัย (HTTPS หรือ localhost สำหรับการพัฒนา) ตรวจสอบคอนโซลเพื่อดูข้อความ "เกิดข้อผิดพลาดเกี่ยวกับใบรับรอง SSL" หากการลงทะเบียนไม่มีผล

ประสานการทำงานของตัวทำงานกับหน้าเว็บ

เซอร์วิสเวิร์กเกอร์ไม่มีสิทธิ์เข้าถึง DOM หากต้องการส่งข้อความ ให้ใช้ navigator.serviceWorker.controller.postMessage() จากหน้าเว็บ และใช้ self.addEventListener("message", handler) ในเซอร์วิสเวิร์กเกอร์ (และทำย้อนกลับกันได้) เหมาะสำหรับการทำให้แคชไม่ถูกต้อง การตรวจสอบเวอร์ชัน และเหตุการณ์แบบกำหนดเอง

การเข้าชมครั้งแรกเทียบกับการเข้าชมซ้ำ

ในการเข้าชมครั้งแรก เซอร์วิสเวิร์กเกอร์จะติดตั้งและเริ่มควบคุมหน้าเว็บหลังจากโหลดหน้าเว็บใหม่เท่านั้น หากต้องการควบคุมการนำทางครั้งแรกทันที ให้เรียกใช้ self.clients.claim() ในเหตุการณ์เปิดใช้งาน ซึ่งมีประโยชน์สำหรับแอปที่ให้ทำงานแบบออฟไลน์เป็นหลัก

ตรวจสอบความรู้

เหตุใดเซอร์วิสเวิร์กเกอร์จึงต้องให้บริการผ่าน HTTPS (หรือ localhost)

สรุป

ลงทะเบียนเซอร์วิสเวิร์กเกอร์จาก JS ของหน้าเว็บด้วย navigator.serviceWorker.register("/sw.js") หลังจากตรวจสอบการรองรับความสามารถแล้ว วาง sw.js ไว้ที่รากของแอปพลิเคชันเพื่อให้มีขอบเขตครอบคลุมทั้งหมด ลงทะเบียนเมื่อโหลดเสร็จเพื่อหลีกเลี่ยงการแย่งทรัพยากรกับการแสดงผลที่สำคัญ เบราว์เซอร์จะตรวจสอบการอัปเดตเป็นระยะ และสามารถบังคับได้ด้วย registration.update หรือ skipWaiting ต้องใช้ HTTPS เพื่อป้องกันการแทรกเซอร์วิสเวิร์กเกอร์ที่เป็นอันตราย

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

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

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

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

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

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

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

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

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

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

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

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

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