แก้ไขข้อบกพร่องบริการที่ทำงานอยู่เบื้องหลัง

Kayce Basques

Sofia Emelianova

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

ส่วนบริการที่ทำงานอยู่เบื้องหลังช่วยให้คุณแก้ไขข้อบกพร่องของบริการที่ทำงานอยู่เบื้องหลังต่อไปนี้ได้

• การดึงข้อมูลในเบื้องหลัง
• การซิงค์ในเบื้องหลัง
• การแจ้งเตือน
• การโหลดแบบคาดเดา
• ข้อความ Push

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

นอกจากเหตุการณ์บริการที่ทำงานอยู่เบื้องหลังแล้ว เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ยังทําสิ่งต่อไปนี้ได้ด้วย

• แสดงรายงานที่ Chrome ส่งไปแล้วหรือกำลังจะส่งโดยใช้ Reporting API
• ช่วยให้คุณแก้ไขข้อบกพร่องและทดสอบแคชย้อนกลับ/ไปข้างหน้าได้ด้วยการคลิก

การดึงข้อมูลในเบื้องหลัง

Background Fetch API ช่วยให้ Service Worker ดาวน์โหลดทรัพยากรขนาดใหญ่ได้อย่างน่าเชื่อถือ เช่น ภาพยนตร์หรือพอดแคสต์ เป็นบริการที่ทำงานอยู่เบื้องหลัง วิธีบันทึกเหตุการณ์การดึงข้อมูลในเบื้องหลังเป็นเวลา 3 วัน แม้ว่าเครื่องมือสำหรับนักพัฒนาเว็บจะไม่เปิดอยู่

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ เช่น ในหน้าเดโมนี้

2. ไปที่แอปพลิเคชัน > บริการที่ทำงานอยู่เบื้องหลัง > การดึงข้อมูลในเบื้องหลัง แล้วคลิก บันทึก

   

3. ในหน้าเดโม ให้คลิกจัดเก็บชิ้นงานในเครื่อง ซึ่งจะทริกเกอร์กิจกรรมการดึงข้อมูลในเบื้องหลัง เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกเหตุการณ์ลงในตาราง

   

4. คลิกเหตุการณ์เพื่อดูรายละเอียดของเหตุการณ์นั้นในพื้นที่ด้านล่างตาราง

5. คุณสามารถปิดเครื่องมือสำหรับนักพัฒนาเว็บและปล่อยให้การบันทึกทำงานได้สูงสุด 3 วัน หากต้องการหยุดบันทึก ให้คลิก หยุด

ซิงค์ในแบ็กกราวด์

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

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ เช่น ในหน้าเดโมนี้

2. ไปที่แอปพลิเคชัน > บริการที่ทำงานอยู่เบื้องหลัง > การซิงค์ในเบื้องหลัง แล้วคลิก บันทึก

   

3. ในหน้าเดโม ให้คลิกลงทะเบียนการซิงค์ในเบื้องหลังเพื่อลงทะเบียน Service Worker ที่เกี่ยวข้อง แล้วคลิกอนุญาตเมื่อได้รับข้อความแจ้ง

   หมายเหตุ: ดูวิธีแก้ไขข้อบกพร่องของ Service Worker ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้ที่ Service Worker

   การลงทะเบียน Service Worker เป็นกิจกรรมการซิงค์เบื้องหลัง เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกเหตุการณ์ลงในตาราง

   

4. คลิกเหตุการณ์เพื่อดูรายละเอียดของเหตุการณ์นั้นในพื้นที่ด้านล่างตาราง

5. คุณสามารถปิดเครื่องมือสำหรับนักพัฒนาเว็บและปล่อยให้การบันทึกทำงานได้สูงสุด 3 วัน หากต้องการหยุดบันทึก ให้คลิก หยุด

การลดการติดตามการเข้าชม (เวอร์ชันทดลอง)

หมายเหตุ: ฟีเจอร์นี้ยังอยู่ในช่วงการทดลองและพร้อมใช้งานใน Chrome เวอร์ชัน 115 ขึ้นไป

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

วิธีบังคับใช้การลดการติดตาม

1. บล็อกคุกกี้ของบุคคลที่สามใน Chrome ไปที่ > การตั้งค่า > ความเป็นส่วนตัวและความปลอดภัย > คุกกี้และข้อมูลเว็บไซต์อื่นๆ > บล็อกคุกกี้ของบุคคลที่สาม แล้วเปิดใช้
2. ใน chrome://flags ให้ตั้งค่าการทดสอบการลดการติดตามการเข้าออกเป็นเปิดใช้ด้วยการลบ
3. เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ เช่น ในหน้าเดโม แล้วไปที่แอปพลิเคชัน > บริการที่ทำงานอยู่เบื้องหลัง > การลดการติดตามการตีกลับ
4. ในหน้าเดโม ให้คลิกลิงก์ตีกลับ แล้วรอ (10 วินาที) เพื่อให้ Chrome บันทึกการตีกลับ แท็บปัญหาจะเตือนคุณเกี่ยวกับการลบสถานะที่กำลังจะเกิดขึ้น
5. คลิกบังคับให้เรียกใช้เพื่อลบสถานะทันที

การแจ้งเตือน

หลังจากที่ Service Worker ได้รับข้อความ Push จากเซิร์ฟเวอร์แล้ว Service Worker จะใช้ Notifications API เพื่อแสดงข้อมูลต่อผู้ใช้ วิธีบันทึกการแจ้งเตือนเป็นเวลา 3 วัน แม้ว่าเครื่องมือสําหรับนักพัฒนาเว็บจะไม่เปิดอยู่

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ เช่น ในหน้าเดโมนี้

2. ไปที่แอปพลิเคชัน > บริการที่ทำงานอยู่เบื้องหลัง > การแจ้งเตือน แล้วคลิก บันทึก

   

3. ในหน้าเดโม ให้คลิกตั้งเวลาการแจ้งเตือน แล้วคลิกอนุญาตเมื่อได้รับข้อความแจ้ง

4. รอให้การแจ้งเตือนปรากฏขึ้น DevTools จะบันทึกเหตุการณ์การแจ้งเตือนลงในตาราง

   

5. คลิกเหตุการณ์เพื่อดูรายละเอียดของเหตุการณ์นั้นในพื้นที่ด้านล่างตาราง

6. คุณสามารถปิดเครื่องมือสำหรับนักพัฒนาเว็บและปล่อยให้การบันทึกทำงานได้สูงสุด 3 วัน หากต้องการหยุดบันทึก ให้คลิก หยุด

การโหลดแบบคาดเดา

การโหลดแบบคาดเดาช่วยให้การโหลดหน้าเว็บเกือบจะทันทีโดยอิงตามกฎการคาดเดาที่คุณกําหนด ซึ่งจะช่วยให้เว็บไซต์สามารถแสดงผลล่วงหน้าและแสดงผลหน้าเว็บที่มีการไปยังหน้าเว็บส่วนใหญ่ล่วงหน้า

การเรียกข้อมูลล่วงหน้าจะดึงข้อมูลทรัพยากรล่วงหน้า และการแสดงผลล่วงหน้าจะดึงข้อมูลล่วงหน้าไปอีกขั้นและแสดงผลทั้งหน้าในกระบวนการแสดงผลเบื้องหลังที่ซ่อนอยู่

คุณสามารถแก้ไขข้อบกพร่องของการโหลดแบบคาดเดาได้ในส่วนแอปพลิเคชัน > บริการที่ทำงานอยู่เบื้องหลัง > การโหลดแบบคาดเดา ส่วนนี้มี 3 มุมมอง ดังนี้

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

ลองแก้ไขข้อบกพร่องของการโหลดแบบคาดเดาในหน้าเดโมนี้

1. เปิด DevTools ในหน้าเว็บ แล้วไปที่แอปพลิเคชัน > บริการที่ทำงานอยู่เบื้องหลัง > การโหลดแบบคาดการณ์ หากไม่เห็นการโหลดแบบคาดเดาที่หน้าเว็บเริ่มต้น ให้โหลดหน้านั้นซ้ำ

   

2. หน้าเริ่มต้นของเดโมแสดงผลล่วงหน้า 2 หน้า แต่แสดงผลล่วงหน้าหน้าหนึ่งไม่สำเร็จ คลิกดูการคาดเดาทั้งหมด

3. ในส่วนการคาดคะเน ให้เลือกการคาดคะเนที่มีสถานะไม่สำเร็จเพื่อดูเหตุผลที่ไม่สำเร็จในส่วนที่มีรายละเอียดที่ด้านล่าง

   

   ในกรณีนี้ การแสดงผลล่วงหน้าไม่สำเร็จเนื่องจากไม่มีหน้า /next3.html ในเว็บไซต์

4. เปิดส่วนกฎ แล้วคลิกสถานะเพื่อดูชุดกฎที่ด้านล่าง การคลิกลิงก์ชุดกฎจะนำคุณไปยังแผงองค์ประกอบและแสดงตำแหน่งที่กำหนดกฎการคาดการณ์

   

   เคล็ดลับ: คุณแก้ไขกฎในหน้าจอนี้หรือในแผงองค์ประกอบไม่ได้ เนื่องจากเครื่องมือสำหรับนักพัฒนาเว็บจะไม่เก็บการเปลี่ยนแปลง DOM ที่กำหนดเองไว้เมื่อโหลดหน้าเว็บ คุณต้องแก้ไขกฎที่แหล่งที่มาโดยตั้งค่าเวิร์กスペース หรือจำลองการเปลี่ยนแปลงโดยลบล้างเนื้อหา

ดูคำแนะนำโดยละเอียดเพิ่มเติมได้ที่การแก้ไขข้อบกพร่องกฎการคาดคะเน

การรับส่งข้อความ Push

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

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ เช่น ในหน้าเดโมนี้

2. ไปที่แอปพลิเคชัน > บริการที่ทำงานอยู่เบื้องหลัง > การรับส่งข้อความ Push แล้วคลิก บันทึก

   

3. ในหน้าเดโม ให้สลับเปิดใช้ข้อความ Push คลิกอนุญาตเมื่อได้รับข้อความแจ้ง ให้พิมพ์ข้อความแล้วส่ง DevTools จะบันทึกเหตุการณ์ข้อความ Push ลงในตาราง

   

   หมายเหตุ: นอกจากนี้ ในแอปพลิเคชัน > Service Workers คุณสามารถคลิก Push เพื่อส่งการแจ้งเตือนการทดสอบจากเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

4. คลิกเหตุการณ์เพื่อดูรายละเอียดของเหตุการณ์นั้นในพื้นที่ด้านล่างตาราง

5. คุณสามารถปิดเครื่องมือสำหรับนักพัฒนาเว็บและปล่อยให้การบันทึกทำงานได้สูงสุด 3 วัน หากต้องการหยุดบันทึก ให้คลิก หยุด

Reporting API

ข้อผิดพลาดบางอย่างเกิดขึ้นเฉพาะในเวอร์ชันที่ใช้งานจริง คุณจะไม่พบข้อบกพร่องเหล่านี้ในเครื่องหรือระหว่างการพัฒนา เนื่องจากผู้ใช้ เครือข่าย และอุปกรณ์จริงจะเปลี่ยนแปลงเกม

ตัวอย่างเช่น สมมติว่าเว็บไซต์ใหม่ของคุณใช้ซอฟต์แวร์ของบุคคลที่สามที่ใช้ document.write() เพื่อโหลดสคริปต์ที่สำคัญ ผู้ใช้ใหม่ทั่วโลกเปิดเว็บไซต์ของคุณ แต่การเชื่อมต่ออาจช้ากว่าที่คุณทดสอบ คุณอาจไม่รู้ตัวว่าเว็บไซต์เริ่มใช้งานไม่ได้เนื่องจาก Chrome แทรกแซง document.write() ในเครือข่ายที่ช้า หรือคุณอาจต้องคอยติดตาม API ที่เลิกใช้งานแล้วหรือกำลังจะเลิกใช้งานซึ่งโค้ดเบสของคุณอาจใช้อยู่

Reporting API ได้รับการออกแบบมาเพื่อช่วยคุณตรวจสอบการเรียก API ที่เลิกใช้งาน การละเมิดความปลอดภัยของหน้าเว็บ และอื่นๆ คุณสามารถตั้งค่าการรายงานตามที่อธิบายไว้ในตรวจสอบเว็บแอปพลิเคชันด้วย Reporting API

วิธีดูรายงานที่สร้างขึ้นจากหน้าเว็บ

1. ไปที่ chrome://flags/#enable-experimental-web-platform-features แล้วตั้งค่าฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลองเป็นเปิดใช้ แล้วรีสตาร์ท Chrome

2. เปิด DevTools แล้วไปที่แอปพลิเคชัน > บริการเบื้องหลัง > Reporting API เช่น คุณสามารถดูรายงานในหน้าเดโมนี้ได้

   

แท็บ Reporting API แบ่งออกเป็น 3 ส่วนดังนี้

• ตารางรายงานที่มีข้อมูลต่อไปนี้ในรายงานแต่ละฉบับ
  • URL ที่ทําให้เกิดการสร้างรายงาน
  • ประเภทการละเมิด
  • สถานะรายงาน
  • ปลายทางปลายทาง
  • การประทับเวลาที่สร้างเมื่อ
  • เนื้อหาของรายงาน
• ส่วนแสดงตัวอย่างเนื้อหารายงาน หากต้องการดูตัวอย่างเนื้อหารายงาน ให้คลิกรายงานในตารางรายงาน
• ส่วนอุปกรณ์ปลายทางที่มีภาพรวมของอุปกรณ์ปลายทางทั้งหมดที่กำหนดค่าไว้ในส่วนหัว Reporting-Endpoints

รายงานสถานะ

คอลัมน์สถานะจะแจ้งให้ทราบว่า Chrome ส่งรายงานสำเร็จ กำลังส่ง หรือส่งไม่สำเร็จ

สถานะ	คำอธิบาย
Success	เบราว์เซอร์ส่งรายงานแล้ว และปลายทางตอบกลับด้วยรหัสสําเร็จ (200 หรือรหัสการตอบกลับสําเร็จอื่น 2xx)
Pending	เบราว์เซอร์กำลังพยายามส่งรายงาน
Queued	ระบบสร้างรายงานแล้ว แต่เบราว์เซอร์ยังไม่ได้พยายามส่งรายงาน รายงานจะปรากฏเป็น Queued ในกรณีใดกรณีหนึ่งต่อไปนี้ รายงานนี้เป็นรายงานใหม่และเบราว์เซอร์กำลังรอดูว่าจะมีรายงานอื่นๆ เข้ามาอีกหรือไม่ก่อนที่จะพยายามส่ง รายงานนี้ไม่ใช่รายงานใหม่ เนื่องจากเบราว์เซอร์ได้พยายามส่งรายงานนี้แล้วแต่ไม่สําเร็จ และกำลังรอก่อนที่จะลองอีกครั้ง
MarkedForRemoval	หลังจากพยายามส่งอีกครั้งเป็นเวลานาน (Queued) เบราว์เซอร์ได้หยุดพยายามส่งรายงานและจะนํารายงานออกจากรายการรายงานที่จะส่งในไม่ช้า

ระบบจะนำรายงานออกหลังจากผ่านไประยะหนึ่ง ไม่ว่าจะส่งรายงานสำเร็จหรือไม่ก็ตาม

ประเด็นสำคัญ: สถานะ Queued ไม่ได้ให้ข้อมูลเสมอไป เนื่องจากไม่ได้ระบุอย่างแน่ชัดว่าการส่งล้มเหลวหรือยังไม่ได้ลองส่ง การใช้ความล่าช้าในการรายงานสั้นๆจะช่วยได้ ในกรณีที่รายงานยังคงเป็น Queued แสดงว่าการส่งไม่สําเร็จ