การนำโปรแกรมทำงานของบริการที่มีข้อบกพร่องออก

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

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

ทำให้ Service Worker ที่ไม่มีการดำเนินการใช้งานได้

สิ่งที่ต้องใช้เพื่อรับมือกับ Service Worker ที่มีข้อบกพร่องก็คือการติดตั้งใช้งาน Service Worker no-op ที่ติดตั้งและเปิดใช้งานทันทีโดยไม่มีเครื่องจัดการเหตุการณ์ fetch

// sw.js

self.addEventListener('install', () => {
  // Skip over the "waiting" lifecycle state, to ensure that our
  // new service worker is activated immediately, even if there's
  // another tab open controlled by our older service worker code.
  self.skipWaiting();
});

self.addEventListener('activate', () => {
  // Optional: Get a list of all the current open windows/tabs under
  // our service worker's control, and force them to reload.
  // This can "unbreak" any open windows/tabs as soon as the new
  // service worker activates, rather than users having to manually reload.
  self.clients.matchAll({
    type: 'window'
  }).then(windowClients => {
    windowClients.forEach((windowClient) => {
      windowClient.navigate(windowClient.url);
    });
  });
});

Service Worker นี้จะติดตั้งและเปิดใช้งานทันทีด้วยการเรียกใช้ self.skipWaiting() ในเหตุการณ์ install หรือจะปรับใช้โค้ดเพิ่มเติมในเหตุการณ์ activate เพื่อบังคับให้โหลดแท็บอื่นๆ ที่เปิดอยู่ซ้ำด้วย WindowClient ที่ Service Worker ควบคุมอยู่ก็ได้

สิ่งสำคัญคือโปรแกรมทำงานของบริการที่ไม่มีการดำเนินการ (No-op Service Worker) ไม่มีเครื่องจัดการเหตุการณ์ fetch เมื่อโปรแกรมทำงานของบริการไม่จัดการคำขอ คำขอเหล่านี้จะส่งผ่านไปยังเบราว์เซอร์ราวกับว่าไม่มีโปรแกรมทำงานของบริการอยู่ เมื่อมีการทำให้ Service Worker ที่ทำงานแบบ No-op สามารถแก้ไข Service Worker ที่มีข้อบกพร่องและทำให้ใช้งานได้เป็นอัปเดตในภายหลัง

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

มาตรการเพิ่มเติม

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

จะเกิดอะไรขึ้นหากคุณไม่ทราบ URL ของ Service Worker ตัวเก่า

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

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

สำหรับการติดตั้งใช้งาน Service Worker ในอนาคต ให้ใช้ชื่อเนื้อหาที่ไม่มีเวอร์ชัน (เช่น sw.js) ซึ่งจะทำให้สิ่งต่างๆ ซับซ้อนน้อยลงในภายหลัง

ตั้งค่าส่วนหัว Clear-Site-Data

บางเบราว์เซอร์จะยกเลิกการลงทะเบียน Service Worker ทั้งหมดสำหรับต้นทาง หาก ตั้งค่าส่วนหัวการตอบกลับ Clear-Site-Data ที่มีค่าเป็น 'storage' แล้ว อย่างไรก็ตาม มี 2-3 อย่างที่ควรทราบเมื่อทำเช่นนี้

• โปรดทราบว่าการดำเนินการนี้จะล้างพื้นที่เก็บข้อมูลทั้งหมดของต้นทางที่เกี่ยวข้อง ซึ่งรวมถึง localStorage, IndexedDB, sessionStorage และพื้นที่เก็บข้อมูลอื่นๆ (แต่ไม่ใช่แคช HTTP สำหรับต้นทาง)
• เบราว์เซอร์บางประเภทไม่รองรับส่วนหัวนี้

เนื่องจากจำนวนการรองรับส่วนหัวนี้รวมแล้วไม่ครอบคลุม จึงไม่สามารถพึ่งส่วนหัวเพื่อแก้ปัญหาได้ ดังนั้นขอแนะนำให้ดู Clear-Site-Data เป็นมาตรการเสริมนอกเหนือจากการทำให้ Service Worker ที่ไม่มีการดำเนินการใช้งานได้

ความเสียหายไม่ได้เป็นแบบถาวร

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

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