เมื่อคุณส่งคำขอจากเว็บเซิร์ฟเวอร์ ก็มีความเป็นไปได้ที่จะเกิดความล้มเหลว ซึ่งอาจเป็นเพราะผู้ใช้ขาดการเชื่อมต่อ หรือเซิร์ฟเวอร์ระยะไกลขัดข้อง
แม้ว่าเอกสารประกอบนี้จะมุ่งเน้นที่การจัดการคำขอ GET
ใน Service Worker เป็นหลัก แต่ก็อาจมีวิธีอื่นๆ เช่น POST
, PUT
หรือ DELETE
เข้ามาเกี่ยวข้อง วิธีการเหล่านี้มักใช้ในการสื่อสารกับ API แบ็กเอนด์เพื่อให้ข้อมูลสำหรับเว็บแอป เมื่อคำขอเหล่านี้ไม่สำเร็จเมื่อไม่มี Service Worker ผู้ใช้จะต้องลองส่งคำขออีกครั้งด้วยตนเองเมื่อกลับมาออนไลน์อีกครั้ง ซึ่งนั่นไม่ใช่สิ่งที่ผู้ใช้อาจจำเสมอไป
หากอธิบายเกี่ยวกับแอปพลิเคชันของคุณ และหากมี Service Worker รวมอยู่ด้วย คุณควรลองส่งคำขอที่ล้มเหลวอีกครั้งเมื่อผู้ใช้กลับมาออนไลน์ BackgroundSync API นำเสนอวิธีแก้ไขปัญหานี้ เมื่อ Service Worker ตรวจพบคำขอเครือข่ายที่ล้มเหลว โปรแกรมสามารถลงทะเบียนเพื่อรับเหตุการณ์ sync
เมื่อเบราว์เซอร์ตรวจพบว่าการเชื่อมต่อกลับมาเป็นปกติ ระบบส่งเหตุการณ์ sync
ได้แม้ว่าผู้ใช้จะออกจากหน้าที่ลงทะเบียนไว้แล้ว ซึ่งทำให้มีประสิทธิภาพมากกว่าวิธีอื่นๆ ในการลองส่งคำขอที่ไม่สำเร็จซ้ำ
Workbox จะแยก API นี้ด้วยโมดูล workbox-background-sync
ซึ่งทำให้ BackgroundSync API ใช้งานกับโมดูล Workbox อื่นๆ ได้ง่ายขึ้น นอกจากนี้ยังเป็นการกำหนดกลยุทธ์สำรองสำหรับเบราว์เซอร์ที่ยังไม่รองรับ BackgroundSync ด้วย
การใช้งานพื้นฐาน
ระบบจะส่งออก BackgroundSyncPlugin
จากโมดูล workbox-background-sync
ซึ่งใช้เพื่อจัดคิวคำขอที่ล้มเหลว แล้วลองอีกครั้งเมื่อเหตุการณ์ sync
เริ่มทำงานในอนาคต
import {BackgroundSyncPlugin} from 'workbox-background-sync';
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName', {
maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes)
});
registerRoute(
/\/api\/.*\/*.json/,
new NetworkOnly({
plugins: [bgSyncPlugin]
}),
// An optional third parameter specifies the request method
'POST'
);
ในที่นี้ จะมีการใช้ BackgroundSyncPlugin
กับเส้นทางที่ตรงกับคำขอ POST กับเส้นทาง API ซึ่งดึงข้อมูล JSON หากผู้ใช้ออฟไลน์อยู่ BackgroundSyncPlugin
จะลองส่งคำขออีกครั้งเมื่อผู้ใช้กลับมาออนไลน์อีกครั้ง แต่จะใช้เวลาไม่เกิน 1 วันเท่านั้น
การใช้งานขั้นสูง
workbox-background-sync
ยังมีคลาส Queue
ซึ่งคุณสามารถสร้างอินสแตนซ์และเพิ่มคำขอที่ล้มเหลวได้ เช่นเดียวกับกรณีของ BackgroundSyncPlugin
คำขอที่ล้มเหลวจะได้รับการจัดเก็บใน IndexedDB และจะทำการทดลองเมื่อเบราว์เซอร์คิดว่าการเชื่อมต่อกลับมาใช้งานได้อีกครั้ง
กำลังสร้างคิว
หากต้องการสร้างคิว ให้สร้างอินสแตนซ์ Queue
ด้วยสตริงที่แสดงชื่อคิวดังนี้
import {Queue} from 'workbox-background-sync';
const queue = new Queue('myQueueName');
ชื่อคิวใช้เป็นส่วนหนึ่งของชื่อแท็กที่สร้างโดยเมธอด register()
ซึ่งจัดเตรียมโดย SyncManager
ส่วนกลาง และยังเป็นชื่อที่ใช้สำหรับ Object Store ที่ฐานข้อมูล IndexedDB มีให้
การเพิ่มคำขอลงในคิว
หลังจากสร้างอินสแตนซ์ Queue
แล้ว คุณจะเพิ่มคำขอที่ล้มเหลวไปยังอินสแตนซ์นั้นได้โดยใช้เมธอด pushRequest()
ดังนี้
import {Queue} from 'workbox-background-sync';
const queue = new Queue('myQueueName');
self.addEventListener('fetch', (event) => {
// Add in your own criteria here to return early if this
// isn't a request that should use background sync.
if (event.request.method !== 'POST') {
return;
}
const bgSyncLogic = async () => {
try {
const response = await fetch(event.request.clone());
return response;
} catch (error) {
await queue.pushRequest({request: event.request});
return error;
}
};
event.respondWith(bgSyncLogic());
});
เมื่อเพิ่มไปยังคิว คำขอจะลองใหม่โดยอัตโนมัติเมื่อ Service Worker ได้รับเหตุการณ์ sync
เนื่องจากเบราว์เซอร์คิดว่าเครือข่ายพร้อมใช้งานอีกครั้ง เบราว์เซอร์ที่ไม่รองรับ BackgroundSync API จะลองส่งคำขออีกครั้งทุกครั้งที่ Service Worker เริ่มทำงาน ซึ่งเป็นวิธีที่มีประสิทธิภาพน้อยกว่าในการลองส่งคำขอที่ล้มเหลวอีกครั้ง แต่จะเป็นการสำรองการจัดเรียง
กำลังทดสอบ workbox-background-sync
การทดสอบการซิงค์ในเบื้องหลังอาจเป็นเรื่องยาก แต่สามารถทำได้ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แนวทางที่ดีที่สุดในปัจจุบันมีลักษณะดังต่อไปนี้
- โหลดหน้าเว็บที่ลงทะเบียน Service Worker
- ปิดการเชื่อมต่อเครือข่ายของคอมพิวเตอร์หรือปิดเว็บเซิร์ฟเวอร์ อย่าใช้การสลับออฟไลน์ใน Chrome DevTools ช่องทำเครื่องหมายออฟไลน์จะมีผลกับคำขอจากหน้าเว็บเท่านั้น แต่คำขอของโปรแกรมทำงานของบริการจะยังคงดำเนินต่อไป
- สร้างคำขอเครือข่ายที่ควรอยู่ในคิวด้วย
workbox-background-sync
คุณสามารถตรวจสอบคำขอที่เข้าคิวได้โดยดูในChrome DevTools > Application > IndexedDB > workbox-background-sync > requests
- กู้คืนการเชื่อมต่อเครือข่ายหรือเปิดเว็บเซิร์ฟเวอร์อีกครั้ง
- บังคับเหตุการณ์
sync
ก่อนกำหนดโดยไปที่Chrome DevTools > Application > Service Workers
ป้อนชื่อแท็กของworkbox-background-sync:<your queue name>
โดยที่<your queue name>
คือชื่อของคิวที่คุณตั้งไว้ - คลิกปุ่ม "ซิงค์"
- ตอนนี้คุณน่าจะเห็นคำขอเครือข่ายที่ล้มเหลวก่อนหน้านี้ได้ซ้ำและดำเนินการแล้วเสร็จ ดังนั้นที่เก็บ IndexedDB ควรว่างเปล่าเนื่องจากมีการเล่นคำขอซ้ำสำเร็จแล้ว
บทสรุป
การใช้ workbox-background-sync
เพื่อลองใหม่คำขอเครือข่ายที่ล้มเหลวอาจเป็นวิธีที่ยอดเยี่ยมในการปรับปรุงประสบการณ์ของผู้ใช้และความน่าเชื่อถือของแอป เช่น การอนุญาตให้ผู้ใช้ส่งคำขอ API ที่ล้มเหลวอีกครั้ง เพื่อไม่ให้ข้อมูลที่ต้องการส่งไปยัง API ของคุณสูญหายไป นอกจากนี้ยังใช้เพื่อเติมเต็มช่องว่างในข้อมูลของคุณเอง เช่น ข้อมูลวิเคราะห์ได้ อันที่จริงแล้ว โมดูล workbox-google-analytics
ใช้ workbox-background-sync
ขั้นสูงเพื่อลองส่งคำขอที่ล้มเหลวอีกครั้งสำหรับการส่งข้อมูลไปยัง Google Analytics
ไม่ว่ากรณีการใช้งานของคุณจะเป็นอย่างไร workbox-background-sync
จะช่วยให้งานประเภทนี้ง่ายขึ้น ปรับปรุงประสบการณ์การใช้งานของนักพัฒนาซอฟต์แวร์ และมอบโอกาสให้คุณปรับปรุงประสบการณ์ของผู้ใช้และฟังก์ชันการทำงานของเว็บแอปพลิเคชัน