ผู้ใช้คาดหวังว่าแอปจะเริ่มทำงานอย่างเสถียรเมื่อมีการเชื่อมต่อเครือข่ายที่ช้าหรือไม่สม่ำเสมอ หรือแม้ในขณะที่ออฟไลน์ ผู้ใช้คาดหวังให้เนื้อหาที่ตนโต้ตอบด้วยล่าสุด เช่น แทร็กสื่อหรือตั๋ว และแผนการเดินทาง จะพร้อมใช้งานและใช้งานได้ เมื่อส่งคำขอไม่ได้ ผู้ใช้คาดหวังให้แอปบอกคำขอนั้นแทนที่จะล้มเหลวหรือขัดข้องโดยไม่มีการแจ้งเตือน และทางทีมต้องการให้การดำเนินการทั้งหมดนี้เกิดขึ้นอย่างรวดเร็ว อย่างที่คุณเห็นได้ในมิลลิวินาทีทำให้หลายล้านวินาที แม้แต่การปรับปรุงเวลาในการโหลด 0.1 วินาทีก็สามารถเพิ่ม Conversion ได้สูงสุดถึง 10% Service Worker เป็นเครื่องมือที่ช่วยให้ Progressive Web App (PWA) ทำตามความคาดหวังของผู้ใช้ได้
เมื่อแอปขอทรัพยากรที่อยู่ภายใต้ขอบเขตของโปรแกรมทำงานของบริการ โปรแกรมทำงานของบริการจะสกัดกั้นคำขอและทำหน้าที่เป็นพร็อกซีเครือข่าย แม้ว่าผู้ใช้จะออฟไลน์อยู่ก็ตาม จากนั้นระบบสามารถตัดสินใจได้ว่าควรแสดงทรัพยากรจากแคชโดยใช้ Cache Storage API, แสดงจากเครือข่ายเสมือนไม่มี Service Worker ที่ใช้งานอยู่ หรือสร้างจากอัลกอริทึมในเครื่อง วิธีนี้ช่วยให้คุณมอบประสบการณ์การใช้งานคุณภาพสูงเหมือนในแอปแพลตฟอร์มได้ แม้ว่าแอปจะออฟไลน์อยู่
ลงทะเบียน Service Worker
ก่อนที่ Service Worker จะเข้าควบคุมหน้าเว็บ ต้องลงทะเบียน PWA สำหรับ PWA ก่อน ซึ่งหมายความว่าเมื่อผู้ใช้เปิด PWA เป็นครั้งแรก คำขอเครือข่ายทั้งหมดจะไปที่เซิร์ฟเวอร์ของคุณโดยตรงเนื่องจากโปรแกรมทำงานของบริการยังไม่มีการควบคุมหน้าเว็บของคุณ
หลังจากตรวจสอบว่าเบราว์เซอร์รองรับ Service Worker API แล้วหรือไม่ PWA จะลงทะเบียน Service Worker ได้ หลังจากโหลดแล้ว โปรแกรมทำงานของบริการจะตั้งค่าตัวเองระหว่าง PWA กับเครือข่าย โดยสกัดกั้นคำขอและแสดงคำตอบที่สอดคล้องกัน
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceworker.js");
}
ยืนยันว่าได้ลงทะเบียน Service Worker หรือไม่
หากต้องการตรวจสอบว่า Service Worker ลงทะเบียนแล้วหรือยัง ให้ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในเบราว์เซอร์ที่คุณชื่นชอบ
ในเบราว์เซอร์แบบ Firefox และ Chromium (Microsoft Edge, Google Chrome หรือ Samsung Internet)
- เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ แล้วคลิกแท็บแอปพลิเคชัน
- เลือก Service Workers ในแผงด้านซ้าย
- ตรวจสอบว่า URL สคริปต์ของโปรแกรมทำงานของบริการปรากฏขึ้นโดยมีสถานะเป็น "เปิดใช้งานแล้ว" (ดูข้อมูลเพิ่มเติมได้ที่วงจร) ใน Firefox อาจแสดงสถานะว่า "กำลังทำงาน" หรือ "หยุด"
ใน Safari:
- คลิกพัฒนา > Service Worker
- ตรวจสอบเมนูนี้เพื่อหารายการที่มีต้นทางปัจจุบัน การคลิกรายการนั้นจะเปิดเครื่องมือตรวจสอบในบริบทของ Service Worker
ขอบเขต
โฟลเดอร์ที่โปรแกรมทำงานของบริการอยู่จะเป็นตัวกำหนดขอบเขตของโฟลเดอร์ Service Worker ที่อาศัยอยู่ใน example.com/my-pwa/sw.js จะควบคุมการไปยังส่วนต่างๆ ที่หรือใต้เส้นทาง my-pwa ได้ เช่น example.com/my-pwa/demos/ Service Worker สามารถควบคุมเฉพาะรายการ (หน้าเว็บ ผู้ปฏิบัติงาน ซึ่งรวมเรียกว่า "ไคลเอ็นต์") ในขอบเขตเท่านั้น
ขอบเขตนี้มีผลกับแท็บเบราว์เซอร์และหน้าต่าง PWA
อนุญาตให้มี Service Worker ได้เพียง 1 รายการต่อขอบเขต เมื่อ Service Worker ทำงานอยู่และกำลังทำงาน โดยทั่วไปจะมีเพียงอินสแตนซ์เดียวที่ใช้ได้ไม่ว่าจะมีไคลเอ็นต์ (หน้าต่าง PWA หรือแท็บเบราว์เซอร์) อยู่ในหน่วยความจำกี่รายการ
Safari ในการจัดการขอบเขตที่ซับซ้อนกว่าที่เรียกว่าพาร์ติชัน ซึ่งจะส่งผลต่อวิธีที่ขอบเขตทำงานกับ iframe แบบข้ามโดเมน หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้งาน WebKit โปรดดูบล็อกโพสต์
อายุการใช้งาน
โปรแกรมทำงานของบริการมีวงจรที่จะกำหนดวิธีการติดตั้งแยกจากการติดตั้ง PWA
วงจรชีวิตของโปรแกรมทำงานของบริการจะเริ่มต้นจากการลงทะเบียนโปรแกรมทำงานของบริการ จากนั้นเบราว์เซอร์จะพยายามดาวน์โหลดและแยกวิเคราะห์ไฟล์ Service Worker หากการแยกวิเคราะห์สำเร็จ เหตุการณ์ install ของ Service Worker จะเริ่มทำงาน เหตุการณ์ install
เริ่มทำงานเพียงครั้งเดียว
การติดตั้ง Service Worker จะดำเนินการเงียบๆ โดยไม่ต้องมีการให้สิทธิ์จากผู้ใช้ แม้ว่าผู้ใช้จะไม่ได้ติดตั้ง PWA ก็ตาม Service Worker API ใช้งานได้ แม้บนแพลตฟอร์มที่ไม่รองรับการติดตั้ง PWA เช่น Safari และ Firefox ในอุปกรณ์เดสก์ท็อป
หลังจากติดตั้งแล้ว ต้องเปิดใช้งาน Service Worker ก่อนจึงจะควบคุมไคลเอ็นต์ รวมถึง PWA ได้ เมื่อ Service Worker พร้อมควบคุมไคลเอ็นต์ เหตุการณ์ activate จะเริ่มทำงาน แต่โดยค่าเริ่มต้น โปรแกรมทำงานของบริการ (Service Worker) ที่เปิดใช้งานแล้วจะไม่สามารถจัดการหน้าที่ลงทะเบียนหน้าดังกล่าวในครั้งต่อไปที่คุณไปที่หน้าดังกล่าวโดยการโหลดหน้าซ้ำหรือเปิด PWA อีกครั้ง
คุณรับเหตุการณ์ในขอบเขตรวมของ Service Worker ได้โดยใช้ออบเจ็กต์ self ดังนี้
serviceworker.js
// This code executes in its own worker or thread
self.addEventListener("install", event => {
console.log("Service worker installed");
});
self.addEventListener("activate", event => {
console.log("Service worker activated");
});
อัปเดต Service Worker
โปรแกรมทำงานของบริการจะอัปเดตเมื่อเบราว์เซอร์ตรวจพบว่าโปรแกรมทำงานของบริการที่ควบคุมไคลเอ็นต์และไฟล์ Service Worker เวอร์ชันใหม่จากเซิร์ฟเวอร์นั้นแตกต่างกันแบบไบต์
หลังจากติดตั้งเรียบร้อยแล้ว โปรแกรมทำงานของบริการใหม่จะรอเปิดใช้งานจนกว่าโปรแกรมทำงานของบริการเก่าจะไม่ควบคุมไคลเอ็นต์อีกต่อไป สถานะนี้เรียกว่า "กำลังรอ" และเป็นวิธีการที่เบราว์เซอร์ช่วยให้มั่นใจว่าจะมี Service Worker เพียงเวอร์ชันเดียวเท่านั้นที่กำลังทำงาน
การรีเฟรชหน้าหรือเปิด PWA ใหม่ไม่ได้ทำให้ Service Worker ใหม่เข้าควบคุมได้ ผู้ใช้ต้องปิดหรือออกจากแท็บและหน้าต่างทั้งหมดโดยใช้ Service Worker ปัจจุบัน และย้อนกลับไปเพื่อควบคุม Service Worker ใหม่ ดูข้อมูลเพิ่มเติมได้ที่วงจรการทำงานของ Service Worker
อายุการใช้งานของ Service Worker
Service Worker ที่ติดตั้งและลงทะเบียนแล้วจะจัดการคำขอเครือข่ายทั้งหมดภายในขอบเขตได้ ฟีเจอร์นี้จะทำงานบนเทรดของตัวเอง โดยมีเบราว์เซอร์ควบคุมการเปิดใช้งานและการสิ้นสุดการใช้งาน ซึ่งช่วยให้คุณทำงานได้แม้กระทั่งก่อนที่ PWA จะเปิดหรือหลังจากปิด Service Worker จะทำงานบนเทรดของตัวเอง แต่สถานะในหน่วยความจำอาจไม่คงอยู่ระหว่างการเรียกใช้ Service Worker ดังนั้นโปรดตรวจสอบว่าสิ่งใดก็ตามที่คุณต้องการใช้ซ้ำสำหรับการเรียกใช้แต่ละครั้งนั้นมีอยู่ใน IndexedDB หรือพื้นที่เก็บข้อมูลถาวรอื่นๆ
หากไม่ได้ทำงานอยู่ Service Worker จะเริ่มทำงานเมื่อมีการส่งคำขอเครือข่ายในขอบเขต หรือเมื่อได้รับเหตุการณ์ทริกเกอร์ เช่น การซิงค์เบื้องหลังเป็นระยะหรือข้อความพุช
โปรแกรมทำงานของบริการจะสิ้นสุดลงหากไม่มีการโต้ตอบเป็นเวลา 2-3 วินาทีหรือทำงานเป็นเวลานานเกินไป ระยะเวลาของโค้ดนี้จะแตกต่างกันไปในแต่ละเบราว์เซอร์ หากโปรแกรมทำงานของบริการสิ้นสุดลงและเกิดเหตุการณ์ที่ทำให้เริ่มทำงานใหม่ โปรแกรมทำงานจะรีสตาร์ท
ความสามารถ
โปรแกรมทำงานของบริการที่ลงทะเบียนและใช้งานอยู่จะใช้เทรดที่มีวงจรการดำเนินการที่แตกต่างจากเทรดหลักของ PWA โดยสิ้นเชิง แต่โดยค่าเริ่มต้น ไฟล์โปรแกรมทำงานของบริการจะไม่มีลักษณะการทำงาน โค้ดจะไม่สร้างแคชหรือแสดงทรัพยากรใดๆ โค้ดนี้เป็นสิ่งที่คุณจำเป็นต้องทำ คุณจะเข้าใจวิธีการได้ในบทต่อไปนี้
ความสามารถของ Service Worker ไม่ได้มีไว้สำหรับพร็อกซีหรือการแสดงคำขอ HTTP เท่านั้น ส่วนฟีเจอร์อื่นๆ นั้นจะใช้งานได้เสริมด้วยสำหรับวัตถุประสงค์อื่นๆ เช่น การดำเนินการกับโค้ดในเบื้องหลัง ข้อความ Push บนเว็บ และการประมวลผลการชำระเงิน เราจะพูดถึงการเพิ่มเหล่านี้ในความสามารถ