Service Workers: ภาพรวม
service worker คืออะไร?
หัวข้อที่มีชื่อว่า “service worker คืออะไร?”service worker คือไฟล์ JavaScript ที่ทำงานอยู่เบื้องหลัง — แยกออกจากหน้าเว็บของคุณ — ในเธรดของ worker ของตัวเอง เพราะอยู่นอกหน้าเว็บ service worker จึงเข้าถึง DOM, document หรือ window ไม่ได้ แต่สิ่งที่_ทำได้_คือดักจับและตอบสนองต่อทุก network request ที่หน้าเว็บของคุณส่งออกไป
ลองคิดว่า service worker เป็น programmable network proxy ที่นั่งอยู่ระหว่างหน้าเว็บของคุณกับอินเทอร์เน็ต คุณเป็นคนตัดสินใจว่าจะเกิดอะไรขึ้นกับแต่ละ request: ส่งต่อไปยัง network ตรง ๆ, เสิร์ฟจาก cache ในเครื่อง หรือสร้าง response ขึ้นมาเองทั้งหมดตั้งแต่ต้น
ความสามารถนี้คือรากฐานของทุกฟีเจอร์ offline-first ของ PWA ที่คุณจะได้สร้างในคอร์สนี้:
| ความสามารถ | service worker ทำให้เกิดขึ้นได้อย่างไร |
|---|---|
| รองรับการใช้งานออฟไลน์ | ดักจับ request แล้วเสิร์ฟจาก cache |
| Push notifications | รับ push event ได้แม้ขณะที่หน้าเว็บปิดอยู่ |
| Background sync | เก็บ request ที่ล้มเหลวเข้าคิวแล้วลองใหม่เมื่อกลับมาออนไลน์ |
| โหลดทันที | เสิร์ฟ asset ที่ pre-cache ไว้โดยไม่ต้องวิ่งไป-กลับ network |
flowchart LR
P["Page / App"] -->|"fetch()"| SW["Service Worker"]
SW -->|"cache hit"| C[("Cache Storage")]
SW -->|"cache miss"| N["Network"]
N -->|response| SW
C -->|response| SW
SW -->|response| P โมดูลนี้ครอบคลุมเรื่องอะไรบ้าง
หัวข้อที่มีชื่อว่า “โมดูลนี้ครอบคลุมเรื่องอะไรบ้าง”โมดูลนี้จะพาคุณจากศูนย์ไปสู่ความมั่นใจในเรื่อง service worker ผ่านบทเรียน 5 บท:
- ภาพรวม (หน้านี้) — service worker คืออะไร และโต้ตอบกับหน้าเว็บอย่างไร
- การ register service worker — หน้าเว็บโหลดและ activate service worker ได้อย่างไร
- Lifecycle — state machine install → waiting → activate → active ที่ทุก SW ต้องผ่าน
- fetch event — การดักจับ request และตัดสินใจว่าจะตอบสนองอย่างไร
- การอัปเดต service worker — browser ตรวจจับการเปลี่ยนแปลงได้อย่างไร และจะ push อัปเดตอย่างปลอดภัยได้อย่างไร
แต่ละบทเรียนเป็นอิสระต่อกัน: กลับมาที่บทไหนก็ได้เมื่อไหร่ก็ได้