تعرَّف على كيفية إنشاء ZDF تطبيق ويب تقدّمي (PWA) يتضمن ميزات حديثة، مثل إمكانية الاستخدام بلا إنترنت وقابلية التثبيت والوضع الداكن.
عندما كان مزوّد البث ZDF يفكر في إعادة تصميم تكنولوجيا واجهة المستخدم ، قرّر إلقاء نظرة عن كثب على تطبيقات الويب التقدّمية لموقعه الإلكتروني المخصّص للبث المباشر ZDFmediathek. اضطرت وكالة التطوير Cellular إلى التحدي لإنشاء تجربة مستندة إلى الويب تتساوى مع تطبيقات iOS وAndroid الخاصة بنظامي التشغيل ZDF. توفّر التطبيقات المتوافقة مع الأجهزة الجوّالة (PWA) إمكانية التثبيت وتشغيل الفيديوهات بلا إنترنت والرسوم المتحركة أثناء الانتقالات ووضع تضاؤل الإضاءة.
إضافة مشغّل خدمات
من الميزات الرئيسية لتطبيقات الويب التقدّمية إمكانية استخدامها بلا اتصال بالإنترنت. بالنسبة إلى ZDF، يتم تنفيذ معظم المهام الشاقة من خلال Workbox، وهي مجموعة من المكتبات ووحدات Node التي تسهّل استخدام استراتيجيات التخزين المؤقت المختلفة. تم إنشاء تطبيق الويب التقدّمي ZDF باستخدام TypeScript وReact، لذا فهي تستخدم مكتبة Workbox المُدمَجة حاليًا في create-react-app لتخزين مواد العرض الثابتة مؤقتًا. يتيح هذا للتطبيق التركيز على جعل المحتوى الديناميكي متاح بلا اتصال، في هذه الحالة مقاطع الفيديو وبياناتها الوصفية.
الفكرة الأساسية بسيطة جدًا: جلب الفيديو وتخزينه ككتلة بيانات في قاعدة بيانات IndexedDB. بعد ذلك، أثناء التشغيل، انتبِه إلى الأحداث التي تشير إلى الاتصال بالإنترنت أو عدم الاتصال به، وانتقِل إلى الإصدار الذي تم تنزيله عندما يصبح الجهاز غير متصل بالإنترنت.
تبيّن أنّ الأمور أكثر تعقيدًا. وكان أحد متطلبات المشروع هو استخدام مشغّل الويب الرسمي ZDF الذي لا يقدّم أي دعم بلا اتصال بالإنترنت. يتلقّى المشغّل رقم تعريف محتوى كإدخال، ويتواصل مع واجهة برمجة التطبيقات ZDF API، ويشغّل الفيديو المرتبط.
في هذه الحالة، يمكنك الاستعانة بإحدى الميزات الأكثر فعالية على الويب: مشغّلات الخدمات.
يمكن لعامل الخدمة اعتراض الطلبات المختلفة التي يجريها المشغّل والردّ بالبيانات من IndexedDB. ويؤدي ذلك إلى إضافة ميزات بلا إنترنت بشكل شفاف بدون الحاجة إلى تغيير سطر واحد من رمز المشغّل.
بما أنّ الفيديوهات بلا إنترنت تكون عادةً كبيرة جدًا، يطرح السؤال الكبير نفسه: كم عدد الفيديوهات التي يمكن تخزينها على الجهاز؟ وبالاستعانة بواجهة برمجة التطبيقات StorageManager API، يمكن للتطبيق تقدير المساحة المتوفّرة وإبلاغ المستخدم بعدم وجود مساحة كافية قبل بدء عملية التنزيل. لا يتوفّر Safari في قائمة المتصفّحات التي تستخدم واجهة برمجة التطبيقات هذه، ولم تكن هناك معلومات محدّثة في وقت كتابة هذه المقالة عن كيفية تطبيق المتصفّحات الأخرى للحصص. لذلك، كتب الفريق أداة صغيرة لاختبار السلوك على أجهزة مختلفة. تتوفّر الآن مقالة كاملة تلخّص كل التفاصيل.
إضافة رسالة طلب تثبيت مخصّصة
يقدّم تطبيق ZDF PWA مسار تثبيت مخصّصًا داخل التطبيق ويطلب من المستخدمين تثبيت التطبيق عندما يريدون تنزيل الفيديو الأول. هذه هي اللحظة المناسبة لطلب التثبيت لأنّ المستخدم قد عبّر عن رغبته بوضوح في استخدام التطبيق بلا إنترنت.
إنشاء صفحة بلا إنترنت للوصول إلى المحتوى الذي تم تنزيله
عندما لا يكون الجهاز متصلاً بالإنترنت وينتقل المستخدم إلى صفحة غير متاحة بلا اتصال بالإنترنت، يتم عرض صفحة خاصة بدلاً من ذلك تُدرج جميع الفيديوهات التي تم تنزيلها سابقًا أو (في حال عدم تنزيل أي محتوى حتى الآن) شرحًا موجزًا لميزة "بلا إنترنت".
استخدام معدل تحميل اللقطات في الثانية للميزات التكيُّفية
لتقديم تجربة ثرية للمستخدم، يتضمّن تطبيق ZDF PWA بعض الانتقالات الخفيفة
التي تحدث عندما ينتقل المستخدم للأسفل أو للأعلى. في الأجهزة المنخفضة الأداء، تُحدث هذه الرسوم المتحرّكة عادةً تأثيرًا معاكسًا وتجعل التطبيق يبدو بطيئًا وأقل استجابةً إذا لم يتم تشغيلها بمعدّل 60 لقطة في الثانية. مع أخذ ذلك في
الاعتبار، يقيس التطبيق معدّل عرض اللقطات الفعلي من خلال requestAnimationFrame() أثناء loading ويوقف جميع الرسوم المتحرّكة عندما تنخفض القيمة عن
حدّ معيّن.
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، وقد تلقّى الكثير من الملاحظات الإيجابية منذ ذلك الحين. أثناء استمرار المرحلة التجريبية، يظل تطبيق الويب المتوافق مع الأجهزة الجوّالة يعمل ضمن نطاق مؤقت خاص به. على الرغم من أنّه لم يتم الترويج علنيًا لتطبيق الويب التقدّمي، إلا أنّ عدد المستخدمين يزداد بشكل مطرد. ويأتي العديد من هذه التطبيقات من Microsoft Store الذي يتيح لمستخدمي Windows 10 اكتشاف تطبيقات الويب المتقدّمة وتثبيتها مثل التطبيقات المخصّصة للمنصة.
ما هي الخطوات التالية؟
تخطّط ZDF لمواصلة إضافة ميزات إلى تطبيقها المتوافق مع الأجهزة الجوّالة (PWA)، بما في ذلك تسجيل الدخول من أجل التخصيص، والعرض على جميع الأجهزة والمنصات، والإشعارات الفورية.