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

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

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

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

สิ่งที่ต้องจัดการกับโปรแกรมทำงานของบริการที่มีข้อบกพร่องคือการทำให้ Service Worker แบบไม่มีการดำเนินการพื้นฐานที่ติดตั้งและเปิดใช้งานทันทีโดยไม่มีเครื่องจัดการเหตุการณ์ 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 ที่ไม่มีการดำเนินการใช้งานได้ โปรดตรวจสอบว่า URL ของโปรแกรมทำงานของบริการจะไม่เปลี่ยนแปลง มิเช่นนั้น Service Worker ที่ไม่มีการดำเนินการจะทำงานพร้อมกับโปรแกรมทำงานของบริการที่มีข้อบกพร่อง และปัญหาจะยังคงอยู่

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

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

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

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

มาตรการเพิ่มเติมที่ต้องดำเนินการ

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

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

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

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

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

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

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

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

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

ความเสียหายไม่ใช่แบบถาวร

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

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