מתבצע ניסיון חוזר לבקשות כשיהיה שוב חיבור לאינטרנט

כששולחים בקשות משרת אינטרנט, קיימת אפשרות לכשל. ייתכן שהסיבה לכך היא שהמשתמש התנתק מהרשת או שהשרת המרוחק מושבת.

מסמכי התיעוד האלה התמקדו בעיקר בטיפול בבקשות GET בקובץ שירות (service worker), אך ייתכן שכדאי להשתמש בשיטות אחרות כמו POST, PUT או DELETE. לרוב, השיטות האלה משמשות לתקשורת עם ממשקי API לקצה העורפי כדי לספק נתונים לאפליקציית אינטרנט. כשהבקשות האלה נכשלות כאשר אין קובץ שירות (service worker), המשתמש צריך לנסות אותן שוב באופן ידני כשיהיה שוב חיבור לאינטרנט – זה לא משהו שהמשתמשים תמיד זכרו לבצע.

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

תיבת העבודה מפשטת את ממשק ה-API הזה באמצעות המודול workbox-background-sync, מה שמקל על השימוש ב-BackgroundSync API עם מודולים אחרים של תיבת עבודה. המערכת מיישמת גם אסטרטגיית גיבוי לדפדפנים שעדיין לא תומכים ב-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 ינסה שוב את הבקשה כאשר המשתמש יתחבר שוב לאינטרנט, אבל רק למשך יום אחד לכל היותר.

שימוש מתקדם

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! תיבת הסימון של מצב אופליין משפיעה רק על בקשות מהדף, אבל בקשות של קובצי שירות (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. לוחצים על הלחצן 'סנכרון'.
   
7. אתם אמורים לראות עכשיו ניסיונות חיבור חוזרים שלא הועברו. כתוצאה מכך, ה-Store IndexedDB אמור להיות ריק כי הבקשות הופעלו מחדש בהצלחה.

סיכום

השימוש ב-workbox-background-sync כדי לנסות שוב בקשות רשת שנכשלו הוא דרך מצוינת לשפר את חוויית המשתמש ואת האמינות של האפליקציה. למשל, לאפשר למשתמשים לשלוח מחדש בקשות API שנכשלו כדי שהם לא יאבדו את הנתונים שהם רצו לשלוח ל-API. אתם יכולים להשתמש בו גם כדי למלא פערים בנתונים שלכם, כמו ניתוח נתונים. למעשה, במודול workbox-google-analytics נעשה שימוש ב-workbox-background-sync כדי לנסות שוב לשלוח בקשות שנכשלו לשליחת נתונים אל Google Analytics.

לא משנה איזה סוג של תרחיש מתאים לך, workbox-background-sync מפשט את המשימה הזו, משפר את חוויית הפיתוח שלך ומספק הזדמנויות נוספות לשיפור חוויית המשתמש והפונקציונליות של אפליקציית האינטרנט שלך.