إضافة ميزة "مزامنة الخلفية"

Jake Archibald

تاريخ النشر: 8 ديسمبر 2015

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

Browser Support

• 89
• 89
• x
• x

Source

المشكلة

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

ولكن في بعض الأحيان، لا نريد إضاعة الوقت. تكون تجربة المستخدم المثالية على النحو التالي:

1. الهاتف خارج الجيب
2. تحقيق هدف ثانوي
3. إعادة الهاتف إلى الجيب
4. استئناف الحياة

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

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

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

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

تتيح لك المزامنة في الخلفية تحقيق أداء أفضل.

الحل

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

إذا حاول المستخدم إرسال رسالة عندما يكون الاتصال بالإنترنت معدومًا، سيتم إرسال الرسالة في الخلفية فور توفّر الاتصال.

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

تتوفّر ميزة "المزامنة في الخلفية" بدءًا من الإصدار 49 من Chrome.

كيفية طلب مزامنة في الخلفية

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

مثل الرسائل الفورية، تستخدم هذه الميزة مشغّل خدمات كهدف للحدث، ما يتيح لها العمل عندما تكون الصفحة غير مفتوحة. للبدء، سجِّل عملية مزامنة من صفحة:

// Register your service worker:
navigator.serviceWorker.register('/sw.js');

// Then later, request a one-off sync:
navigator.serviceWorker.ready.then(function(swRegistration) {
  return swRegistration.sync.register('myFirstSync');
});
 ```

Then listen for the event in `/sw.js`:

```js
self.addEventListener('sync', function(event) {
  if (event.tag == 'myFirstSync') {
    event.waitUntil(doSomeStuff());
  }
});

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

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

إليك عرضًا توضيحيًا يستخدم حدث المزامنة لعرض إشعار.

استخدامات المزامنة في الخلفية

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

مع ذلك، يمكنك أيضًا استخدامها لجلب أجزاء صغيرة من البيانات.

عرض توضيحي لويكيبيديا بلا إنترنت

هذا هو العرض التوضيحي لويكيبيديا بلا إنترنت الذي أنشأته من أجل تسريع تحميل الصفحات. ومنذ ذلك الحين، أضفتُ بعض الميزات السحرية للمزامنة في الخلفية.

جرِّب ذلك بنفسك:

1. يُرجى إبقاء المتصفّح مفتوحًا على علامة التبويب هذه.
2. يمكنك إيقاف الاتصال بالإنترنت من خلال تفعيل "وضع الطيران" أو إيقاف شبكة Wi-Fi.
3. انقر على رابط يؤدي إلى مقالة أخرى.
4. سيتم إعلامك بأنّه تعذّر تحميل الصفحة (سيظهر هذا الإشعار أيضًا إذا استغرق تحميل الصفحة بعض الوقت).
5. الموافقة على تلقّي الإشعارات
6. أغلِق المتصفّح.
7. الاتصال بالإنترنت
8. سيتم إشعارك عندما يتم تنزيل المقالة وتخزينها مؤقتًا وتصبح جاهزة للعرض.

باستخدام هذا النمط، يمكن للمستخدم وضع هاتفه في جيبه ومتابعة يومه، مع العلم أنّ الهاتف سيُشعره عندما يتم جلب ما يريده.

الأذونات

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

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

• لا يمكنك التسجيل في حدث مزامنة إلا عندما تكون نافذة الموقع الإلكتروني مفتوحة للمستخدم.
• يتم تحديد الحد الأقصى لوقت تنفيذ الحدث، لذا لا يمكنك استخدامه لإرسال إشارة إلى خادم كل x ثانية أو استخراج عملات البيتكوين أو أي شيء آخر.

بالطبع، قد يتم تخفيف هذه القيود أو تشديدها استنادًا إلى الاستخدام الفعلي.

التحسين التدريجي

في انتظار أن تصبح المزامنة في الخلفية ميزة أساسية، يمكنك استخدامها كتحسين تدريجي:

if ('serviceWorker' in navigator && 'SyncManager' in window) {
  navigator.serviceWorker.ready.then(function(reg) {
    return reg.sync.register('tag-name');
  }).catch(function() {
    // system was unable to register for a sync,
    // this could be an OS-level restriction
    postDataFromThePage();
  });
} else {
  // serviceworker/sync not supported
  postDataFromThePage();
}

إذا لم تتوفّر أدوات عامل الخدمة أو المزامنة في الخلفية، ما عليك سوى نشر المحتوى من الصفحة كما تفعل اليوم.

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

المستقبل

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

نعمل تدريجيًا على نقل الأنماط الناجحة من Android وiOS إلى الويب، مع الحفاظ على الميزات التي تجعل الويب رائعًا.