workbox-background-sync

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

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

Workbox Background Sync ได้รับการออกแบบมาเพื่อใช้ BackgroundSync API ได้ง่ายขึ้นและผสานรวมการใช้งานกับโมดูล Workbox อื่นๆ รวมถึงใช้กลยุทธ์สำรองสำหรับเบราว์เซอร์ที่ยังไม่ได้ใช้ BackgroundSync ด้วย

เบราว์เซอร์ที่รองรับ BackgroundSync API จะเล่นคำขอที่ล้มเหลวซ้ำโดยอัตโนมัติในนามของคุณในช่วงเวลาที่เบราว์เซอร์จัดการ โดยมีแนวโน้มที่จะใช้การย้อนกลับแบบทวีคูณระหว่างการพยายามเล่นซ้ำ ในเบราว์เซอร์ที่ไม่รองรับ BackgroundSync API แล้ว Workbox Background Sync จะพยายามเล่นซ้ำโดยอัตโนมัติทุกครั้งที่ Service Worker เริ่มทำงาน

การใช้งานพื้นฐาน

วิธีที่ง่ายที่สุดในการใช้การซิงค์ในเบื้องหลังคือการใช้ Plugin ซึ่งจะจัดคิวคำขอที่ล้มเหลวโดยอัตโนมัติ แล้วลองอีกครั้งเมื่อเหตุการณ์ 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],
  }),
  'POST'
);

BackgroundSyncPlugin จะเชื่อมต่อกับ fetchDidFail โค้ดเรียกกลับและ fetchDidFail จะมีการเรียกใช้ก็ต่อเมื่อมีข้อยกเว้น ซึ่งน่าจะเป็นเพราะเครือข่ายล้มเหลว ซึ่งหมายความว่าระบบจะไม่ส่งคำขอซ้ำหากได้รับการตอบกลับซึ่งมีสถานะข้อผิดพลาด 4xx หรือ 5xx ที่ได้รับ หากต้องการลองคำขอทั้งหมดที่ส่งผลให้เกิด เช่น สถานะ 5xx อีกครั้ง คุณสามารถทำได้โดยเพิ่มปลั๊กอิน fetchDidSucceed ลงในกลยุทธ์ ดังนี้

const statusPlugin = {
  fetchDidSucceed: ({response}) => {
    if (response.status >= 500) {
      // Throwing anything here will trigger fetchDidFail.
      throw new Error('Server error.');
    }
    // If it's not 5xx, use the response as-is.
    return response;
  },
};

// Add statusPlugin to the plugins array in your strategy.

การใช้งานขั้นสูง

Workbox Background Sync ยังมีคลาส Queue ซึ่งคุณยืนยันและเพิ่มคำขอที่ล้มเหลวได้ ระบบจะจัดเก็บคำขอที่ล้มเหลวไว้ใน IndexedDB และจะลองใหม่เมื่อเบราว์เซอร์คิดว่าการเชื่อมต่อกลับมาใช้งานได้ (เช่น เมื่อได้รับเหตุการณ์การซิงค์)

การสร้างคิว

หากต้องการสร้างคิวการซิงค์เบื้องหลังของ Workbox คุณต้องสร้างคิวโดยใช้ชื่อคิว (ซึ่งต้องไม่ซ้ำกันสำหรับต้นทางของคุณ) โดยทำดังนี้

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

ชื่อคิวใช้เป็นส่วนหนึ่งของชื่อแท็กที่ได้รับ register() โดยส่วนกลาง SyncManager และยังใช้ชื่อเป็น Object Store สำหรับฐานข้อมูล IndexedDB

การเพิ่มคำขอลงในคิว

เมื่อสร้างอินสแตนซ์คิวแล้ว คุณจะเพิ่มคำขอที่ล้มเหลวไปยังอินสแตนซ์นั้นได้ คุณเพิ่มคำขอที่ไม่สำเร็จโดยเรียกใช้เมธอด .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());
});

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

การทดสอบการซิงค์ในเบื้องหลังของ Workbox

ที่น่าเศร้าที่การทดสอบ BackgroundSync นั้นค่อนข้างยุ่งยากและยากด้วยเหตุผลหลายประการ

วิธีที่ดีที่สุดในการทดสอบการติดตั้งใช้งานคือทำสิ่งต่อไปนี้

1. โหลดหน้าเว็บและลงทะเบียน Service Worker
2. ปิดเครือข่ายของคอมพิวเตอร์หรือปิดเว็บเซิร์ฟเวอร์
   • ห้ามใช้ Chrome DEVTOOLS แบบออฟไลน์ ช่องทำเครื่องหมายออฟไลน์ในเครื่องมือสำหรับนักพัฒนาเว็บจะส่งผลต่อคำขอจากหน้าเว็บเท่านั้น คำขอของ Service Worker จะต้องดำเนินการต่อไป
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. คุณควรจะเห็นคำขอเครือข่ายที่ได้รับการดำเนินการสำหรับคำขอที่ล้มเหลว และข้อมูล IndexedDB ควรว่างเปล่าเนื่องจากคำขอได้รับการเล่นซ้ำสำเร็จแล้ว