تأكَّد من أنّ عامل الخدمة يعرف ما يجب فعله عند طلب ردّ جزئي.
تحتوي بعض طلبات HTTP على عنوان Range: يشير إلى أنّه يجب عرض جزء فقط من المورد الكامل. وتُستخدَم هذه الملفات عادةً لبث محتوى الصوت أو الفيديو للسماح بتحميل أجزاء أصغر من الوسائط عند الطلب، بدلاً من طلب الملف البعيد بالكامل دفعة واحدة.
عامل الخدمة هو رمز JavaScript يقع بين تطبيق الويب والشبكة، ما قد يعترض طلبات الشبكة الصادرة وينشئ ردودًا لها.
سابقًا، لم يكن أداء طلبات النطاق وعمال الخدمة يلعبون بشكل جيد معًا. كان من الضروري اتخاذ خطوات خاصة لتجنُّب أي نتائج سيئة في مشغّل الخدمات. ولحسن الحظ، فقد بدأ هذا الأمر في التغيير. في المتصفحات التي تعرض السلوك الصحيح، "ستعمل" طلبات النطاق فقط عند المرور من خلال مشغّل خدمات.
ما هي المشكلة؟
ننصح مشغّل الخدمات باستخدام أداة معالجة أحداث fetch التالية، والذي يأخذ كل طلب وارد ويمرِّره إلى الشبكة:
self.addEventListener('fetch', (event) => {
// The Range: header will not pass through in
// browsers that behave incorrectly.
event.respondWith(fetch(event.request));
});
في المتصفّحات التي تتضمّن سلوكًا غير صحيح، إذا تضمّن event.request عنوان Range:، سيتم تجاهل هذا العنوان بدون تنبيه. لن يتضمّن الطلب الذي استلمه الخادم البعيد Range: إطلاقًا. لن يؤدي ذلك بالضرورة إلى "إيقاف" أي شيء، لأنّه يُسمح من الناحية الفنية للخادم بعرض نص الاستجابة الكامل، مع رمز الحالة 200، حتى إذا كان العنوان Range: متوفّرًا في الطلب الأصلي. ومع ذلك، قد يؤدي ذلك إلى نقل بيانات أكثر مما هو مطلوب تمامًا من منظور المتصفح.
يمكن للمطوّرين الذين كانوا على دراية بهذا السلوك تفاديه من خلال البحث صراحةً عن توفُّر عنوان Range:، وعدم استدعاء event.respondWith() في حال توفّره. بإجراء ذلك، يزيل مشغّل الخدمات نفسه بفعالية من صورة إنشاء الردود، ويتم بدلاً من ذلك استخدام منطق شبكات المتصفِّح التلقائي، الذي يعرف كيفية الاحتفاظ بطلبات النطاقات.
self.addEventListener('fetch', (event) => {
// Return without calling event.respondWith()
// if this is a range request.
if (event.request.headers.has('range')) {
return;
}
event.respondWith(fetch(event.request));
});
ومع ذلك، من الآمن أن نقول إنّ معظم المطوّرين لم يكونوا على دراية بضرورة إجراء ذلك. ولم يكن السبب واضحًا لذلك. في النهاية، كان هذا التقييد بسبب حاجة المتصفّحات إلى مواكبة التغييرات في المواصفات الأساسية، ما ساعد في توفير هذه الوظيفة.
ما هي المشاكل التي تمّ إصلاحها؟
المتصفّحات التي تعمل بشكل صحيح تحتفظ بعنوان Range: عند تمرير event.request إلى fetch(). يعني ذلك أنّ رمز مشغّل الخدمات في المثال الأولي سيسمح للخادم البعيد برؤية عنوان Range:، في حال ضبطه من خلال المتصفِّح:
self.addEventListener('fetch', (event) => {
// The Range: header will pass through in browsers
// that behave correctly.
event.respondWith(fetch(event.request));
});
يحصل الخادم الآن على فرصة للتعامل مع طلب النطاق بشكل صحيح وعرض استجابة جزئية رمز الحالة 206.
ما هي المتصفحات التي تعمل بشكل صحيح؟
تشتمل الإصدارات الحديثة من Safari على الوظائف الصحيحة. ويعمل Chrome وEdge، بدءًا من الإصدار 87، بشكل صحيح أيضًا.
واعتبارًا من تشرين الأول (أكتوبر) 2020، لم يتمكن متصفّح Firefox من إصلاح هذا السلوك، لذا قد تحتاج إلى احتسابه أثناء نشر رمز مشغّل الخدمات في قناة الإصدار العلني.
إنّ التحقّق من صف "تضمين عنوان النطاق في طلب الشبكة" في لوحة بيانات اختبارات النظام الأساسي للويب هو أفضل طريقة للتأكّد مما إذا كان متصفّح معيّن قد صحّح هذا السلوك أم لا.
ماذا عن طلبات نطاق العرض من ذاكرة التخزين المؤقت؟
يمكن للعاملين في الخدمة تنفيذ أكثر من مجرد تمرير طلب إلى الشبكة. تتمثل إحدى حالات الاستخدام الشائعة في إضافة موارد، مثل ملفات الصوت والفيديو، إلى ذاكرة تخزين مؤقت محلية. ويمكن لعامل الخدمات تنفيذ الطلبات من ذاكرة التخزين المؤقت هذه، متجاوزًا الشبكة بالكامل.
تتيح جميع المتصفّحات، بما في ذلك Firefox، فحص الطلب داخل معالِج fetch، والتأكّد من توفّر عنوان Range:، ثم تنفيذ الطلب محليًا من خلال استجابة 206 صادرة من ذاكرة التخزين المؤقت. ومع ذلك، ليس من السهل استخدام رمز مشغّل الخدمات لتحليل عنوان Range: بشكل صحيح وعرض المقطع المناسب فقط من الاستجابة الكاملة المخزّنة مؤقتًا.
يمكن للمطوّرين الذين يريدون بعض المساعدة اللجوء إلى Workbox، وهي مجموعة من المكتبات التي تبسّط حالات استخدام مشغّلي الخدمات الشائعة. تنفِّذ workbox-range-request module جميع العمليات المنطقية اللازمة لعرض ردود جزئية من ذاكرة التخزين المؤقت مباشرةً. يمكن العثور على الوصفة الكاملة لحالة الاستخدام هذه في مستندات Workbox.
الصورة الرئيسية في هذه المشاركة هي من إعداد ناتالي ريا ريغس على Unسبلاش.