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

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

المشكلة

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

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

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

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

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

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

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

هذه خرافة. تتيح لك المزامنة في الخلفية أداءً أفضل.

الحل

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

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

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

  1. افتح Emojoy.
  2. الاتصال بالإنترنت (إما باستخدام وضع الطيران أو الانتقال إلى قفص فاراداي المحلي)
  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 أحداث مزامنة منفصلة، ما عليك سوى استخدام علامات فريدة.

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

ما الغرض من استخدام المزامنة في الخلفية؟

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

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

عرض توضيحي آخر

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

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

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

وباستخدام هذا النمط، يستطيع المستخدم وضع هاتفه في جيبه والمضي قدمًا في حياته، وهو يعلم أن الهاتف سينبهه عندما يتم جلبه كما يريد.

الأذونات

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

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

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

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

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

وسيستغرق الأمر بعض الوقت قبل أن تتيح جميع المتصفحات المزامنة في الخلفية، خاصةً أنّ متصفّحي 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، مع العمل على توفير إحدى الصيغ، وهي "المزامنة الدورية في الخلفية". ومن خلال المزامنة الدورية في الخلفية، يمكنك طلب تقييد الحدث حسب الفاصل الزمني وحالة البطارية وحالة الشبكة. وبطبيعة الحال، يتطلّب ذلك الحصول على إذن المستخدم، كما سيحدّد المتصفّح متى يتم تنشيط هذه الأحداث ووتيرة تنشيطها. بمعنى آخر، يمكن أن يطلب موقع إلكتروني إخباري المزامنة كل ساعة، ولكن قد يعرف المتصفح أنّك قرأت هذا الموقع الإلكتروني فقط في الساعة 07:00، لذلك سيتم تنشيط المزامنة يوميًا في الساعة 06:50. هذه الفكرة أبعد قليلاً عن المزامنة لمرة واحدة، ولكنها قادمة.

نعمل تدريجيًا على توفير أنماط ناجحة من نظامَي التشغيل Android وiOS على الويب، مع الاحتفاظ في الوقت نفسه بالعوامل التي تساهم في تطوير الويب.