جعبه کار-پس زمینه-همگام سازی

هنگامی که داده ها را به یک وب سرور ارسال می کنید، گاهی اوقات درخواست ها با شکست مواجه می شوند. ممکن است به این دلیل باشد که کاربر اتصال خود را از دست داده است، یا ممکن است به دلیل از کار افتادن سرور باشد. در هر صورت اغلب می خواهید درخواست ها را بعداً دوباره ارسال کنید.

BackgroundSync API جدید یک راه حل ایده آل برای این مشکل است. هنگامی که یک سرویس‌دهنده تشخیص می‌دهد که درخواست شبکه ناموفق بوده است، می‌تواند برای دریافت یک رویداد sync ثبت‌نام کند، که وقتی مرورگر فکر می‌کند اتصال بازگشته است، تحویل داده می‌شود. توجه داشته باشید که رویداد همگام‌سازی را می‌توان حتی در صورتی که کاربر برنامه را ترک کرده باشد ، تحویل داد، که آن را بسیار مؤثرتر از روش سنتی امتحان مجدد درخواست‌های ناموفق می‌کند.

Workbox Background Sync برای سهولت استفاده از BackgroundSync API و ادغام استفاده از آن با سایر ماژول های Workbox طراحی شده است. همچنین یک استراتژی بازگشتی برای مرورگرهایی که هنوز BackgroundSync را پیاده سازی نکرده اند، پیاده سازی می کند.

مرورگرهایی که از BackgroundSync API پشتیبانی می‌کنند، به‌طور خودکار درخواست‌های ناموفق را از طرف شما در بازه‌ای که توسط مرورگر مدیریت می‌شود، دوباره پخش می‌کنند، احتمالاً با استفاده از عقب‌نشینی نمایی بین تلاش‌های مجدد. در مرورگرهایی که به‌طور بومی از BackgroundSync API پشتیبانی نمی‌کنند، Workbox Background Sync به‌طور خودکار هر زمان که سرویس‌گر شما راه‌اندازی می‌شود، دوباره پخش می‌کند.

استفاده پایه

ساده‌ترین راه برای استفاده از همگام‌سازی پس‌زمینه، استفاده از 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() -ed توسط 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());
});

هنگامی که به صف اضافه می شود، درخواست به طور خودکار زمانی که سرویس دهنده رویداد sync را دریافت می کند مجدداً امتحان می شود (این اتفاق زمانی می افتد که مرورگر فکر می کند اتصال بازیابی شده است). مرورگرهایی که از BackgroundSync API پشتیبانی نمی‌کنند، هر بار که سرویس‌کار راه‌اندازی می‌شود، صف را دوباره امتحان می‌کنند. برای این کار باید صفحه کنترل کننده سرویس کار اجرا شود، بنابراین چندان موثر نخواهد بود.

آزمایش همگام‌سازی پس‌زمینه Workbox

متأسفانه، آزمایش BackgroundSync به دلایلی تا حدودی غیرمعمول و دشوار است.

بهترین روش برای آزمایش پیاده سازی، انجام موارد زیر است:

1. یک صفحه را بارگیری کنید و کارگر خدمات خود را ثبت کنید.
2. شبکه کامپیوتر خود را خاموش کنید یا وب سرور خود را خاموش کنید.
   • از CHROME DEVTOOLS آفلاین استفاده نکنید. چک باکس آفلاین در DevTools فقط بر درخواست‌های صفحه تأثیر می‌گذارد. درخواست‌های کارکنان خدمات ادامه خواهد یافت.
3. درخواست های شبکه ای را ایجاد کنید که باید با Workbox Background Sync در صف قرار گیرند.
   • می‌توانید با جستجو در Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests بررسی کنید که درخواست‌ها در صف قرار گرفته‌اند.
4. حالا شبکه یا وب سرور خود را روشن کنید.

5. با رفتن به Chrome DevTools > Application > Service Workers ، یک رویداد sync اولیه را اجباری کنید، نام برچسب workbox-background-sync:<your queue name> که در آن <your queue name> باید نام صفی باشد که تنظیم کرده‌اید، و سپس با کلیک بر روی دکمه "همگام سازی".

   

6. باید مشاهده کنید که درخواست‌های شبکه برای درخواست‌های ناموفق انجام می‌شوند و داده‌های IndexedDB اکنون باید خالی باشند زیرا درخواست‌ها با موفقیت دوباره پخش شده‌اند.