תיבת עבודה-רקע-סנכרון

כששולחים נתונים לשרת אינטרנט, לפעמים הבקשות נכשלות. זה יכול לקרות בגלל שהמשתמש איבד את הקישוריות, או בגלל שהשרת מושבת. לא תמיד כדאי לנסות לשלוח את הבקשות שוב מאוחר יותר.

ה-BackgroundSync API החדש הוא פתרון אידיאלי לבעיה הזו. כש-Service Worker מזהה שבקשת רשת נכשלה, הוא יכול להירשם לקבלת אירוע sync, שמוסר כשהדפדפן מזהה שהקישוריות ממשיכה לחזור. שימו לב שאפשר להעביר את אירוע הסנכרון גם אם המשתמש יצא מהאפליקציה, ולכן הוא יעיל הרבה יותר מהשיטה המסורתית של ניסיון חוזר של בקשות שנכשלו.

השירות 'סנכרון ברקע של Workbox' נועד להקל על השימוש ב-BackgroundSync API ולשלב את השימוש בו עם מודולים אחרים של Workbox. היא גם מיישמת אסטרטגיית גיבוי לדפדפנים שעדיין לא הטמיעו את BackgroundSync.

דפדפנים שתומכים ב-BackgroundSync API ישיבו בשמכם באופן אוטומטי בקשות שנכשלו במרווח הזמן שמנוהל על ידי הדפדפן, סביר להניח שישתמשו בהשהיה מעריכית לפני ניסיון חוזר (exponential backoff) בין ניסיונות ההפעלה החוזרת. בדפדפנים שלא תומכים במקור ב-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 מתחבר אל קריאה חוזרת (callback) של הפלאגין 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.

שימוש מתקדם

סנכרון ברקע של תיבת העבודה גם מספק מחלקה Queue, שאליה אפשר ליצור ולהוסיף בקשות שנכשלו. הבקשות שנכשלו מאוחסנות ב-IndexedDB ומתבצעות שוב כשהדפדפן מזהה שהקישוריות משוחזרת (כלומר, כשהוא מקבל את אירוע הסנכרון).

יצירת תור

כדי ליצור תור לסנכרון ברקע של תיבת עבודה, עליך ליצור אותו עם שם תור (שחייב להיות ייחודי למקור שלך):

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());
});

כשהבקשה תתווסף לתור, המערכת תנסה שוב באופן אוטומטי כש-service worker מקבל את האירוע sync (דבר שמתרחש כשהדפדפן חושב שהקישוריות תשוחזר). דפדפנים שלא תומכים ב-BackgroundSync API מנסים שוב את התור בכל פעם שמופעלת Service Worker. לשם כך, צריך להפעיל את הדף ששולט ב-Service Worker, ולכן זה לא יהיה אפקטיבי באותה מידה.

בדיקת סנכרון ברקע של תיבת העבודה

למרבה הצער, הבדיקה של BackgroundSync היא לא אינטואיטיבית במידה מסוימת וקשה מכמה סיבות.

הדרך הטובה ביותר לבדוק את ההטמעה היא:

1. טוענים דף ורושמים את קובץ השירות (service worker).
2. מכבים את הרשת של המחשב או מכבים את שרת האינטרנט.
   • אין להשתמש בכלי הפיתוח של Chrome במצב אופליין. תיבת הסימון של מצב אופליין בכלי הפיתוח משפיעה רק על בקשות מהדף. בקשות של 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> צריך להיות שם התור שהגדרתם, ולוחצים על הלחצן Sync.

   

6. אתם אמורים לראות שמתבצעות בקשות רשת עבור הבקשות שנכשלו, והנתונים ב-IndexedDB אמורים להיות ריקים כי הבקשות הופעלו מחדש בהצלחה.