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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

   

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

   

4. คลิกกิจกรรมเพื่อดูรายละเอียดในพื้นที่ว่างใต้ตาราง

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

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

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

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

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

   

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

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

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

   

4. คลิกกิจกรรมเพื่อดูรายละเอียดในพื้นที่ว่างใต้ตาราง

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

(ทดลอง) การลดการติดตามการเข้าออก

หมายเหตุ: ฟีเจอร์นี้เป็นฟีเจอร์ทดลองที่พร้อมใช้งานใน Chrome เวอร์ชัน 115

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

หากต้องการบังคับใช้การลดการติดตาม ให้ทำดังนี้

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

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

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

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

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

   

3. ในหน้าสาธิต ให้คลิกตั้งเวลาการแจ้งเตือนและอนุญาตเมื่อมีข้อความแจ้ง

4. รอให้การแจ้งเตือนปรากฏขึ้น เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกเหตุการณ์การแจ้งเตือนลงในตาราง

   

5. คลิกกิจกรรมเพื่อดูรายละเอียดในพื้นที่ว่างใต้ตาราง

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

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

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

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

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

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

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

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

   

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

3. ในส่วนการคาดเดา ให้เลือกการคาดเดาที่มีสถานะล้มเหลวเพื่อดูส่วนเหตุผลที่ล้มเหลวซึ่งมีข้อมูลโดยละเอียดที่ด้านล่าง

   

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

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

   

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

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

การรับส่งข้อความพุช

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

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

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

   

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

   

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

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

   

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

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

สถานะรายงาน

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

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

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

ประเด็นหลัก: สถานะ Queued อาจไม่เป็นประโยชน์เสมอไป เนื่องจากไม่ได้ระบุอย่างเจาะจงว่าการส่งล้มเหลวหรือยังไม่ได้พยายาม การใช้ความล่าช้าในการรายงานที่สั้นสามารถช่วยได้: รายงานที่มีระยะเวลา Queued ในกรณีนั้นมีแนวโน้มบ่งชี้ว่าการส่งล้มเหลว