โปรแกรมทำงานของบริการ

ผู้ใช้คาดหวังว่าแอปจะเริ่มต้นทำงานเมื่อมีการเชื่อมต่อเครือข่ายที่ช้าหรือไม่สม่ำเสมอ หรือแม้ในขณะที่ออฟไลน์ คาดหวังให้เนื้อหาที่ตนโต้ตอบด้วยล่าสุด เช่น แทร็กสื่อหรือตั๋ว และแผนการเดินทาง จะพร้อมใช้งานและใช้งานได้ เมื่อส่งคำขอไม่ได้ ผู้ใช้คาดหวังให้แอปแจ้งคำขอนั้นแทนที่จะดำเนินการไม่สำเร็จหรือขัดข้องโดยไม่มีการแจ้งเตือน และผู้ใช้ก็ต้องการทำสิ่งเหล่านี้อย่างรวดเร็ว ดังที่เราเห็นในการศึกษานี้ เสี้ยววินาทีมีค่าเป็นล้านๆ แม้ความเร็วในการโหลดที่เพิ่มขึ้นเพียง 0.1 วินาทีก็สามารถเพิ่ม Conversion ได้สูงสุดถึง 10% สรุป: ผู้ใช้คาดหวังให้ PWA เชื่อถือได้ เราจึงมี Service Worker

สวัสดีโปรแกรมทำงานของบริการ

โปรแกรมทำงานของบริการเป็นพร็อกซีมิดเดิลแวร์ที่เรียกใช้ด้านอุปกรณ์ระหว่าง PWA กับเซิร์ฟเวอร์ของคุณ ซึ่งรวมทั้งเซิร์ฟเวอร์ของคุณเองและเซิร์ฟเวอร์แบบข้ามโดเมน

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

การลงทะเบียน Service Worker

ต้องลงทะเบียน 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)

  1. เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ แล้วคลิกแท็บแอปพลิเคชัน
  2. เลือก Service Workers ในแผงด้านซ้าย
  3. ตรวจสอบว่า URL สคริปต์ของโปรแกรมทำงานของบริการปรากฏขึ้นโดยมีสถานะเป็น "เปิดใช้งานแล้ว" (คุณจะได้เรียนรู้ความหมายของสถานะนี้ในส่วนวงจรในบทนี้) ใน Firefox สถานะอาจเป็น "กำลังทำงาน" หรือ "หยุด"

ใน Safari:

  1. คลิกเมนู Develop แล้วคลิกเมนูย่อย Service Workers
  2. ตรวจสอบว่ารายการที่มีต้นทางปัจจุบันปรากฏในเมนูย่อย ซึ่งจะเปิดเครื่องมือตรวจสอบในบริบทของ Service Worker
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Service Worker ใน Chrome, Firefox และ Safari
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Service Worker ใน Chrome, Firefox และ Safari

ขอบเขต

โฟลเดอร์ที่โปรแกรมทำงานของบริการอยู่จะเป็นตัวกำหนดขอบเขตของโฟลเดอร์ Service Worker ที่อาศัยอยู่ใน example.com/my-pwa/sw.js จะควบคุมการไปยังส่วนต่างๆ ที่เส้นทาง my-pwa หรือต่ำกว่าได้ เช่น example.com/my-pwa/demos/ Service Worker สามารถควบคุมได้เฉพาะรายการ (หน้าเว็บ ผู้ปฏิบัติงาน ซึ่งรวมเรียกว่า "ไคลเอ็นต์") ในขอบเขตเท่านั้น โดยขอบเขตจะมีผลกับแท็บเบราว์เซอร์และหน้าต่าง PWA

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

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

อายุการใช้งาน

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

การติดตั้ง Service Worker จะดำเนินการโดยไม่รบกวนผู้ใช้ แม้ว่าผู้ใช้จะไม่ได้ติดตั้ง PWA ก็ตาม Service Worker API พร้อมใช้งานในแพลตฟอร์มที่ไม่รองรับการติดตั้ง PWA เช่น Safari และ Firefox ในอุปกรณ์เดสก์ท็อป

หลังจากติดตั้งแล้ว โปรแกรมทำงานของบริการจะยังไม่ได้ควบคุมไคลเอ็นต์ รวมถึง 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 เพียงเวอร์ชันเดียวเท่านั้นที่กำลังทำงาน การรีเฟรชหน้าหรือเปิด PWA ใหม่จะไม่ทำให้ Service Worker ใหม่เข้าควบคุมได้ ผู้ใช้ต้องปิดหรือออกจากแท็บและหน้าต่างทั้งหมดโดยใช้ Service Worker ปัจจุบันแล้วย้อนกลับ เมื่อนั้น Service Worker ใหม่จะควบคุมการดำเนินการไปแล้วเท่านั้น ดูข้อมูลเพิ่มเติมได้ที่บทความเกี่ยวกับวงจรการทำงานของบริการ

อายุการใช้งานของ Service Worker

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

หากไม่ได้ทำงานอยู่ Service Worker จะเริ่มทำงานเมื่อมีการขอคำขอเครือข่ายในขอบเขต หรือเมื่อได้รับเหตุการณ์ทริกเกอร์ เช่น การซิงค์ในเบื้องหลังตามระยะเวลาหรือข้อความพุช

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

ความสามารถ

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

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

แหล่งข้อมูล