Service Worker #1 : รู้จัก Service Worker
หลายคนอาจจะเคยได้ยินเกี่ยวกับ Service Worker มาบ้าง และโดยเฉพาะพักหลังมานี้ Google ก็พลักดัน Service Worker อย่างชัดเจน ลูกเล่นใหม่ๆ ที่เกี่ยวกับเว็บจะมี Service Worker เข้ามาเกี่ยวข้องด้วยเกือบทั้งหมด
หากใครยังไม่รู้ว่า Service Worker คืออะไร หรือเอาไว้ทำอะไร ให้ลองเข้าเว็บ Google IO 2016 (หรือ 2015) หลังจากเว็บโหลดเสร็จ แล้วจะมี Popup เล็กๆ ขึ้นมาเขียนว่า
“Caching Complete!! Future visits will work offline!”
หลังจากแม้ว่าเราจะไม่ได้เชื่อมต่ออินเตอร์เน็ต เราก็ยังจะสามารถเข้าใช้งานเว็บ Google IO ได้ และนั้นคือหนึ่งตัวอย่างในการใช้งาน Service worker
Service Worker ทำงานยังไง?
Service Worker คือ JavaScript ทำงานบนเว็บเบราเซอร์ ซึ่งจะทำงานอยู่เบื้องหลังแยกออกจากตัวเว็บของเรา โดยตัว Service Worker นิยมใช้ทำ Offline mode ที่เราพบเห็นจากเว็บส่วนใหญ่ของ Google รวมถึงการเพื่อทำ Web Push Notification และจะมีความสามารถอื่นๆ เพิ่มเข้ามาในอนาคต
อีกหนึ่งความสามารถของ Service Worker คือ การดัก Network Request ของเว็บ เช่น HTTP Request, โหลดรูป หรือ API Call โดยทุก Request ที่ออกจากเว็บเราจะผ่าน Service worker ทั้งหมดทำให้เราสามารถจัดการ Network Request ได้ดีขึ้น เช่น การคืนค่าจาก Cache แทนที่จะส่ง Request นั้นออกไปจริงๆ หรือในกรณีที่ไม่สามารถเชื่อมต่ออินเตอร์เน็ตได้
Service Worker สามารถใช้งาน Caching API ของตัวเบราเซอร์ได้ ทำให้เราสามารถจัดการเรื่อง Cache ได้ดีขึ้น เช่น การทำ Offline Mode หรือ Cache ข้อมูลเฉพาะส่วนที่เราต้องการได้
เงื่อนไขเบื้องต้นในการใช้งาน Service Worker
- ทำงานได้บน HTTPS หรือ localhost เท่านั้น
- ไม่สามารถเข้าถึง DOM ของหน้าเว็บโดยตรงได้
- ใช้ Promise
ติดตั้ง Service Worker
เราสามารถติดตั้ง Service Worker ได้ผ่านคำสั่ง
ไฟล์ service-worker.js คือโค็ด Service Worker ที่เราต้องการติดตั้ง
(สามารถเรียกคำสั่งนี้ทุกครั้งที่โหลดหน้าเว็บ ซึ่งหากไม่มีการเปลี่ยนแปลงในไฟล์ Service Worker ตัวเบราเซอร์ก็จะไม่ register ซ้ำ)
เมื่อติดตั้งเสร็จให้เราเปิดไปที่ chrome://inspect/#service-workers เราจะเห็นว่ามี Service Worker ทำงานอยู่บนเว็บของเรา หรือใน Chrome Version ใหม่ๆ จะสามารถดูผ่าน Developer tool ของ Chrome ได้เช่นกัน
Service Worker Lifecycle
หลังจากเราสั่ง Register แล้ว ตัว Service Worker จะเข้าสู่ Lifecycle ต่างๆ เช่น
- Download
- Install
- Activate
โดยเราสามารถ Observe Event เพื่อสั่งงานในต่อละส่วนได้ ดูเพิ่มเติม https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker
โดยตอนนี้ผมจะพูดถึงเฉพาะ “Install” และ “activate” ก่อน
// service-worker.js
self.addEventListener('install', function(event) {
// Pre-cache goes here
})self.addEventListener('activate', function(event) {
// Remove unused cache data
})
— install
ส่วนใหญ่ใช้สำหรับการทำ Pre-cache ข้อมูลที่ต้องการ เพื่อให้มีข้อมูลใน Caching ไว้ก่อนที่ Service Worker จะเริ่มทำงานได้ (จะยังไม่ลวรายละเอียดในตอนนี้)
— activate
เมื่อ Install เสร็จ จะเข้าสู่การ Activate ซึ่งในส่วนนี้จะไว้สำหรับจัดการลบ Cache file ที่เราไม่ได้ใช้แล้ว เช่นการเปลี่ยนเวอร์ชั่นของไฟล์ JS หลัก หรือรูปต่างๆ โดยในส่วนนี้เราไม่ควรจะทำ Caching อื่นๆ
เมื่อจบ Activate จะถือว่า Service Worker ได้ถูกติดตั้งโดยสมบูรณ์และสามารถทำได้แล้ว
Intercept Network Request (fetch)
เราสามารถดัก Network Request ของหน้าเว็บโดยการ Observe Event “fetch” โดยทุก request ที่ออกจากหน้าเว็บ รวมถึงการเข้าเว็บในครั้งต่อไป (หลังจากติดตั้ง Service Worker) จะผ่าน Function นี้ทั้งหมด
ทำให้เราสามารถ Respond ข้อมูลที่เราต้องการได้
self.addEventListener('fetch', function(event) {
event.respondWith(
new Response('This page is taken by service-worker')
)
})จากตัวอย่าง สิ่งที่จะเกิดขึ้นคือทุก Request ที่ออกจากเว็บจะถูก Respond ด้วยข้อความ
“This page is taken by service-worker” เสมอ
หรือเรายังคงสามารถ Respond ด้วยการส่ง request นั้นออกไปจริงๆ ได้ด้วย
// Respond with real request
self.addEventListener('fetch', function(event) {
event.respondWith(fetch(event.request))
})Example
เมื่อเอาทุกอย่างมารวมกัน เราก็จะได้ Service Worker แบบง่ายๆ มาใช้งานในเว็บ สามารถเข้าดูตัวอย่างได้ที่ https://n3tr.github.io/service-worker-example/
ถ้าหากเข้าครั้งแรกจะเห็นเนื้อหาเว็บแบบปกติ(ซ้าย) หลังจากนั้น เมื่อ Service Worker ติดตั้งเสร็จแล้วให้ลอง Refresh หน้าเว็บจะเห็นว่า Content ของเว็บนั้นเปลี่ยนไป(ขวา) แม้ว่าจะปิด Wifi, ตัดเน็ต ก็จะเห็นว่ายังสามารถเข้าเว็บได้
ถึงตรงนี้เราได้รู้จัก Service Worker และการทำงานเบื้องต้นแล้ว บทความต่อไปผมเริ่มจะทำ Caching ข้อมูลที่เราเคยโหลดมา และเมื่อมีการโหลดข้อมูลซ้ำจะใช้จาก Cache แทน
ซอร์สโค็ดสามารถดูเพิ่มเติมที่: https://github.com/n3tr/service-worker-example/
