إعادة محاولة إرسال الطلبات عند الاتصال بالإنترنت مجددًا

عند تقديم طلبات من خادم ويب، يمكن أن يحدث الفشل. قد يرجع السبب في ذلك إلى فقد المستخدم للاتصال، أو تعطل الخادم البعيد.

على الرغم من أنّ هذا المستند يركّز بشكل أساسي على معالجة طلبات GET لدى مشغّل الخدمات، قد يتم استخدام طرق أخرى، مثل POST أو PUT أو DELETE. غالبًا ما يتم استخدام هذه الطرق للاتصال بواجهات برمجة التطبيقات الخلفية لتوفير بيانات لتطبيق ويب. وعندما يتعذّر تنفيذ هذه الطلبات في حال عدم توفّر عامل خدمة، يجب على المستخدم إعادة المحاولة يدويًا عند الاتصال بالإنترنت مجددًا، وهذا أمر لا يتذكره المستخدمون دائمًا.

إذا كان هذا يصف تطبيقك، وإذا كان هناك عامل خدمة متداخل، فالخيار المثالي هو إعادة محاولة إرسال الطلبات التي تعذّر إرسالها عند معاودة اتصال المستخدم بالإنترنت. توفر واجهة برمجة تطبيقات BackgroundSync حلاً لهذه المشكلة. عندما يرصد عامل تشغيل طلب شبكة تعذّر إتمامه، يمكنه التسجيل لتلقّي حدث sync عندما يكتشف المتصفّح عودة الاتصال. يمكن عرض حدث sync حتى إذا غادر المستخدم الصفحة التي سجّلته، ما يزيد من فعاليته مقارنةً بالطرق الأخرى لإعادة محاولة تنفيذ الطلبات التي تعذّر تنفيذها.

يستخرج Workbox واجهة برمجة التطبيقات هذه من خلال وحدة 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 مع مسار واجهة برمجة تطبيقات يسترد بيانات JSON. إذا كان المستخدم غير متصل بالإنترنت، سيعيد BackgroundSyncPlugin محاولة إرسال الطلب عند معاودة اتصاله بالإنترنت، ولكن لمدة تصل إلى يوم واحد فقط.

تحذير: بما أنّ BackgroundSyncPlugin يستقر في معاودة الاتصال بالمكوّن الإضافي FetchDidFail، يجب أن تكون الطلبات التي تعذّر تنفيذها ناتجة عن عطل في الشبكة. لن تتم إعادة محاولة معالجة الطلبات التي تؤدي إلى ظهور حالة الخطأ على المستوى 400 أو 500. لإعادة محاولة إرسال الطلبات التي أدّت إلى حدوث هذه الأنواع من الإخفاقات، جرِّب إضافة مكوّن FetchDidSucceed إضافي إلى استراتيجيتك.

الاستخدام المتقدّم

توفّر 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". يسير النهج الأفضل الحالي على النحو التالي:

1. حمِّل صفحة تسجِّل مشغّل الخدمات.
2. أوقِف اتصال شبكة جهاز الكمبيوتر أو أوقِف خادم الويب. لا تستخدِم زر التبديل بلا اتصال بالإنترنت في "أدوات مطوري البرامج في Chrome". لا يؤثر مربّع الاختيار بلا اتصال بالإنترنت إلا في الطلبات الواردة من الصفحة، ولكن ستستمر معالجة طلبات عاملي الخدمة.
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" لإعادة محاولة إرسال طلبات الشبكة التي تعذّر تنفيذها، يمكنك تحسين تجربة المستخدم وموثوقية تطبيقك، مثل السماح للمستخدمين بإعادة إرسال الطلبات التي تعذّر إرسالها من واجهة برمجة التطبيقات كي لا يفقدوا البيانات المطلوب إرسالها إلى واجهة برمجة التطبيقات الخاصة بك. يمكن استخدامها أيضًا لسد الثغرات في بياناتك الخاصة، مثل التحليلات. في الواقع، تستخدم وحدة workbox-google-analytics السمة workbox-background-sync في الخيارات لإعادة محاولة إرسال الطلبات التي تعذّر إرسالها إلى "إحصاءات Google".

وأيًا كانت حالة استخدامك، يعمل workbox-background-sync على تبسيط هذا النوع من المهام لتحسين تجربة المطوِّر ومنحك المزيد من الفرص لتحسين تجربة مستخدم تطبيق الويب ووظائفه.