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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

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

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

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

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

    บันทึกเหตุการณ์ในแผงการดึงข้อมูลในเบื้องหลัง

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

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

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

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

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าสาธิตนี้
  2. ไปที่แอปพลิเคชัน > บริการในเบื้องหลัง > การซิงค์ในเบื้องหลัง แล้วคลิกบันทึก บันทึก

    แผงการซิงค์ในเบื้องหลัง

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

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

    บันทึกเหตุการณ์ในแผงการซิงค์ในเบื้องหลัง

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

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

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

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

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

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

การลดการติดตามการเข้าออกจะแสดงรายการการลบสถานะ

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

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

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าสาธิตนี้
  2. ไปที่แอปพลิเคชัน > บริการในเบื้องหลัง > การแจ้งเตือน แล้วคลิกบันทึก บันทึก

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

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

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

    บันทึกเหตุการณ์ในแผงการแจ้งเตือน

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

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

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

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

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

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

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

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

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

    URL โหลดแบบคาดเดาโดยหน้านี้ โดยสำเร็จ 2 รายการและไม่สำเร็จ 1 รายการ

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

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

    เลือกการคาดเดาที่ล้มเหลวแล้ว

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

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

    ส่วนกฎที่มีลิงก์ไปยังชุดกฎ

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

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

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

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าสาธิตนี้
  2. ไปที่แอปพลิเคชัน > บริการพื้นหลัง > Push Messaging แล้วคลิก บันทึก บันทึก

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

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

    รายงานที่แสดงใน Reporting API

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

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

สถานะรายงาน

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

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

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