تجارب أكثر ثراءً بلا اتصال بالإنترنت من خلال واجهة برمجة التطبيقات Periodic Background Sync API

مزامنة بيانات تطبيق الويب في الخلفية للحصول على تجربة أكثر شبهاً بالتطبيقات

Jeff Posnick

Joe Medley

هل سبق لك أن واجهت أيًا من الحالات التالية؟

• ركوب قطار أو مترو الأنفاق مع عدم توفّر اتصال بالإنترنت أو توفّره بشكل متقطع
• فرض مشغل شبكة الجوّال قيودًا على سرعة الإنترنت بعد مشاهدة عدد كبير جدًا من الفيديوهات
• الإقامة في بلد لا يتوافق فيه معدل نقل البيانات مع الطلب

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

تتيح ميزة "المزامنة الدورية في الخلفية" لتطبيقات الويب مزامنة data بشكل دوري في الخلفية، ما يجعل تطبيقات الويب أقرب إلى سلوك تطبيق مخصّص للمنصة.

تجربة الميزة

يمكنك تجربة المزامنة الدورية في الخلفية باستخدام تطبيق الإصدار التجريبي المباشر. قبل استخدامه، تأكَّد مما يلي:

• استخدام الإصدار 80 من Chrome أو إصدار أحدث
• عليك تثبيت تطبيق الويب قبل تفعيل المزامنة الدورية في الخلفية.

المفاهيم وطريقة الاستخدام

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

في حال عدم توفّر مزامنة منتظمة في الخلفية، يجب أن تستخدم تطبيقات الويب طرقًا بديلة لتحميل البيانات. ومن الأمثلة الشائعة استخدام إشعار فوري لإيقاظ عامل تدفق الخدمة. تظهر للمستخدم رسالة مثل "تتوفّر بيانات جديدة". ويعدّ تعديل البيانات تأثيرًا جانبيًا في الأساس. سيظل بإمكانك استخدام الإشعارات الفورية للحصول على آخر الأخبار المهمة، مثل الأخبار العاجلة المُهمّة.

من السهل الخلط بين المزامنة الدورية في الخلفية والمزامنة في الخلفية. على الرغم من أنّه لهما أسماء متشابهة، إلا أنّ حالات استخدامهما مختلفة. من بين أمور أخرى، يتم استخدام ميزة "مزامنة في الخلفية" بشكل شائع لإعادة إرسال البيانات إلى خادم عندما يتعذّر إكمال أحد الطلبات السابقة.

تحسين تفاعل المستخدمين

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

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

بالإضافة إلى ذلك، لا يريد Chrome أن تستهلك تطبيقات الويب غير المستخدَمة أو المستخدَمة نادرًا الطاقة أو البيانات بدون داعٍ، لذا صمّم Chrome مزامنة منتظمة في الخلفية بحيث على المطوّرين كسبها من خلال تقديم قيمة لمستخدميهم. على وجه التحديد، يستخدم Chrome نتيجة التفاعل مع الموقع الإلكتروني (about://site-engagement/) لتحديد ما إذا كان يمكن إجراء عمليات مزامنة دورية في الخلفية وما هو معدّل تكرارها لتطبيق ويب معيّن. بعبارة أخرى، لن يتم تشغيل حدث periodicsync على الإطلاق ما لم تكن نتيجة التفاعل أكبر من صفر، وتؤثر قيمتها في معدّل تكرار حدث periodicsync. ويضمن ذلك أنّ التطبيقات الوحيدة التي تتم مزامنتها في الخلفية هي التطبيقات التي تستخدمها بشكل نشط.

تتشارك المزامنة الدورية في الخلفية بعض أوجه التشابه مع واجهات برمجة التطبيقات الحالية والممارسات المُتّبعة على المنصات الرائجة. على سبيل المثال، تسمح المزامنة لمرة واحدة في الخلفية وكذلك الإشعارات الفورية لمنطق تطبيق الويب بالبقاء نشطًا لفترة أطول قليلاً (من خلال عامل الخدمة) بعد أن يغلق المستخدم الصفحة. في معظم المنصّات، من المعتاد أن تثبِّت المستخدمون تطبيقات تتصل بالشبكة بشكل دوري في الخلفية لتوفير تجربة أفضل للمستخدمين من خلال تنزيل التحديثات المهمة، وتحميل المحتوى مسبقًا، ومزامنة البيانات، وما إلى ذلك. وبالمثل، تعمل المزامنة الدورية في الخلفية أيضًا على إطالة مدة تشغيل منطق تطبيق الويب في فترات منتظمة قد تبلغ بضع دقائق في كل مرة.

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

• لا يحدث نشاط المزامنة في الخلفية إلا على شبكة سبق للجهاز أن اتصل بها. ينصح Chrome بالاتصال بالشبكات التي تديرها جهات موثوق بها فقط.
• كما هو الحال مع جميع الاتصالات على الإنترنت، تكشف المزامنة الدورية في الخلفية عن عناوين IP العميل والخادم الذي يتواصل معه واسم الخادم. للحدّ من هذا التأثير إلى ما يقارب التأثير الذي كان سيحدث إذا كان التطبيق تتم synchronizationه فقط عندما يكون في المقدّمة، يحدّ المتصفح من معدّل تكرار عمليات synchronization في الخلفية للتطبيق بما يتناسب مع عدد مرات استخدام المستخدم لهذا التطبيق. وإذا stopped the user interacting frequently with the app، لن تتم synchronization الدورية في الخلفية. وهذا تحسين كبير مقارنةً بالوضع الحالي في التطبيقات الخاصة بالنظام الأساسي.

متى يمكن استخدامها؟

تختلف قواعد الاستخدام حسب المتصفّح. للتلخيص من المعلومات الواردة أعلاه، يفرض Chrome المتطلبات التالية على المزامنة الدورية في الخلفية:

• نتيجة تفاعل مستخدِم معيّنة.
• توفُّر شبكة سبق استخدامها

لا يتحكّم المطوّرون في توقيت عمليات المزامنة. سيتم ضبط معدّل تكرار المزامنة وفقًا لعدد مرات استخدام التطبيق. (يُرجى العِلم أنّ التطبيقات المخصّصة للمنصة لا تفعل ذلك حاليًا). ويأخذ هذا الإجراء أيضًا في الاعتبار حالة اتصال الجهاز بالطاقة.

متى يجب استخدامها؟

عندما يتم تنشيط worker للتعامل مع حدث periodicsync، يكون لديك فرصة لطلب البيانات، ولكن ليس التزامًا بذلك. عند التعامل مع الحدث، يجب مراعاة ظروف الشبكة ومساحة التخزين المتاحة وتنزيل كميات مختلفة من البيانات استجابةً لذلك. يمكنك استخدام المَراجع التالية للحصول على المساعدة:

• Network Information API
• رصد وضع توفير البيانات
• تقدير مساحة التخزين المتاحة

الأذونات

بعد تثبيت مشغّل الخدمة، استخدِم Permissions API لطلب periodic-background-sync. ويمكنك إجراء ذلك من نافذة أو سياق عامل الخدمة.

const status = await navigator.permissions.query({
  name: 'periodic-background-sync',
});
if (status.state === 'granted') {
  // Periodic background sync can be used.
} else {
  // Periodic background sync cannot be used.
}

تسجيل مزامنة دورية

كما سبق وذكرنا، تتطلّب المزامنة الدورية في الخلفية استخدام عامل خدمة. استرداد PeriodicSyncManager باستخدام ServiceWorkerRegistration.periodicSync والاتصال register() عليه يتطلب التسجيل علامة وفاصل زمني أدنى للمزامنة (minInterval). وتحدِّد العلامة عملية المزامنة المسجَّلة كي يتمكّن المستخدم من تسجيل عمليات مزامنة متعددة. في المثال أدناه، اسم العلامة هو 'content-sync' وminInterval هو يوم واحد.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  try {
    await registration.periodicSync.register('content-sync', {
      // An interval of one day.
      minInterval: 24 * 60 * 60 * 1000,
    });
  } catch (error) {
    // Periodic background sync cannot be used.
  }
}

إثبات صحة تسجيل

يُرجى الاتصال برقم periodicSync.getTags() لاسترداد صفيف من علامات التسجيل. يستخدم المثال أدناه أسماء العلامات لتأكيد تفعيل تعديل ذاكرة التخزين المؤقت لتجنُّب تعديلها مرة أخرى.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  const tags = await registration.periodicSync.getTags();
  // Only update content if sync isn't set up.
  if (!tags.includes('content-sync')) {
    updateContentOnPageLoad();
  }
} else {
  // If periodic background sync isn't supported, always update.
  updateContentOnPageLoad();
}

يمكنك أيضًا استخدام getTags() لعرض قائمة بالتسجيلات النشطة في صفحة إعدادات تطبيق الويب حتى يتمكّن المستخدمون من تفعيل أنواع معيّنة من التحديثات أو إيقافها.

الردّ على حدث مزامنة دورية في الخلفية

للردّ على حدث مزامنة دورية في الخلفية، أضِف معالجًا لحدث periodicsync إلى عامل الخدمة. سيحتوي عنصر event الذي تم تمريره على مَعلمة tag تتطابق مع القيمة المستخدَمة أثناء التسجيل. على سبيل المثال، إذا تم تسجيل عملية مزامنة دورية في الخلفية باسم 'content-sync'، سيكون event.tag هو 'content-sync'.

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'content-sync') {
    // See the "Think before you sync" section for
    // checks you could perform before syncing.
    event.waitUntil(syncContent());
  }
  // Other logic for different tags as needed.
});

إلغاء تسجيل عملية مزامنة

لإنهاء عملية مزامنة مسجّلة، اتصل برقم periodicSync.unregister() مع ذكر اسم عملية المزامنة التي تريد إلغاء تسجيلها.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  await registration.periodicSync.unregister('content-sync');
}

واجهات

في ما يلي نظرة سريعة على الواجهات التي يوفّرها واجهة برمجة التطبيقات Periodic Background Sync API.

• PeriodicSyncEvent: يتم تمريرها إلى معالِج الحدث ServiceWorkerGlobalScope.onperiodicsync في وقت يختاره المتصفّح.
• PeriodicSyncManager. تسجيل عمليات المزامنة الدورية وإلغاء تسجيلها وتوفير علامات لعمليات المزامنة المسجَّلة استرجع مثيلًا من هذه الفئة من السمة ServiceWorkerRegistration.periodicSync`.
• ServiceWorkerGlobalScope.onperiodicsync. لتسجيل معالِج لتلقّي PeriodicSyncEvent
• ServiceWorkerRegistration.periodicSync: لعرض مرجع إلى PeriodicSyncManager.

مثال

تعديل المحتوى

يستخدم المثال التالي المزامنة الدورية في الخلفية لتنزيل المقالات الحديثة وتخزينها مؤقتًا في ذاكرة التخزين المؤقت لموقع إخباري أو مدونة إلكترونية. لاحِظ اسم العلامة الذي يشير إلى نوع المزامنة ('update-articles'). يتم تضمين طلب updateArticles() في event.waitUntil() حتى لا يتم إنهاء الخدمة العاملة قبل تنزيل المقالات وتخزينها.

async function updateArticles() {
  const articlesCache = await caches.open('articles');
  await articlesCache.add('/api/articles');
}

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'update-articles') {
    event.waitUntil(updateArticles());
  }
});

إضافة مزامنة دورية في الخلفية إلى تطبيق ويب حالي

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

تصحيح الأخطاء

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

تسجيل النشاط المحلي

يتم تنظيم قسم المزامنة الدورية في الخلفية في "أدوات المطوّر" حول الأحداث الرئيسية في دورة حياة المزامنة الدورية في الخلفية: التسجيل للمزامنة وتنفيذ مزامنة في الخلفية وإلغاء التسجيل. للحصول على معلومات عن هذه الأحداث، انقر على بدء التسجيل.

أثناء التسجيل، ستظهر الإدخالات في DevTools مقابل الأحداث، مع تسجيل السياق والبيانات الوصفية لكل حدث.

بعد تفعيل التسجيل مرة واحدة، سيظل مفعّلاً لمدة تصل إلى ثلاثة أيام، مما يسمح لأدوات المطوّرين بتسجيل معلومات تصحيح الأخطاء المحلية حول عمليات المزامنة التي قد تتم في الخلفية، حتى بعد ساعات في المستقبل.

محاكاة الأحداث

على الرغم من أنّ تسجيل النشاط في الخلفية قد يكون مفيدًا، إلا أنّه في بعض الأحيان قد تريد اختبار معالِج periodicsync على الفور، بدون انتظار بدء حدث في الوقت المعتاد.

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

استخدام واجهة "أدوات المطوّرين"

اعتبارًا من الإصدار 81 من Chrome، سيظهر لك قسم المزامنة الدورية في الخلفية في لوحة تطبيق أدوات المطوّرين.