โปรแกรมทำงานของบริการมียูทิลิตีที่น่าทึ่ง แต่ตอนแรกอาจทำงานยาก Workbox ช่วยให้โปรแกรมทำงานของบริการใช้งานง่ายยิ่งขึ้น อย่างไรก็ตาม เนื่องจากโปรแกรมทำงานของบริการแก้ปัญหาที่ยากๆ ได้ สิ่งที่เป็นนามธรรมของเทคโนโลยีนั้นจึงทำได้ยากหากไม่เข้าใจ ดังนั้น เอกสารส่วนแรกๆ เหล่านี้จะพูดถึงเทคโนโลยีที่สำคัญก่อนเข้าสู่รายละเอียดของ Workbox
หากต้องการดูรายชื่อ Service Worker ที่ทำงานอยู่ ให้ป้อน chrome://serviceworker-internals/ ลงในแถบที่อยู่
Service Worker มีอะไรให้บ้าง
โปรแกรมทำงานของบริการเป็นเนื้อหา JavaScript แบบพิเศษที่ทำหน้าที่เป็นพร็อกซีระหว่างเว็บเบราว์เซอร์และเว็บเซิร์ฟเวอร์ โดยมีเป้าหมายที่จะปรับปรุงความน่าเชื่อถือโดยการให้สิทธิ์เข้าถึงแบบออฟไลน์ และเพิ่มประสิทธิภาพของหน้าเว็บ
วงจรชีวิตที่พัฒนาขึ้นเรื่อยๆ เหมือนแอป
โปรแกรมทำงานของบริการเป็นการเพิ่มประสิทธิภาพสำหรับเว็บไซต์ที่มีอยู่ ซึ่งหมายความว่าหากผู้ใช้ในเบราว์เซอร์ที่ไม่รองรับโปรแกรมทำงานของบริการเข้าชมเว็บไซต์ที่ใช้เบราว์เซอร์นั้น ฟังก์ชันพื้นฐานก็จะไม่หายไป นี่คือเนื้อหาบนเว็บ
โปรแกรมทำงานของบริการปรับปรุงเว็บไซต์อย่างต่อเนื่องผ่านวงจรที่คล้ายกับแอปพลิเคชันเฉพาะแพลตฟอร์ม ลองนึกดูว่าจะเกิดอะไรขึ้นเมื่อมีการติดตั้งแอปที่มาพร้อมเครื่องจาก App Store
- มีคำขอให้ดาวน์โหลดแอปพลิเคชัน
- การดาวน์โหลดและติดตั้งแอป
- แอปพร้อมใช้งานและสามารถเปิดแอปได้
- การอัปเดตแอปสำหรับรุ่นใหม่
วงจรชีวิตของโปรแกรมทำงานของบริการนั้นคล้ายกัน แต่มีแนวทางการเพิ่มประสิทธิภาพแบบก้าวหน้า ในการเข้าชมหน้าเว็บที่มีการติดตั้ง Service Worker ใหม่เป็นครั้งแรก การเข้าชมครั้งแรกในหน้าเว็บจะมีฟังก์ชันการทำงานพื้นฐานขณะที่โปรแกรมทำงานของบริการดาวน์โหลด หลังจากติดตั้งและเปิดใช้งานโปรแกรมทำงานของบริการแล้ว ระบบจะควบคุมหน้าเว็บเพื่อเพิ่มความน่าเชื่อถือและความเร็ว
การเข้าถึง API การแคชที่ขับเคลื่อนโดย JavaScript
แง่มุมที่ขาดไม่ได้ของเทคโนโลยี Service Worker คืออินเทอร์เฟซ Cache ซึ่งเป็นกลไกการแคชที่แยกจากแคช HTTP โดยสิ้นเชิง
คุณเข้าถึงอินเทอร์เฟซ Cache ได้ภายในขอบเขต Service Worker และภายในขอบเขตของเทรดหลัก
การทำเช่นนี้จะเปิดโอกาสมากมายสำหรับการโต้ตอบที่เกิดจากผู้ใช้กับอินสแตนซ์ Cache
ในขณะที่แคช HTTP ได้รับอิทธิพลผ่านคำสั่งการแคชที่ระบุในส่วนหัว HTTP แต่อินเทอร์เฟซ Cache สามารถตั้งโปรแกรมผ่าน JavaScript ได้
ซึ่งหมายความว่าการแคชการตอบกลับสำหรับคำขอเครือข่ายอาจอิงตามตรรกะไหนก็ได้ที่เหมาะสมที่สุดสำหรับเว็บไซต์หนึ่งๆ
เช่น
- จัดเก็บเนื้อหาแบบคงที่ในแคชในคำขอแรกสำหรับเนื้อหานั้น และแสดงเนื้อหาจากแคชเท่านั้นสำหรับคำขอที่ตามมาแต่ละครั้ง
- มาร์กอัปหน้าร้านค้าในแคช แต่จะแสดงมาร์กอัปจากแคชในสถานการณ์ออฟไลน์เท่านั้น
- แสดงการตอบกลับที่ไม่มีการอัปเดตสำหรับเนื้อหาบางอย่างจากแคช แต่อัปเดตจากเครือข่ายในเบื้องหลัง
- สตรีมเนื้อหาบางส่วนจากเครือข่ายและประกอบเนื้อหาด้วย App Shell จากแคชเพื่อปรับปรุงประสิทธิภาพด้านการรับรู้
แต่ละข้อต่อไปนี้คือตัวอย่างของกลยุทธ์การแคช กลยุทธ์การแคชทำให้การใช้งานแบบออฟไลน์เกิดขึ้นได้ และมีประสิทธิภาพดีขึ้นด้วยการตรวจดูแคช HTTP ที่มีเวลาในการตอบสนองสูงทีละขั้นติดต่อกัน ก่อนที่จะเจาะลึกไปที่ Workbox เราจะทบทวนกลยุทธ์การแคชและโค้ด 2-3 รายการที่ทำให้กลยุทธ์เหล่านี้ใช้งานได้
API แบบอะซิงโครนัสและที่ขับเคลื่อนด้วยเหตุการณ์
การโอนข้อมูลผ่านเครือข่ายจะเป็นแบบไม่พร้อมกันโดยธรรมชาติ ต้องใช้เวลาในการขอเนื้อหา เซิร์ฟเวอร์ในการตอบสนองคำขอนั้น และดาวน์โหลดการตอบกลับ เวลาที่เกี่ยวข้องจะแตกต่างกันไปและไม่แน่นอน Service Worker รองรับความไม่สอดคล้องนี้ผ่าน API ที่ขับเคลื่อนเหตุการณ์ โดยใช้ Callback สำหรับเหตุการณ์ต่างๆ เช่น
- เมื่อโปรแกรมทำงานของบริการกำลังติดตั้ง
- เมื่อ Service Worker เปิดใช้งาน
- เมื่อโปรแกรมทำงานของบริการตรวจพบคำขอเครือข่าย
คุณสามารถลงทะเบียนกิจกรรมโดยใช้ addEventListener API ที่คุ้นเคย
เหตุการณ์เหล่านี้ทั้งหมดอาจโต้ตอบกับอินเทอร์เฟซ Cache ได้
โดยเฉพาะอย่างยิ่ง ความสามารถในการเรียกใช้ Callback เมื่อมีการส่งคำขอเครือข่ายมีความสำคัญอย่างยิ่งในการให้ความเสถียรและความรวดเร็วซึ่งเป็นที่ต้องการ
การทำงานแบบอะซิงโครนัสใน JavaScript เกี่ยวข้องกับการใช้ promises
นอกจากนี้ สัญญาเหล่านี้ยังช่วยสนับสนุน async และ await อีกด้วย ฟีเจอร์ JavaScript เหล่านั้นจึงสามารถใช้เพื่อทำให้โค้ด Service Worker (และ Workbox!) ง่ายขึ้นเพื่อประสบการณ์ของนักพัฒนาซอฟต์แวร์ที่ดียิ่งขึ้น
การแคชล่วงหน้าและการแคชรันไทม์
การโต้ตอบระหว่าง Service Worker กับอินสแตนซ์ Cache เกี่ยวข้องกับแนวคิดการแคช 2 แบบที่แตกต่างกัน ได้แก่ การแคชล่วงหน้าและการแคชรันไทม์
แต่ละข้อเหล่านี้ล้วนเป็นประโยชน์ที่โปรแกรมทำงานของบริการสามารถมอบให้ได้
การแคชล่วงหน้าเป็นกระบวนการแคชเนื้อหาล่วงหน้า โดยทั่วไปจะเป็นระหว่างการติดตั้งของโปรแกรมทำงานของบริการ
การแคชล่วงหน้าช่วยให้คุณดาวน์โหลดและจัดเก็บเนื้อหาแบบคงที่และข้อมูลที่จำเป็นสำหรับการเข้าถึงแบบออฟไลน์ไว้ในอินสแตนซ์ Cache ได้
การแคชประเภทนี้ยังเพิ่มความเร็วของหน้าเว็บไปยังหน้าต่อๆ ไปที่ต้องใช้เนื้อหาซึ่งแคชล่วงหน้าด้วย
การแคชรันไทม์คือการใช้กลยุทธ์การแคชกับเนื้อหาตามที่เครือข่ายขอในระหว่างรันไทม์ การแคชประเภทนี้มีประโยชน์เนื่องจากช่วยรับประกันการเข้าถึงแบบออฟไลน์สำหรับเนื้อหาและหน้าเว็บที่ผู้ใช้เคยเข้าชมแล้ว
เมื่อนำมารวมกันแล้ว แนวทางในการใช้อินเทอร์เฟซ Cache ในโปรแกรมทำงานของบริการเป็นประโยชน์ต่อประสบการณ์ของผู้ใช้อย่างมาก และให้ลักษณะการทำงานที่เหมือนกับแอปแก่หน้าเว็บทั่วไป
การแยกจากเทรดหลัก
สถานะของประสิทธิภาพของ JavaScript เป็นความท้าทายที่เปลี่ยนแปลงไปสำหรับเว็บและจากมุมมองของผู้ใช้ ทั้งนี้ขึ้นอยู่กับความสามารถของอุปกรณ์และการเข้าถึงอินเทอร์เน็ตความเร็วสูง ยิ่งใช้ JavaScript มากเท่าไหร่ การสร้างเว็บไซต์ที่รวดเร็วซึ่งมอบประสบการณ์ที่น่าพึงพอใจให้กับผู้ใช้ก็ยิ่งยากมากขึ้นเท่านั้น
Service Worker ก็เหมือนกับผู้ปฏิบัติงานทำงานบนเว็บตรงที่งานทุกอย่างที่ตนทำจะเกิดขึ้นในชุดข้อความของตนเอง ซึ่งหมายความว่างานของ Service Worker จะไม่แย่งความสนใจกับงานอื่นๆ ในเทรดหลัก โปรแกรมทำงานของบริการออกแบบโดยคำนึงถึงผู้ใช้เป็นอันดับแรก
เส้นทางข้างหน้า
เอกสารนี้เป็นเพียงภาพรวมเท่านั้น มีหัวข้ออื่นๆ อีกเล็กน้อยเกี่ยวกับ Service Worker ก่อนที่จะพูดถึง Workbox แต่โปรดวางใจได้เลย เพราะการเข้าใจโปรแกรมทำงานของบริการได้อย่างดีเยี่ยม การใช้ Workbox จะเป็นประสบการณ์ที่ง่ายดายและมีประสิทธิภาพมากขึ้น