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

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

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

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

תיבת העבודה מפשטת את ה-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 ינסה שוב את הבקשה כשהמשתמש יהיה מחובר שוב לאינטרנט, אבל רק למשך יום אחד.

שימוש מתקדם

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

סיכום

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

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