รอบที่แล้วเราทำความเข้าใจคุณสมบัติ 3 ประการของ Progressive Web App ในนิยามของ Google มาในวันนี้เรามาทำความเข้าใจกลไกที่ทำให้คุณสมบัติแรกนั้นทำงานได้จริง (Reliable) นั่นคือ Service Worker ครับ
ถ้าเปรียบเห็นภาพง่ายๆ เหมือนบอกว่ากาน้ำไฟฟ้านี้ ต้มน้ำร้อนได้ เจ้าตัว Service Worker คือขดลวดที่ต้มน้ำจนร้อนได้นั่นเอง
Service Worker อยู่ที่ไหนใน Web App ของเรา?
ในเมื่อมันเป็นกลไกทำให้ Web App ธรรมดาของเรา มันกลายสร้างเป็น Progressive Web App ได้ มันก็ต้องเป็นสิ่งที่ขาดไม่ได้แน่ๆ เรียกว่าทำ PWA ก็ต้องมายุ่งเกี่ยวกับ Service Worker แน่นอน
แล้วเราต้องสร้างมันยังไง? ต้องมี Library หรือ Framework ไหม?
คำตอบคือ มันเป็นความสามารถของ Web Browser ครับ!
นั่นหมายความว่า หากเราจะใส่ Progressive Web App เป็นใน Solution ให้ลูกค้า หรือผู้ใช้ของเรา ต้องดูก่อนเลย Web Browser กลุ่มเป้าหมายเราเพียงพอไหม
จากนั้นเราค่อยเขียนส่วนโปรแกรมไปเรียกใช้ Service Worker ของ Web Browser นั่นเอง เราจะมองว่าเป็น API หรือชุดโปรแกรมที่ติดมากับ Web Browser ทุกตัวที่รองรับการทำ PWA ก็ได้
ตอนนี้ที่รองรับแน่ๆ คือ Chrome, Firefox, Opera
Microsoft Edge บอกเรารับชัวร์ รอเราแปป (ให้ตัวโปรแกรมเราทำเสร็จก่อน) ส่วน Safari ล่าสุดรองรับแล้วนะจ๊ะ
Tips: อยากรู้ว่า Browser เรารองรับ Service Worker หรือยัง กดดูจากเว็บนี้ได้เลยจ้า
ความสามารถของ Service Worker
ดังนั้น เมื่อ Service Worker อยู่ใน Web Browser เราจะทำอะไรได้บ้าง?
สิ่งที่เราควรรู้เกี่ยวกับความสามารถของ Service Worker มีดังนี้ครับ:
- ทำงานแบบ Background นั่นคือแยกการทำงานออกจากหน้าที่ของ Web Browser และ Web App ของเราเอง
- รองรับความสามารถพื้นฐานอย่าง
- การจัดการ Cache และการทำงานกับข้อมูลผ่าน Network
- Push Notification
- Background Sync
- ความสามารถส่วนนี้สามารถเพิ่มเติมได้เรื่อยๆ ในอนาคต เช่น Geofencing
ดังนั้นหากดูในแง่ความสามารถ ตัว Service Worker ถูกสร้างมารองรับ ให้ Web App ของเราสามารถทำงานแบบ Offline (ไม่จำเป็นต้องเชื่อมต่อกับ Server)
เหมือนกับพวก Native Application อย่างโปรแกรมบน Windows หรือ แอพในมือถือนั่นเอง!
ข้อควรรู้เพิ่มเติมเกี่ยวกับ Service Worker
Web App เราจะมีโค้ดที่เขียนติดตั้ง Service Worker ด้วยตัวเอง ดังนั้น แต่ละ Web App ก็จะมี Service Worker ของใครของมัน
การทำงานของ Service Worker จะถูกทำลายเมื่อไม่ใช้งาน และจะถูกเปิดขึ้นใหม่เมื่อตัวแอพเราต้องการอีกครั้ง
ถึงแม้ว่าตอนพัฒนา เราสามารถทดสอบ Service Worker ผ่าน localhost แต่ตอนเอาไปใช้งานจริงต้องผ่าน HTTPs เท่านั้นนะครับ
เริ่มมองเห็นกลไกของ Progressive Web App มากขึ้นหรือยัง?
Service Worker เป็นกลไกที่เข้าใจได้ง่าย และทรงพลังมาก จนบางครั้งก็หมิ่นเหม่ที่จะทำให้เกิดปัญหาด้านความปลอดภัย หากใช้ไม่ระวัง (เดี๋ยวว่างๆ จะมาคุยกันแยกอีกบทหนึ่งแล้วกัน)
อย่าลืมติดตามตอนต่อไปได้นะครับ
- ติดตามจากแฟนเพจ Nextflow
- กดติดตามคลิปใหม่ๆ Subscribe YouTube Channel ของพลได้เลย
- โทรติดต่อบริการจัดอบรม 083-071-3373 คลิกโทรผ่านมือถือได้เลย
- สอบถามผ่านทาง LINE คลิก
- สอบถามผ่านทาง Facebook คลิก
