किसी सर्विस वर्कर में रेंज के अनुरोधों को मैनेज करना

Jeff Posnick

पब्लिश करने की तारीख: 6 अक्टूबर, 2020

कुछ एचटीटीपी अनुरोधों में 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));
});

हालांकि, यह कहना सही होगा कि ज़्यादातर डेवलपर को इस बारे में पता नहीं था कि ऐसा करना ज़रूरी है. साथ ही, यह भी साफ़ तौर पर नहीं बताया गया था कि क्यों ऐसा करना ज़रूरी है. इस समस्या की वजह यह थी कि ब्राउज़र को बुनियादी स्पेसिफ़िकेशन में हुए बदलावों के साथ काम करने के लिए अपडेट करना पड़ा था. इससे इस सुविधा के लिए सहायता जोड़ी गई.

क्या ठीक किया गया है?

सही तरीके से काम करने वाले ब्राउज़र, event.request को fetch() में पास किए जाने पर, Range: हेडर को बनाए रखते हैं. इसका मतलब है कि मेरे शुरुआती उदाहरण में मौजूद सर्विस वर्कर कोड, रिमोट सर्वर को 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 के दस्तावेज़ में देखी जा सकती है.