كيف أنشأت شركة ZDF فيديو بتنسيق PWA فيديو باستخدام "وضع عدم الاتصال بالإنترنت" و"الوضع الداكن"

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

مارتن شيرل

سكوت فريزن

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

إضافة عامل خدمات

تتمثل الميزة الرئيسية لتطبيق PWA في الدعم بلا اتصال بالإنترنت. بالنسبة إلى ZDF، يتم تنفيذ معظم المهام الصعبة بواسطة Workbox، وهي مجموعة من المكتبات ووحدات العُقد التي تسهّل العمل مع استراتيجيات مختلفة للتخزين المؤقت. تم تصميم تطبيق ZDF PWA باستخدام TypeScript وReact، لذلك فهو يستخدم مكتبة Workbox، التي سبق أن تم دمجها في create-react-app من أجل تخزين مواد العرض الثابتة مؤقتًا بشكل مسبق. يتيح هذا للتطبيق التركيز على جعل المحتوى الديناميكي متاحًا بلا اتصال، في هذه الحالة مقاطع الفيديو وبياناتها الوصفية.

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

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

وهنا يأتي دور إحدى أقوى ميزات الويب في إنقاذ: عاملو الخدمات.

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

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

إضافة طلب تثبيت مخصص

يوفر تطبيق ZDF PWA خطوات تثبيت مخصّصة داخل التطبيق ويطلب من المستخدمين تثبيت التطبيق فور رغبتهم في تنزيل الفيديو الأول. وهذه نقطة جيدة للمطالبة بالتثبيت لأن المستخدم أعرب عن نيته الواضحة في استخدام التطبيق في وضع عدم الاتصال.

إنشاء صفحة بلا اتصال بالإنترنت للوصول إلى التنزيلات

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

استخدام معدّل تحميل اللقطات في الثانية للميزات التكيُّفية

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

const frameRate = new Promise(resolve => {
  let lastTick;
  const samples = [];

  function measure() {
    const tick = Date.now();
    if (lastTick) samples.push(tick - lastTick);
    lastTick = tick;
    if (samples.length < 20) requestAnimationFrame(measure);
    else {
      const avg = samples.reduce((a, b) => a + b) / samples.length;
      const fps = 1000 / avg;
      resolve(fps);
    }
  }
  measure();
});

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

الوضع الداكن

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

النتائج

تم إطلاق تطبيق الويب التقدّمي الجديد بدون تنبيه كإصدار تجريبي متاح للجميع في آذار (مارس) 2020 وتلقّى الكثير من الملاحظات الإيجابية منذ ذلك الحين. وأثناء استمرار المرحلة التجريبية، لا يزال تطبيق الويب التقدّمي يعمل ضمن نطاقه المؤقت الخاص. وعلى الرغم من عدم الترويج لتطبيق الويب التقدّمي (PWA) بشكلٍ علني، هناك عدد متزايد من المستخدمين. العديد من هذه التطبيقات من Microsoft Store الذي يتيح لمستخدمي Windows 10 اكتشاف تطبيقات الويب التقدّمية (PWA) وتثبيتها مثل التطبيقات الخاصة بالنظام الأساسي.

ما هي الخطوات التالية؟

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