Service worker คืออะไร
Service worker คือ Script ตัวนึง ที่เขียนด้วย Javascript ทำงานอยู่บน Browser นั่นเอง… แต่มันไม่ได้ทำงาน foreground นะครับ มันทำงานอยู่เบื้องหลัง หรือ background โดยการทำงานจะแยกออกจาก web pages หรือ user interaction
เอาให้ง่ายก็คือ มันทำงานข้างหลัง browser ทำให้ user ไม่ได้รู้สึกอะไร ซึ่งมันจะเข้ามาช่วยทำให้ Website ของคุณมีความสามารถเพิ่มขึ้นไปอีก
คำบอกกล่าว: ผู้อ่านบทความนี้ควรรู้จัก DOM, JS, NodeJs and Promise มาบ้าง
ปัจจุบันนี้เราจะได้เห็น Service worker จากการทำพวก feature Offline mode กล่าวคือใช้งานเว็บไซต์ได้ แม้จะไม่ได้ต่อ Internet, Push notification และ background sync ซึ่งในอนาคตเราอาจจะได้เห็น feature อื่น ๆ อีก ในบทความนี้ จะพูดถึง ความสามารถในการ handle requests การจัดการ cache of responses การทำงาน background sync และ push event.
About Service worker
- มันไม่สามารถต่อกับ DOM โดยตรงได้ แต่ว่า Service worker สามารถติดต่อกับ pages เพื่อที่จะ control response message ผ่านทาง interface postMessage ได้
- Service worker เป็น program network proxy ช่วยให้คุณ control request network จากหน้า pages ได้
- มันสามารถปิดตัวเองได้เมื่อไม่มีการใช้งาน และ สามารถ restart เองได้เมื่อต้องการ
- อย่างสุดท้าย มันใช้ Promise (ควรรู้ promise)
The service worker life cycle
Service worker มี life cycle ที่แยกออกจาก web pages โดยสิ้นเชิง
การติดตั้ง Service worker สำหรับ website ของเรา เราจำเป็นต้อง register ก่อน.. การ Registering Service worker จะทำให้ Browser เริ่มการ Install Service worker ใน background
ในขั้นตอนการ Install เมื่อคุณต้องการ cache static file อะไรก็ได้ เช่น รูปภาพ หรือ static page ซึ่งนอกจากมันจะเก็บพวก static ได้แล้ว มันยังเก็บพวก API ได้อีกด้วย… เมื่อทุก ๆ file cache สมบูรณ ก็แปลว่า Service worker ทำการ install เรียบร้อยแล้ว แต่ถ้าหาก download หรือ cache ไม่สำเร็จ ก็เท่ากับว่า ขั้นตอนการ Install service worker ล้มเหลวไปด้วย แต่กรณีตรงนี้ก็ไม่ต้องเป็นห่วงมากครับ เมื่อทำการ download หรือ cache ใหม่สำเร็จ Service worker ก็จะสำเร็จไปด้วย
เมื่อ Install เสร็จ ก็จะมาถึงส่วน Activation step ในส่วนนี้ จะเป็นส่วนที่ service worker ของเราจะสามารถ handle และ manage cache ได้
หลังจาก Activation step ตัว service worker จะสามารถควบคุมทุกเพจที่อยู่ภายใต้สโคป (“ครั้งแรก” ที่ download เสร็จ จะยังควบคุมไม่ได้จนกว่าจะ load อีกครั้งนะครับ) เมื่อ Service worker เริ่มทำการควบคุม มันจะมีด้วยกัน 2 states
State 1 เป็นการ terminate เพื่อการประหยัด memory (อันนี้เหมือนมีไปทำไม มีละลบ ฮ่า ๆ)
State 2 เป็นการ handle fetch and message events ซึ่งจะเกิดขึ้นเมื่อมีการ request network หรือ message จากหน้าเว็บเพจ
Prerequisites
HTTPS
การจะใช้งาน Service worker นั้นคุณจำเป็นที่จะต้องมี Server ที่เป็น https… แต่ ถ้าตอนนี้คุณยังไม่มี ไม่เป็นไรครับ เล่นบน localhost ไปก่อนได้
Browser Support
Service workers are supported by Chrome, Firefox and Opera. Microsoft Edge ส่วน Safari ถ้าจะใช้ ก็ต้องเป็น Safari version 11.1 ขึ้นไป แต่ถึงเป็น version ใหม่แล้วก็ยังมีที่ขาดด้วยคือยังใช้ feature ได้ไม่ครบ โดยท่านสามารถดู Browser Support ได้จากภาพ หรือ service worker browser support หรือ isserviceworkerready
Implementation
Register A service worker
การจะ Register service worker เราจะต้องทำการ Implement เพื่อที่จะบอก Browser ก่อนว่า Hey I want to use service worker, which js file is here. ช่วยเอาไป Install ให้หน่อยนะ
คุณสามารถ Call method register() ได้ทุกเวลา ตัว Browser จะดูให้เองว่า Service worker ได้ทำการ register หรือยัง ถ้ายังก็จะจัดการให้เราเอง
Install a service worker
เมื่อสักครู่เราดูการ Register service worker ไปแล้ว ทีนี้เรามา Install ตัว Service worker กัน ภายในไฟล์ service-worker.js จะเป็นการบอกว่าเราจะให้มันทำอะไร
ในกรณีนี้ ผมได้ทำการ Install cache assets file bootstrap.css กับ bigbears.png ถ้าหากทำสำเร็จ มันจะต้องได้ตามภาพ สามารถดูได้ตาม link: chrome://inspect/#service-workers
Activation
หลังจากที่เราทำการ Install service worker แล้ว ส่วนต่อไปก็คือส่วนของการ activate ซึ่งการทำงานของส่วนนี้ จะทำงานเพียงครั้งเดียว หลังจากที่เราทำการ install จากนั้นจะเป็น idle แล้ว
จาก Source ตัวอย่างข้างบน เป็นการทำงานที่บอกว่า เมื่อเข้ามาในส่วน activate ให้ทำการ ลบ caches ทุกตัวที่ไม่ได้อยู่ใน white list
Fetch event and return requests
หลังจาก Install service worker และ ทำ activation แล้ว เจ้าตัว service worker จะเริ่มทำการรับ fetch events request
จาก Code ด้านบนเราได้ทำการกำหนด fetch event ไว้ใน event.respondWith()
เราได้ทำการส่ง promise จาก caches.match()
Method นี้จะทำหน้าที่ดู request และ ทำการค้นหา cache ทุกตัวที่ service worker ของเราได้ทำการสร้างเอาไว้นั่นเอง ถ้าหากเราหา cache ที่สร้างเอาไว้เจอ เราก็จะทำการ return ค่าที่ถูก cache เอาไว้ แต่ถ้าหาไม่เจอก็ให้ไปโหลดมาใหม่
ความสามารถพิเศษของมันอีกอย่างก็คือ ถ้าหาไม่เจอ เราก็สามารถกำหนดได้ว่า เราจะคืนอะไรกลับไปหาคนที่ request เช่นหารูป A ไม่เจอ ก็ให้คืนรูป B แทน
ถึงตรงนี้ ถ้าใครเล่น node js run on localhost ลองปิด server ไปเลยครับ แล้วลอง refresh จะเห็นว่า จะยังได้ผลลัพธ์เหมือนเดิม เพราะว่าเราทำการ register และ install server worker ไปแล้ว
source code ทั้งหมด สามารถ clone git ได้ข้างล่างนะครับ
Background Sync (Sync Event)
Background Sync เป็น Web API ที่เข้ามาช่วยการ process ที่ล่าช้าจนกว่าจะสามารถเชื่อมต่อ internet ได้ เราลองจินตนาการ เราสร้างเว็บไซต์ขึ้นมา มี feature ส่ง email หรือ message ลูกค้าเราพิมพ์ message ยาวมาก ๆ มาหาเราพอจะกดส่ง
เอ้าา ส่งไม่ได้ เนตตัด ไวไฟหาย หรืออะไรก็ตามที่ทำให้เราเชื่อมต่อไม่ได้ ทำให้ที่เขียนมาทั้งหมดอาจจะหายวั๊บไปเลย
ถ้าเราเขียนเว็บไซต์ของเราให้มันทำงาน Background Sync
- เมื่อลูกค้าของเรากดส่งข้อความ ระบบจะทำการบันทึกเอาไว้ก่อนที่ IndexedDB ใน browser
- ทำการ Register Background Sync
- ถ้า Internet ของลูกค้าเราสามารถเชื่อมต่อได้แล้ว ข้อความทั้งหมด จะถูกอ่าน และ ส่งมายัง Server ของเรา
- ถ้า Internet ของลูกค้ายังใช้ไม่ได้ ตัว service worker จะรอจนกว่าจะต่อได้ แม้ว่าลูกค้าจะปิดหน้าต่าง browser ไปแล้วก็ยังสามารถส่งข้อความมาหา Server ของเราได้
ส่วนนี้จะเป็นส่วนของ “event sync” นะครับ สามารถนำเอา keyword ไปหาต่อได้
Push Event
Event นี้เป็นการ handle push notification ที่ได้รับมาจาก server
การที่เราจะทำ Notification ได้นั้น ก่อนอื่น เราจำเป็นต้องทำการขอ Permission จาก user ก่อน ด้วย method ดังนี้
Notification.requestPermission();ในบทความนี้จะแสดงให้เห็นถึงการใช้งาน Event push เท่านั้น ส่วนของ code จะไม่สามารถ copy แล้วไปใช้ได้จริง เนื่องจากต้องมีการทำ subscriber กับ trigger ซึ่งมันจะยาวเกินไป
เรามาดูการทำ Notification กัน (อันนี้สั้นหน่อย push มันยาว)
Conclusion
Service Worker มีการใช้งานกันนานแล้วครับ โดยมากเวลา Research service worker มักจะเจอ PWA (progressive web apps) ด้วย
ตัวผู้เขียนเองก็เพิ่งจะเคยได้ลองเจ้า service worker
ข้อดีของ Service worker ที่เห็น ๆ แบบจับต้องได้ ก็คือการทำ cache, notification, background sync ส่วน API worker อันนี้ผู้เขียนเองยังไม่ได้ลอง
ส่วนข้อเสียหลัก ๆ ที่สำคัญเลยคือ Browser support ครับ ณ ตอนนี้ Safari เริ่ม support service worker บ้างแล้วแต่ยังไม่ครบทุก feature ขาด background sync
ท้ายนี้ก็ขอขอบคุณทุกท่านที่อ่านจนจบนะครับ หวังว่าผู้อ่านจะนำเอาไปใช้ เอาไปต่อยอด Web site ได้บ้างไม่มากก็น้อย ตรงไหนผิดพลาด ไม่ถูกต้องยังไง รบกวนแจ้งให้แก้ไขได้นะครับ
