وقتی از یک وب سرور درخواست می کنید، احتمال شکست وجود دارد. ممکن است به این دلیل باشد که کاربر اتصال خود را از دست داده است یا سرور راه دور از کار افتاده است.
در حالی که این مستندات بیشتر بر رسیدگی به درخواست‌های GET در یک سرویس‌دهنده متمرکز شده است، روش‌های دیگری مانند POST ، PUT یا DELETE ممکن است وارد عمل شوند. این روش ها اغلب برای برقراری ارتباط با API های پشتیبان برای ارائه داده ها برای یک برنامه وب استفاده می شوند. هنگامی که این درخواست‌ها در غیاب یک سرویس‌دهنده با شکست مواجه می‌شوند، وقتی کاربر دوباره آنلاین می‌شود، باید آنها را به‌صورت دستی مجدداً امتحان کند - و این چیزی نیست که کاربران همیشه به یاد داشته باشند که انجام دهند.
اگر این برنامه کاربردی شما را توصیف می کند - و اگر یک سرویس دهنده در ترکیب است - بهتر است وقتی کاربر دوباره آنلاین شد، دوباره درخواست های ناموفق را ارسال کنید. BackgroundSync API راه حلی برای این مشکل ارائه می دهد. هنگامی که یک سرویس‌دهنده درخواست شبکه ناموفق را تشخیص می‌دهد، می‌تواند برای دریافت یک رویداد sync ثبت نام کند، زمانی که مرورگر تشخیص دهد که اتصال بازگشته است. رویداد sync می‌تواند حتی اگر کاربر از صفحه‌ای که آن را ثبت کرده دور شده باشد، تحویل داده شود، و این امر آن را نسبت به روش‌های دیگر برای امتحان مجدد درخواست‌های ناموفق مؤثرتر می‌کند.
Workbox این 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());
});
هنگامی که به صف اضافه شد، درخواست‌ها به‌طور خودکار زمانی که سرویس‌دهنده رویداد sync را دریافت می‌کند، دوباره امتحان می‌شوند، زیرا مرورگر فکر می‌کند شبکه دوباره در دسترس است. مرورگرهایی که از BackgroundSync API پشتیبانی نمی‌کنند، هر بار که سرویس‌گر راه‌اندازی می‌شود، درخواست را مجدداً امتحان می‌کنند، که روشی کمتر مؤثر برای امتحان مجدد درخواست ناموفق است، اما یک نوع بازگشتی است.
تست workbox-background-sync
آزمایش رفتار همگام‌سازی پس‌زمینه ممکن است مشکل باشد، اما می‌توان آن را در ابزارهای توسعه‌دهنده کروم انجام داد. بهترین رویکرد فعلی چیزی شبیه به این است:
- صفحه ای را بارگیری کنید که کارمند خدمات شما را ثبت می کند.
- اتصال شبکه رایانه خود را خاموش کنید یا وب سرور خود را خاموش کنید. از کلید آفلاین در Chrome DevTools استفاده نکنید! چک باکس آفلاین فقط بر درخواست‌های صفحه تأثیر می‌گذارد، اما درخواست‌های کارگر خدمات همچنان ادامه خواهند داشت.
- درخواست‌های شبکه را ایجاد کنید که باید با
workbox-background-syncدر صف قرار گیرند. می‌توانید با جستجو درChrome DevTools > Application > IndexedDB > workbox-background-sync > requestsدرخواست‌هایی را که در صف قرار گرفته‌اند بررسی کنید. - اکنون یا اتصال شبکه را بازیابی کنید یا وب سرور خود را دوباره روشن کنید.
- با رفتن به
Chrome DevTools > Application > Service Workersیک رویدادsyncاولیه را اجباری کنید. نام تگworkbox-background-sync:<your queue name>، جایی که<your queue name>نام صفی است که تنظیم کرده‌اید. - روی دکمه "Sync" کلیک کنید.
- اکنون باید درخواست‌های شبکه را که قبلاً ناموفق بوده‌اند، دوباره امتحان کرده و بررسی کنید. در نتیجه، فروشگاه IndexedDB باید خالی باشد، زیرا درخواست‌ها با موفقیت دوباره پخش شده‌اند.
نتیجه گیری
استفاده از workbox-background-sync برای امتحان مجدد درخواست‌های شبکه ناموفق می‌تواند یک راه عالی برای بهبود تجربه کاربری و قابلیت اطمینان برنامه شما باشد، مانند اجازه دادن به کاربران برای ارسال مجدد درخواست‌های API ناموفق به طوری که داده‌های مورد نظر برای ارسال به شما را از دست ندهند. API. همچنین می‌توان از آن برای پر کردن شکاف‌های موجود در داده‌های خود، مانند تجزیه و تحلیل، استفاده کرد. در واقع، ماژول workbox-google-analytics از workbox-background-sync در زیر هود استفاده می‌کند تا درخواست‌های ناموفق برای ارسال داده‌ها به Google Analytics را دوباره امتحان کند.
هر موردی که استفاده می‌کنید، workbox-background-sync این نوع کارها را ساده می‌کند، تجربه توسعه‌دهنده شما را بهبود می‌بخشد و فرصت‌های بیشتری برای بهبود تجربه کاربری و عملکرد برنامه وب خود به شما می‌دهد.