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

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

المشكلة

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

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

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

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

ولكن لماذا الاستسلام الآن؟ لقد استثمرت وقتًا في هذا الأمر، لذا سيكون من المفيد الانتظار لبعض الوقت أكثر. في هذه المرحلة، تريد الاستسلام، ولكنك تعلم أنّ اللحظة التي تستسلم فيها هي اللحظة التي كان من المفترض أن يتم فيها تحميل كل البيانات لو كنت قد انتظرت قليلاً.

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

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

هذا غير صحيح. تتيح لك المزامنة في الخلفية تحسين الأداء.

الحل

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

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

اعتبارًا من آذار (مارس) 2016، أصبحت ميزة "المزامنة في الخلفية" متاحة في الإصدار 49 من Chrome والإصدارات الأحدث. يمكنك الاطّلاع على الإجراء باتّباع الخطوات التالية:

  1. افتح تطبيق Emojoy.
  2. أوقِف الاتصال بالإنترنت (إما باستخدام وضع الطيران أو من خلال الانتقال إلى مكان مُحاط بشبكة Faraday).
  3. اكتب رسالة.
  4. ارجع إلى الشاشة الرئيسية (يمكنك إغلاق علامة التبويب أو المتصفّح اختياريًا).
  5. اتصل بالإنترنت.
  6. يتم إرسال الرسائل في الخلفية.

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

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

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

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

// 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، وسيسترجعها مشغّل الخدمة ويرسلها.

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

عرض تجريبي آخر

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

جرِّب ذلك بنفسك. تأكَّد من استخدام الإصدار 49 من Chrome والإصدارات الأحدث، ثم اتّبِع الخطوات التالية:

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

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

الأذونات

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

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

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

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

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

سيستغرق الأمر بعض الوقت قبل أن تتيح جميع المتصفّحات ميزة "المزامنة في الخلفية"، خاصةً أنّ Safari وEdge لا يتيحان استخدام مهام الخدمة بعد. ولكنّ التحسين التدريجي يساعد في ما يلي:

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 إلى الويب تدريجيًا، مع الحفاظ على ما يجعل الويب رائعًا.