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

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

Martin Schierle

Scott Friesen

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

إضافة مشغّل خدمات

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

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

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

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

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

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

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

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

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

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

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

لتوفير تجربة مستخدم غنية، يتضمن تطبيق الويب التقدّمي ZDF بعض الانتقالات البسيطة التي تحدث عندما يقوم المستخدم بالتمرير أو التنقل. على الأجهزة المنخفضة التطور مثل الرسوم المتحركة عادة ما يكون لها تأثير عكسي وتجعل التطبيق يبدو بطيئًا أقل استجابة إذا لم تعمل بسرعة 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 لا يوفر فقط مفتاحًا يتيح للمستخدمين التبديل بين الضوء المظهر الداكن، يتفاعل أيضًا مع تغييرات إعدادات الألوان على مستوى نظام التشغيل. بهذه الطريقة سيغيّر التطبيق تلقائيًا مظهره على الأجهزة التي تم إعداد الجدول الزمني لتغيير قاعدة الموضوع بناءً على الوقت من اليوم.

النتائج

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

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

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