บางครั้งมีการติดตั้งใช้งาน 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);
});
});
});
โปรแกรมทำงานของบริการนี้จะติดตั้งและเปิดใช้งานทันทีโดยการเรียกใช้ self.skipWaiting()
ในเหตุการณ์ install
นอกจากนี้ คุณยังใช้โค้ดเพิ่มเติมในเหตุการณ์ activate
เพื่อบังคับให้โหลดแท็บอื่นที่เปิดอยู่ซ้ำได้ด้วย WindowClient
ที่ Service Worker ควบคุมอยู่
โปรแกรมทำงานของบริการที่ไม่มีการดำเนินการสำคัญมากคือไม่มีเครื่องจัดการเหตุการณ์ fetch
เมื่อโปรแกรมทำงานของบริการไม่ได้จัดการคำขอ คำขอเหล่านั้นจะส่งผ่านไปยังเบราว์เซอร์เสมือนว่าไม่มีโปรแกรมทำงานของบริการอยู่
เมื่อมีการทำให้ Service Worker ที่ไม่มีการดำเนินการแล้ว คุณจะแก้ไขโปรแกรมทำงานของบริการที่มีข้อบกพร่องและทำให้ใช้งานได้เป็นการอัปเดตในภายหลัง
วิธีนี้ได้ผลส่วนหนึ่งเนื่องจากเบราว์เซอร์มีการป้องกันที่แข็งแกร่งจากการวาง Service Worker ไว้ในแคช HTTP และเพราะเบราว์เซอร์เหล่านี้ดำเนินการตรวจสอบเนื้อหาของโปรแกรมทำงานแบบไบต์ต่อไบต์เพื่อให้ทราบการอัปเดต ค่าเริ่มต้นเหล่านี้ช่วยให้คุณสามารถใช้การแทนที่แบบ No-op สำหรับโปรแกรมทำงานของบริการที่มีข้อบกพร่อง เพื่อแก้ไขปัญหาได้อย่างรวดเร็ว
มาตรการเพิ่มเติมที่ต้องดำเนินการ
การใช้ 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 จัดการเฉพาะคำขอที่คาดไว้เท่านั้น ทดสอบบ่อยๆ ในการทดสอบ และใช้การอัปเดตเมื่อมั่นใจเท่านั้น