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

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

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

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

يعمل "إطار العمل" على تلخيص واجهة برمجة التطبيقات هذه من خلال وحدة workbox-background-sync، ما يسهّل استخدام واجهة برمجة التطبيقات خلفيةSync API مع وحدات Workbox الأخرى. كما أنه ينفّذ استراتيجية احتياطية للمتصفحات التي لا تتيح BACKSync بعد.

الاستخدام الأساسي

يتم تصدير 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، لأنّ المتصفّح يعتقد أنّ الشبكة متاحة مرة أخرى. إنّ المتصفحات التي لا تعتمد واجهة برمجة التطبيقات خلفيةSync 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 على تبسيط هذا النوع من المهام وتحسين تجربة المطوّرين ومنحك المزيد من الفرص لتحسين تجربة المستخدم ووظائف تطبيق الويب.