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

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

Jeff Posnick

Joe Medley

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

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

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

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

تجربة الميزة

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

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

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

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

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

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

تحقيق تفاعل المستخدمين بالشكل المناسب

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

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

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

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

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

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

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

تختلف قواعد الاستخدام حسب المتصفح. للتلخيص من المعلومات الواردة أعلاه، يفرض 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، سيظهر لك قسم مزامنة الخلفية الدورية في لوحة التطبيق في "أدوات مطوري البرامج".