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

يمكنك مزامنة بيانات تطبيق الويب في الخلفية للحصول على تجربة أقرب إلى التطبيق.

Jeff Posnick
Joe Medley
Joe Medley
GitHub

هل سبق لك أن تعرضت لأي من المواقف التالية؟

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

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

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

التجربة الآن

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

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

المفاهيم والاستخدام

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

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

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

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

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

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

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

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

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

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

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

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

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

لا يتحكم المطورون في توقيت عمليات المزامنة. تشير رسالة الأشكال البيانية وتكرار المزامنة مع عدد مرات استخدام التطبيق. (لاحظ أن التطبيقات الخاصة بالنظام الأساسي لا تفعل هذا في الوقت الحالي). كما أنه يستفيد من طاقة الجهاز الاتصال.

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

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

الأذونات

بعد تثبيت عامل الخدمة، استخدِم قسم الأذونات واجهة برمجة التطبيقات لطلب البحث مقابل 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');
}

واجهات

في ما يلي ملخص سريع للواجهات التي توفّرها "الخلفية الدورية" واجهة برمجة تطبيقات المزامنة.

  • 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());
  }
});

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

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

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

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

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

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

الزر "تسجيل" في "أدوات مطوري البرامج"
الزر "تسجيل" في "أدوات مطوري البرامج"

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

مثال على البيانات الدورية التي تتم من خلال مزامنة البيانات في الخلفية
مثال على البيانات الدورية التي تتم من خلال مزامنة البيانات في الخلفية

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

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

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

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

"عاملو الخدمات" بلوحة التطبيق تظهر عبارة "مزامنة دورية" حقل النص والزر.

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

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

لوحة التطبيق تعرض قسم "مزامنة الخلفية الدورية"