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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    เลือกการคาดเดาที่ไม่สําเร็จ

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

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

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

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

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

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

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

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

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

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

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

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

รายงานสถานะ

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

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

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