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