مزامنة بيانات تطبيق الويب في الخلفية للحصول على تجربة أكثر سلاسة
هل سبق لك أن واجهت أيًا من المواقف التالية؟
- ركوب قطار أو مترو أنفاق مع اتصال متقطع أو بدون اتصال
- هل تم تقييد سرعة الإنترنت من قِبل مشغّل شبكة الجوّال بعد مشاهدة عدد كبير جدًا من الفيديوهات؟
- الإقامة في بلد لا يمكن فيه توفير النطاق الترددي المطلوب
إذا سبق لك أن واجهت هذه المشكلة، لا شكّ أنّك شعرت بالإحباط بسبب عدم قدرتك على إنجاز بعض المهام على الويب، وتساءلت عن سبب تفوّق التطبيقات الخاصة بمنصات معيّنة في كثير من الأحيان في هذه الحالات. يمكن للتطبيقات الخاصة بمنصات معيّنة جلب محتوى جديد، مثل المقالات الإخبارية أو معلومات الطقس، مسبقًا. حتى إذا لم تتوفر شبكة في محطة المترو، سيظل بإمكانك قراءة الأخبار.
تتيح ميزة "المزامنة الدورية في الخلفية" لتطبيقات الويب مزامنة البيانات بشكل دوري في الخلفية، ما يجعل تطبيقات الويب أقرب إلى سلوك التطبيقات الخاصة بمنصة معيّنة.
تجربة الميزة
DevTools Tips هو تطبيق ويب تقدّمي يستخدم واجهة Periodic Background Sync API. يجلب تطبيق الويب التقدّمي "نصائح DevTools" نصائح جديدة حول أدوات المطوّرين يوميًا ويخزّنها في ذاكرة التخزين المؤقت، ما يتيح للمستخدمين الوصول إليها في المرة التالية التي يفتحون فيها التطبيق، سواء كانوا متصلين بالإنترنت أم لا. احرص على تثبيت التطبيق لكي تتوفّر واجهة برمجة التطبيقات Periodic Background Sync API.
انتقِل إلى الرمز المصدر على GitHub. على وجه الخصوص، يسجّل التطبيق المزامنة الدورية في الدالة registerPeriodicSync(). رمز عامل الخدمة هو المكان الذي يستمع فيه التطبيق إلى حدث periodicsync.
المفاهيم والاستخدام
تتيح لك المزامنة الدورية في الخلفية عرض محتوى جديد عند تشغيل تطبيق ويب تقدّمي أو صفحة تستند إلى عامل خدمة. ويتم ذلك من خلال تنزيل البيانات في الخلفية عندما لا يكون التطبيق أو الصفحة قيد الاستخدام. يمنع ذلك إعادة تحميل محتوى التطبيق بعد تشغيله أثناء عرضه. والأفضل من ذلك، أنّه يمنع التطبيق من عرض مؤشر تحميل المحتوى قبل إعادة التحميل.
وبدون المزامنة الدورية في الخلفية، يجب أن تستخدم تطبيقات الويب طرقًا بديلة لتنزيل البيانات. من الأمثلة الشائعة على ذلك استخدام إشعار فوري لتنشيط عامل الخدمة. تظهر للمستخدم رسالة مثل "تتوفّر بيانات جديدة". ويُعدّ تعديل البيانات في الأساس أثرًا جانبيًا. سيظل بإمكانك استخدام الإشعارات الفورية لتلقّي التنبيهات المهمة، مثل الأخبار العاجلة المهمة.
قد يتم الخلط بين المزامنة الدورية في الخلفية والمزامنة في الخلفية. وعلى الرغم من تشابه أسمائهما، تختلف حالات استخدامهما. من بين الاستخدامات الأخرى، يُستخدَم التزامن في الخلفية بشكل شائع لإعادة إرسال البيانات إلى خادم عندما يتعذّر تنفيذ طلب سابق.
تحسين تفاعل المستخدمين
إذا تم تنفيذ المزامنة الدورية في الخلفية بشكل غير صحيح، قد يؤدي ذلك إلى إهدار موارد المستخدمين. قبل طرح هذه الميزة، خضعت لفترة تجريبية للتأكّد من فعاليتها. يوضّح هذا القسم بعض قرارات التصميم التي اتّخذها Chrome لجعل هذه الميزة مفيدة قدر الإمكان.
أول قرار اتخذه فريق تصميم Chrome هو أنّه لا يمكن لتطبيق ويب استخدام المزامنة الدورية في الخلفية إلا بعد أن يثبّته المستخدم على جهازه ويشغّله كتطبيق مستقل. لا تتوفّر المزامنة الدورية في الخلفية في سياق علامة تبويب عادية في Chrome.
بالإضافة إلى ذلك، بما أنّ Chrome لا يريد أن تستهلك تطبيقات الويب غير المستخدَمة أو التي يتم استخدامها نادرًا البطارية أو البيانات بدون داعٍ، صمّم Chrome ميزة المزامنة الدورية في الخلفية، وبالتالي على المطوّرين إثبات جدارة تطبيقاتهم من خلال تقديم قيمة للمستخدمين. على وجه التحديد، يستخدم Chrome نتيجة تفاعل الموقع الإلكتروني (about://site-engagement/) لتحديد ما إذا كان يمكن إجراء عمليات مزامنة دورية في الخلفية وعدد مرّات إجرائها لتطبيق ويب معيّن. بعبارة أخرى، لن يتم تشغيل حدث periodicsync على الإطلاق ما لم تكن نتيجة التفاعل أكبر من صفر، وتؤثر قيمته في عدد مرّات تشغيل حدث periodicsync. يضمن ذلك ألّا تتم مزامنة سوى التطبيقات التي تستخدمها حاليًا في الخلفية.
تتشابه المزامنة الدورية في الخلفية مع واجهات برمجة التطبيقات والممارسات الحالية على المنصات الرائجة. على سبيل المثال، يتيح كلّ من المزامنة لمرة واحدة في الخلفية والإشعارات الفورية استمرار عمل منطق تطبيق الويب لفترة أطول قليلاً (من خلال عامل الخدمة) بعد أن يغلق المستخدم الصفحة. على معظم المنصات، من الشائع أن يثبّت المستخدمون تطبيقات تصل بشكل دوري إلى الشبكة في الخلفية لتوفير تجربة أفضل للمستخدمين عند تنفيذ إجراءات مثل التحديثات المهمة وجلب المحتوى مسبقًا ومزامنة البيانات. وبالمثل، يطيل التزامن الدوري في الخلفية أيضًا عمر منطق تطبيق الويب ليتم تشغيله على فترات منتظمة، وقد يستغرق ذلك بضع دقائق في كل مرة.
إذا سمح المتصفّح بحدوث ذلك بشكل متكرّر وبدون قيود، قد يؤدي ذلك إلى بعض المخاوف المتعلقة بالخصوصية. في ما يلي كيفية معالجة Chrome لهذا الخطر المرتبط بالمزامنة الدورية في الخلفية:
- لا يتم إجراء نشاط المزامنة في الخلفية إلا على شبكة سبق أن اتصل بها الجهاز. ينصح Chrome بالاتصال فقط بالشبكات التي تديرها جهات موثوقة.
- كما هو الحال مع جميع الاتصالات عبر الإنترنت، تكشف المزامنة الدورية في الخلفية عن عناوين IP الخاصة بالعميل والخادم الذي يتواصل معه واسم الخادم. للحدّ من هذا التعرض إلى ما يقارب ما سيكون عليه إذا كان التطبيق لا يتيح المزامنة إلا عندما يكون في المقدّمة، يحدّ المتصفح من عدد مرات المزامنة في الخلفية للتطبيق بما يتوافق مع عدد المرات التي يستخدم فيها الشخص هذا التطبيق. وإذا توقّف الشخص عن التفاعل مع التطبيق بشكل متكرّر، ستتوقف المزامنة الدورية في الخلفية. وهذا تحسّن صافٍ مقارنةً بالوضع الراهن في التطبيقات الخاصة بنظام أساسي معيّن.
متى يمكن استخدامها؟
تختلف قواعد الاستخدام حسب المتصفّح. للتلخيص، يفرض Chrome المتطلبات التالية على المزامنة الدورية في الخلفية:
- نتيجة محدّدة لتفاعل المستخدمين
- توفُّر شبكة مستخدَمة سابقًا
لا يتحكّم المطوّرون في توقيت عمليات المزامنة. سيتوافق معدّل تكرار المزامنة مع معدّل استخدام التطبيق. (يُرجى العِلم أنّ التطبيقات الخاصة بمنصّة معيّنة لا تفعل ذلك). ويأخذ في الاعتبار أيضًا حالة الطاقة والاتصال بالجهاز.
متى يجب استخدامها؟
عندما يتم تنشيط عامل الخدمة للتعامل مع حدث periodicsync، يكون لديك فرصة لطلب البيانات، ولكن ليس التزام بذلك. وعند التعامل مع الحدث، يجب مراعاة ظروف الشبكة ومساحة التخزين المتاحة وتنزيل كميات مختلفة من البيانات استجابةً لذلك. يمكنك الاستعانة بالمَراجع التالية للحصول على المساعدة:
الأذونات
بعد تثبيت عامل الخدمة، استخدِم 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.
مثال
تعرض الأقسام التالية بعض الأمثلة على استخدام واجهة برمجة التطبيقات Periodic Background Sync.
تحديث المحتوى
يستخدم المثال التالي المزامنة الدورية في الخلفية لتنزيل وتخزين مقالات حديثة مؤقتًا لموقع إخباري أو مدوّنة. لاحظ اسم العلامة الذي يشير إلى نوع المزامنة ('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());
}
});
إضافة ميزة "المزامنة الدورية في الخلفية" إلى تطبيق ويب حالي
كانت هذه المجموعة من التغييرات ضرورية لإضافة المزامنة الدورية في الخلفية إلى تطبيق ويب تقدّمي حالي. يتضمّن هذا المثال عددًا من عبارات التسجيل المفيدة التي تصف حالة المزامنة الدورية في الخلفية في تطبيق الويب.
تصحيح الأخطاء في واجهة برمجة التطبيقات Periodic Background Sync API
قد يكون من الصعب الحصول على نظرة شاملة على المزامنة الدورية في الخلفية أثناء الاختبار على الجهاز. تقدّم المعلومات المتعلّقة بالتسجيلات النشطة وفواصل المزامنة التقريبية وسجلات أحداث المزامنة السابقة سياقًا قيّمًا أثناء تصحيح أخطاء سلوك تطبيق الويب. لحسن الحظ، يمكنك العثور على كل هذه المعلومات من خلال ميزة تجريبية في "أدوات مطوّري البرامج في Chrome".
تسجيل النشاط المحلي
يتم تنظيم قسم المزامنة الدورية في الخلفية في "أدوات مطوّلي البرامج" حول الأحداث الرئيسية في دورة حياة المزامنة الدورية في الخلفية، مثل التسجيل للمزامنة، وإجراء مزامنة في الخلفية، وإلغاء التسجيل. للحصول على معلومات حول هذه الأحداث، انقر على بدء التسجيل.
أثناء التسجيل، ستظهر إدخالات في "أدوات مطوّري البرامج" تتوافق مع الأحداث، مع تسجيل السياق والبيانات الوصفية لكل حدث.
بعد تفعيل التسجيل مرة واحدة، سيظل مفعَّلاً لمدة تصل إلى ثلاثة أيام، ما يتيح لأدوات مطوّلي البرامج التقاط معلومات تصحيح الأخطاء المحلية بشأن عمليات المزامنة في الخلفية التي قد تحدث، حتى بعد ساعات في المستقبل.
محاكاة الأحداث
على الرغم من أنّ تسجيل النشاط في الخلفية يمكن أن يكون مفيدًا، إلا أنّ هناك أوقاتًا تريد فيها اختبار معالج periodicsync على الفور، بدون انتظار تشغيل حدث بوتيرة طبيعية.
يمكنك إجراء ذلك باستخدام قسم العاملون في الخلفية ضمن لوحة "التطبيق" في أدوات مطوّري البرامج في Chrome. يتيح لك حقل المزامنة الدورية تقديم علامة لاستخدامها في الحدث، وتفعيلها عدة مرات كما تريد.
استخدام واجهة "أدوات مطوّري البرامج"
سيظهر قسم المزامنة الدورية في الخلفية في لوحة التطبيق ضمن أدوات المطوّرين.
