ภาพรวมผู้ปฏิบัติงาน

วิธีที่ Web Worker และ Service Worker ช่วยปรับปรุงประสิทธิภาพของเว็บไซต์ และกรณีที่ควรใช้ Web Worker แทน Service Worker

Andrew Guan

Demián Renzulli

ภาพรวมนี้อธิบายวิธีที่เว็บเวิร์กเกอร์และ Service Worker ช่วยปรับปรุงประสิทธิภาพของเว็บไซต์ได้ รวมถึงกรณีที่ควรใช้เว็บเวิร์กเกอร์แทน Service Worker ดูบทความที่เหลือในชุดนี้เพื่อดูรูปแบบการสื่อสารของหน้าต่างและ Service Worker ที่เฉพาะเจาะจง

วิธีที่เจ้าหน้าที่สามารถปรับปรุงเว็บไซต์ของคุณ

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

ในการพัฒนาแอปพลิเคชัน iOS/Android รูปแบบทั่วไปที่ช่วยให้เธรดหลักของแอปมีอิสระในการตอบสนองต่อเหตุการณ์ของผู้ใช้คือการย้ายการดำเนินการไปยังเธรดเพิ่มเติม ในความเป็นจริงแล้ว การบล็อกเธรดหลักเป็นเวลานานเกินไปใน Android เวอร์ชันล่าสุดจะทำให้แอปขัดข้อง

ในเว็บ JavaScript ได้รับการออกแบบตามแนวคิดของเธรดเดียว และไม่มีความสามารถที่จําเป็นในการใช้รูปแบบการแยกหลายเธรด เช่น หน่วยความจําที่ใช้ร่วมกัน เช่นเดียวกับที่แอปมี

แม้จะมีข้อจำกัดเหล่านี้ แต่คุณก็สร้างรูปแบบที่คล้ายกันได้บนเว็บโดยใช้ Worker ในการเรียกใช้สคริปต์ในเธรดเบื้องหลัง ซึ่งช่วยให้สามารถทำงานได้โดยไม่รบกวนเธรดหลัก เวิร์กเกอร์คือขอบเขต JavaScript ทั้งหมดที่ทำงานบนเธรดแยกต่างหากโดยไม่มีการแชร์หน่วยความจำ

ในโพสต์นี้ คุณจะได้เรียนรู้เกี่ยวกับเวิร์กเกอร์ 2 ประเภท (เวิร์กเกอร์ของเว็บและ Service Worker) ทั้งความเหมือนและความแตกต่าง รวมถึงรูปแบบการใช้งานที่พบบ่อยที่สุดในเว็บไซต์เวอร์ชันที่ใช้งานจริง

ผู้ปฏิบัติงานเกี่ยวกับเว็บและ Service Worker

ความคล้ายคลึง

Web Worker และ Service Worker เป็น 2 ประเภทของผู้ปฏิบัติงานที่พร้อมใช้งานในเว็บไซต์ ข้อมูลเหล่านี้มีบางอย่างที่เหมือนกัน ดังนี้

• ทั้ง 2 รายการจะทํางานในเธรดรอง ซึ่งช่วยให้โค้ด JavaScript ทำงานได้โดยไม่บล็อกเธรดหลักและอินเทอร์เฟซผู้ใช้
• จะไม่มีสิทธิ์เข้าถึงออบเจ็กต์ Window และ Document จึงไม่สามารถโต้ตอบกับ DOM ได้โดยตรง และจะมีสิทธิ์เข้าถึงเบราว์เซอร์ API แบบจํากัด

ความแตกต่าง

คุณอาจคิดว่างานส่วนใหญ่ที่มอบสิทธิ์ให้ Web Worker ทําได้จะทําได้ใน Service Worker และในทางกลับกัน แต่ทั้ง 2 อย่างนี้มีความแตกต่างกันที่สำคัญดังนี้

• Service Worker ให้คุณขัดขวางคำขอเครือข่าย (ผ่านเหตุการณ์ fetch) และรอรับเหตุการณ์ Push API ในเบื้องหลัง (ผ่านเหตุการณ์ push) ซึ่งแตกต่างจาก Web Worker
• หน้าเว็บสามารถสร้าง Web Worker ได้หลายรายการ แต่ Service Worker รายการเดียวจะควบคุมแท็บที่ใช้งานอยู่ทั้งหมดภายใต้ขอบเขตที่ลงทะเบียนไว้
• อายุการใช้งานของ Web Worker เชื่อมโยงกับแท็บที่เป็นของอย่างใกล้ชิด ขณะที่วงจรชีวิตของ Service Worker นั้นไม่เกี่ยวข้องกับแท็บ ด้วยเหตุนี้ การปิดแท็บที่ Web Worker ทำงานอยู่จะสิ้นสุดการทำงานของ Web Worker ส่วน Service Worker จะทำงานต่อไปในเบื้องหลังได้แม้ว่าเว็บไซต์จะไม่มีแท็บที่ใช้งานอยู่ก็ตาม

กรณีการใช้งาน

ความแตกต่างระหว่างผู้ดําเนินการทั้ง 2 ประเภทจะบอกได้ว่าควรใช้ผู้ดําเนินการประเภทใดในสถานการณ์ใด

Use Case สำหรับ Web Worker มักเกี่ยวข้องกับการถ่ายโอนงาน (เช่น การคํานวณที่หนัก) ไปยังเธรดรองเพื่อหลีกเลี่ยงการบล็อก UI

• ตัวอย่าง: ทีมที่สร้างวิดีโอเกม PROXX ต้องการปล่อยชุดข้อความหลักให้ว่างมากที่สุดเพื่อดูแลอินพุตของผู้ใช้และภาพเคลื่อนไหว ด้วยเหตุนี้ พวกเขาจึงใช้ Web Worker เพื่อเรียกใช้ตรรกะเกมและการบำรุงรักษาสถานะในเธรดแยกต่างหาก

โดยทั่วไปแล้ว งานของ Service Worker เกี่ยวข้องกับการทําหน้าที่เป็นพร็อกซีเครือข่าย การจัดการงานเบื้องหลัง และการดำเนินการต่างๆ เช่น การแคชและการออฟไลน์

ตัวอย่าง: ใน PWA ของพอดแคสต์ คุณอาจต้องการอนุญาตให้ผู้ใช้ดาวน์โหลดตอนแบบสมบูรณ์เพื่อฟังขณะออฟไลน์ คุณสามารถใช้ Service Worker และโดยเฉพาะอย่างยิ่ง Background Fetch API เพื่อดำเนินการดังกล่าว วิธีนี้ช่วยให้งานไม่หยุดชะงักหากผู้ใช้ปิดแท็บขณะที่ดาวน์โหลดตอน

เครื่องมือและไลบรารี

การสื่อสารของกรอบเวลาและแรงงานสามารถติดตั้งใช้งานโดยใช้ API ระดับล่างที่แตกต่างกัน แต่โชคดีที่เรามีไลบรารีที่จัดการกระบวนการนี้ให้โดยอัตโนมัติเพื่อดูแล Use Case ที่พบบ่อยที่สุด ในส่วนนี้ เราจะกล่าวถึง 2 รายการที่จัดการกับ Window Worker และ Service Worker ของเว็บ นั่นคือ Comlink และ Workbox

Comlink

Comlink เป็นไลบรารี RPC ขนาดเล็ก (1.6 KB) ที่จัดการรายละเอียดพื้นฐานหลายอย่างเมื่อสร้างเว็บไซต์ที่ใช้ Web Worker ซึ่งใช้ในเว็บไซต์ต่างๆ เช่น PROXX และ Squoosh ดูสรุปแรงจูงใจและตัวอย่างโค้ดได้ที่นี่

Workbox

Workbox เป็นไลบรารียอดนิยมในการสร้างเว็บไซต์ที่ใช้ Service Worker โมดูลนี้รวมชุดแนวทางปฏิบัติแนะนำเกี่ยวกับแคช ออฟไลน์ การซิงค์ในเบื้องหลัง และอื่นๆ ไว้ด้วยกัน โมดูล workbox-window มอบวิธีแลกเปลี่ยนข้อความระหว่าง Service Worker กับหน้าเว็บที่สะดวก

ขั้นตอนถัดไป

ส่วนที่เหลือของชุดนี้จะเน้นที่รูปแบบการสื่อสารของหน้าต่างและ Service Worker

• คำแนะนำเกี่ยวกับการแคชแบบบังคับ: การเรียก Service Worker จากหน้าเว็บเพื่อแคชทรัพยากรล่วงหน้า (เช่น ในสถานการณ์การเรียกข้อมูลล่วงหน้า)
• การออกอากาศการอัปเดต: การเรียกหน้าเว็บจาก Service Worker เพื่อแจ้งเกี่ยวกับการอัปเดตที่สําคัญ (เช่น เว็บไซต์เวอร์ชันใหม่พร้อมใช้งานแล้ว)
• การสื่อสารแบบ 2 ทาง: การมอบหมายงานให้กับ Service Worker (เช่น การดาวน์โหลดขนาดใหญ่) และการแจ้งข้อมูลความคืบหน้าให้หน้าเว็บทราบอยู่เสมอ

ดูรูปแบบการสื่อสารของหน้าต่างและเว็บเวิร์กเกอร์ได้ที่ใช้เว็บเวิร์กเกอร์เพื่อเรียกใช้ JavaScript นอกเธรดหลักของเบราว์เซอร์