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

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

วันที่

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

ลงทะเบียน 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 แล้วหรือไม่

หากต้องการยืนยันว่าได้ลงทะเบียนโปรแกรมทำงานของบริการหรือไม่ ให้ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน เบราว์เซอร์โปรด

ในเบราว์เซอร์ Firefox และ Chromium (Microsoft Edge, Google Chrome หรือ อินเทอร์เน็ต Samsung):

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

ใน Safari

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

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

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

โปรแกรมทำงานของบริการมีวงจรที่กำหนดวิธีการติดตั้งแยกต่างหาก จากการติดตั้ง PWA

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

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

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

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

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

แหล่งข้อมูล

• Service Worker API (MDN)
• แนวความคิดของผู้ปฏิบัติงานบริการ
• ผู้ปฏิบัติงาน WebKit ที่อยู่ในบริการของคุณ
• โมดูล ES ใน Service Worker
• วงจรของ Service Worker