ส่งคำขอซ้ำเมื่อกลับมาออนไลน์

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

แม้ว่าเอกสารประกอบนี้จะมุ่งเน้นที่การจัดการคำขอ 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 แนวทางที่ดีที่สุดในปัจจุบันมีลักษณะดังต่อไปนี้

  1. โหลดหน้าเว็บที่ลงทะเบียน Service Worker
  2. ปิดการเชื่อมต่อเครือข่ายของคอมพิวเตอร์หรือปิดเว็บเซิร์ฟเวอร์ อย่าใช้การสลับออฟไลน์ใน Chrome DevTools ช่องทำเครื่องหมายออฟไลน์จะมีผลกับคำขอจากหน้าเว็บเท่านั้น แต่คำขอของโปรแกรมทำงานของบริการจะยังคงดำเนินต่อไป
  3. สร้างคำขอเครือข่ายที่ควรอยู่ในคิวด้วย workbox-background-sync คุณสามารถตรวจสอบคำขอที่เข้าคิวได้โดยดูใน Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests
  4. กู้คืนการเชื่อมต่อเครือข่ายหรือเปิดเว็บเซิร์ฟเวอร์อีกครั้ง
  5. บังคับเหตุการณ์ sync ก่อนกำหนดโดยไปที่ Chrome DevTools > Application > Service Workers ป้อนชื่อแท็กของ workbox-background-sync:<your queue name> โดยที่ <your queue name> คือชื่อของคิวที่คุณตั้งไว้
  6. คลิกปุ่ม "ซิงค์"
    ภาพหน้าจอของยูทิลิตีการซิงค์พื้นหลังในแผงแอปพลิเคชันของเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome มีการระบุเหตุการณ์การซิงค์สำหรับคิวของ &quot;myQueueName&quot; สำหรับโมดูล &quot;workbox-background-sync&quot;
  7. ตอนนี้คุณน่าจะเห็นคำขอเครือข่ายที่ล้มเหลวก่อนหน้านี้ได้ซ้ำและดำเนินการแล้วเสร็จ ดังนั้นที่เก็บ IndexedDB ควรว่างเปล่าเนื่องจากมีการเล่นคำขอซ้ำสำเร็จแล้ว

บทสรุป

การใช้ workbox-background-sync เพื่อลองใหม่คำขอเครือข่ายที่ล้มเหลวอาจเป็นวิธีที่ยอดเยี่ยมในการปรับปรุงประสบการณ์ของผู้ใช้และความน่าเชื่อถือของแอป เช่น การอนุญาตให้ผู้ใช้ส่งคำขอ API ที่ล้มเหลวอีกครั้ง เพื่อไม่ให้ข้อมูลที่ต้องการส่งไปยัง API ของคุณสูญหายไป นอกจากนี้ยังใช้เพื่อเติมเต็มช่องว่างในข้อมูลของคุณเอง เช่น ข้อมูลวิเคราะห์ได้ อันที่จริงแล้ว โมดูล workbox-google-analytics ใช้ workbox-background-sync ขั้นสูงเพื่อลองส่งคำขอที่ล้มเหลวอีกครั้งสำหรับการส่งข้อมูลไปยัง Google Analytics

ไม่ว่ากรณีการใช้งานของคุณจะเป็นอย่างไร workbox-background-sync จะช่วยให้งานประเภทนี้ง่ายขึ้น ปรับปรุงประสบการณ์การใช้งานของนักพัฒนาซอฟต์แวร์ และมอบโอกาสให้คุณปรับปรุงประสบการณ์ของผู้ใช้และฟังก์ชันการทำงานของเว็บแอปพลิเคชัน