ستتعلم في هذا الدرس التطبيقي حول الترميز طريقة تعديل المحتوى استنادًا إلى جودة الشبكة. لن يتم تحميل فيديو الخلفية لهذه الصفحة إلا عندما يكون المستخدمون متصلين بشبكة سريعة. سيتم تحميل صورة بدلاً من ذلك على الشبكات الأبطأ.
تتيح لك واجهة برمجة تطبيقات معلومات الشبكة
الوصول إلى معلومات حول جودة اتصال المستخدم. ستستخدم السمة effectiveType لتحديد وقت عرض فيديو ووقت عرض صورة. يمكن أن يكون الحقل "effectiveType" 'slow-2g' أو '2g' أو '3g' أو '4g'.
الخطوة 1: التحقّق من نوع الاتصال
يحتوي ملف index.html على علامة <video> لعرض فيديو الخلفية (السطر 22). يؤدي الرمز في script.js إلى تحميل الفيديو من خلال ضبط السمة src لعلامة الفيديو. (يمكنك الاطّلاع على المزيد من التفاصيل حول رمز تحميل الفيديو في الخطوة 2).
لتحميل الفيديو بشكل مشروط، تحقَّق أولاً من توفُّر Network Information API. وفي حال توفّره، تحقَّق من نوع الاتصال.
- في
script.js، أضِف عبارةifالتي تختبر ما إذا كان عنصرnavigator.connectionمتوفرًا وما إذا كان يتضمن السمةeffectiveType. - أضِف عبارة
ifللتحقّق منeffectiveTypeللشبكة.
if (navigator.connection && !!navigator.connection.effectiveType) {
if (navigator.connection.effectiveType === '4g') {
// Only load video on the fastest connections.
} else {
// In any other case load the image.
}
}
يجب لفّ رمز تحميل الفيديو الحالي في عبارة else لكي يبقى الفيديو قيد التحميل في المتصفّحات التي لا تتوافق مع Network Information API.
if (navigator.connection && !!navigator.connection.effectiveType) {
if (navigator.connection.effectiveType === '4g') {
// video loading code
} else {
// image loading code
}
} else {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}
الخطوة 2: تحميل الفيديو
إذا كانت قيمة effectiveType هي '4g'، استخدِم رمز تحميل الفيديو الذي تم توفيره من بداية الدرس التطبيقي حول الترميز.
if (navigator.connection.effectiveType === '4g') {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
// image loading code
}
في ما يلي طريقة عمل رمز تحميل الفيديو: لا تتيح العلامة <video> تنزيل أو عرض أي محتوى في البداية لأنّه لم يتم ضبط سمة src. يتم تحديد عنوان URL للفيديو المطلوب تحميله باستخدام السمة data-src.
<video id="coverVideo" autoplay loop muted data-src="https://cdn.glitch.com/b6491350-b058-4eb6-aa6c-55c93122073e%2FMatrix%2C%20Console%2C%20Hacking%2C%20Code.mp4?1551464245607"></video>
تسمح لك سمات البيانات بتخزين معلومات إضافية على عناصر HTML العادية. يمكن تسمية عنصر البيانات بأي شيء، طالما أنه يبدأ بـ "-data".
لعرض الفيديو على الصفحة، يجب الحصول على القيمة من data-src وضبطها كسمة src لعنصر الفيديو.
أولاً، احصل على عنصر DOM الذي يحتوي على مادة العرض:
const video = document.getElementById('coverVideo');
بعد ذلك، احصل على موقع المورد من السمة data-src:
const videoSource = video.getAttribute('data-src');
وأخيرًا، عليك ضبط هذه السمة كسمة src لعنصر الفيديو:
video.setAttribute('src', videoSource);
يتناول السطر الأخير تحديد موضع CSS:
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
الخطوة 3: تحميل الصورة
لتحميل صورة بشكل مشروط على شبكات أبطأ، استخدِم الاستراتيجية نفسها المستخدَمة في الفيديو.
أضِف عنصر صورة إلى index.html (بعد عنصر الفيديو مباشرةً) واستخدِم السمة data-src بدلاً من src.
<img id="coverImage" data-src="https://cdn.glitch.com/36529535-5976-40f8-979b-40c898b86bd0%2F36529535-5976-40f8-979b-40c898b86bd0_1_Sn80dgiwpMjBVrqjfiDbnA.jpg?1553003835358" />
في script.js، يمكنك إضافة رمز لضبط السمة src للصورة اعتمادًا على
effectiveType للشبكة.
if (navigator.connection.effectiveType === '4g') {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
const image = document.getElementById('coverImage');
const imageSource = image.getAttribute('data-src');
image.setAttribute('src', imageSource);
image.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}
التجربة الآن
لاختباره بنفسك:
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على
ملء الشاشة
. - اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوّري البرامج".
- انقر على علامة التبويب الشبكة.
- انقر على القائمة المنسدلة التقييد التي يتم ضبطها على بدون تقييد تلقائيًا. اختَر الجيل الثالث السريع.
الآن أعِد تحميل الصفحة مع استمرار تفعيل شبكة الجيل الثالث السريعة. يحمّل التطبيق صورة في الخلفية بدلاً من الفيديو:
رصيد إضافي: الاستجابة للتغييرات
هل تذكر كيف تتضمّن واجهة برمجة التطبيقات هذه onchange
أداة معالجة أحداث؟
يمكنك استخدام هذه الميزة في العديد من الأمور، منها تعديل المحتوى ديناميكيًا مثل جودة الفيديو، أو إعادة تشغيل عمليات نقل البيانات المؤجلة عند اكتشاف تغيير في نوع شبكة ذات معدّل نقل بيانات عالٍ، أو إشعار المستخدمين عند تغيّر جودة الشبكة.
إليك مثال بسيط على كيفية استخدام أداة الاستماع هذه. يُرجى إضافتها إلى "script.js". وسيستدعي هذا الرمز الدالة displayNetworkInfo كلما تغيّرت معلومات الشبكة.
navigator.connection.addEventListener('change', displayNetworkInfo);
هناك عنصر <h2> فارغ في صفحة index.html. حدِّد الآن الدالة displayNetworkInfo لتعرض معلومات الشبكة في العنصر <h2> وتستدعي الدالة.
function displayNetworkInfo() {
document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}
displayNetworkInfo();
إليك الحالة النهائية لتطبيق Glitch.
لاختباره مرة أخرى، اتّبِع الخطوات التالية:
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على
ملء الشاشة
.
- اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوّري البرامج".
- انقر على علامة التبويب الشبكة.
- انقر على القائمة المنسدلة التقييد التي يتم ضبطها على بدون تقييد تلقائيًا. اختَر الجيل الثالث السريع.
- أعِد تحميل التطبيق.
سيحدِّث التطبيق معلومات الشبكة إلى شبكة الجيل الثالث:
