ZDF ने ऑफ़लाइन और गहरे रंग वाले मोड का इस्तेमाल करके, वीडियो PWA कैसे बनाया

जानें कि ZDF ने कैसे एक प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) बनाया. इसमें ऑफ़लाइन सपोर्ट, इंस्टॉल करने की सुविधा, और गहरे रंग वाले मोड जैसी आधुनिक सुविधाएं शामिल हैं.

मार्टिन शिर्ले

स्कॉट फ़्राइज़न

जब ब्रॉडकास्टर ZDF अपने फ़्रंटएंड टेक्नोलॉजी स्टैक को फिर से डिज़ाइन करने के बारे में सोच रहा था, तब उसने अपनी स्ट्रीमिंग साइट ZDFmediathek के लिए, प्रोग्रेसिव वेब ऐप्लिकेशन को ध्यान से देखने का फ़ैसला किया. डेवलपमेंट एजेंसी Cellular ने वेब पर आधारित अनुभव को बनाने की चुनौती का सामना किया. यह अनुभव, ZDF के प्लैटफ़ॉर्म के हिसाब से बने iOS और Android ऐप्लिकेशन की तरह काम करता है. PWA में इंस्टॉल करने की सुविधा, ऑफ़लाइन वीडियो चलाने, ट्रांज़िशन ऐनिमेशन, और गहरे रंग वाला मोड जैसी सुविधाएं हैं.

सर्विस वर्कर को जोड़ना

ऑफ़लाइन सहायता पाना, PWA की एक मुख्य सुविधा है. ZDF के लिए ज़्यादातर काम Workbox की मदद से किया जाता है, जो लाइब्रेरी और नोड मॉड्यूल का एक सेट है जो कैश मेमोरी की अलग-अलग रणनीतियों के साथ काम करना आसान बनाता है. ZDF PWA को TypeScript और React की मदद से बनाया गया है, इसलिए यह स्टैटिक एसेट को पहले से कैश मेमोरी में सेव करने के लिए, create-react-app में पहले से मौजूद Workbox लाइब्रेरी का इस्तेमाल करता है. इससे ऐप्लिकेशन को ऑफ़लाइन सामग्री उपलब्ध कराने पर ध्यान केंद्रित करने में मदद मिलती है, इस मामले में वीडियो और उनका मेटाडेटा.

बुनियादी आइडिया काफ़ी आसान है: वीडियो को फ़ेच करें और उसे इंडेक्स किए गए डीबी में ब्लब के तौर पर स्टोर करें. फिर प्लेबैक के दौरान, ऑनलाइन/ऑफ़लाइन इवेंट सुनें और डिवाइस के ऑफ़लाइन होने पर डाउनलोड किए गए वर्शन पर स्विच करें.

बदकिस्मती से सब कुछ थोड़ा और जटिल हो गया. प्रोजेक्ट की एक ज़रूरी शर्त यह थी कि ZDF के आधिकारिक वेब प्लेयर का इस्तेमाल किया जाए, जो ऑफ़लाइन होने पर भी मदद नहीं करता. प्लेयर, इनपुट के तौर पर Content ID लेता है, ZDF API से बात करता है, और उससे जुड़े वीडियो को चलाता है.

यही वह जगह है जहां वेब की सबसे बड़ी सुविधाओं में से एक, बचाव के लिए काम आती है: सेवा कर्मचारी.

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

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

कस्टम इंस्टॉल प्रॉम्प्ट जोड़ना

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

डाउनलोड ऐक्सेस करने के लिए एक ऑफ़लाइन पेज बनाना

जब डिवाइस इंटरनेट से कनेक्ट नहीं होता और उपयोगकर्ता किसी ऐसे पेज पर जाता है जो ऑफ़लाइन मोड में उपलब्ध नहीं है, तो उस पेज के बजाय एक खास पेज दिखाया जाता है. इस पेज में, पहले डाउनलोड किए गए सभी वीडियो या (अगर अब तक कोई कॉन्टेंट डाउनलोड नहीं हुआ है, तो) ऑफ़लाइन सुविधा के बारे में कम शब्दों में जानकारी दी जाती है.

ज़रूरत के हिसाब से बनाई गई सुविधाओं के लिए, फ़्रेम लोड होने की दर का इस्तेमाल करना

उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, ZDF PWA में कुछ आसान ट्रांज़िशन शामिल हैं, जो उपयोगकर्ता के स्क्रोल करने या नेविगेट करने पर होते हैं. लो-एंड डिवाइस पर ऐसे ऐनिमेशन का आम तौर पर उलटा असर होता है और अगर वे 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 PWA न सिर्फ़ एक स्विच देता है, जिससे उपयोगकर्ता हल्के और गहरे रंग वाली थीम के बीच टॉगल कर सकते हैं. यह, ओएस के लिए तय की गई रंग की प्राथमिकताओं में हुए बदलावों पर भी प्रतिक्रिया देता है. इस तरह यह ऐप्लिकेशन, उन डिवाइस पर अपने-आप अपना लुक बदल देगा जिन पर दिन के समय थीम को बदलने के लिए शेड्यूल सेट अप किया गया है.

नतीजे

नया प्रोग्रेसिव वेब ऐप्लिकेशन, मार्च 2020 में सबके लिए उपलब्ध बीटा वर्शन के तौर पर बिना किसी सूचना के लॉन्च किया गया था. उसके बाद से, इसे काफ़ी सकारात्मक सुझाव मिले हैं. बीटा वर्शन पहले से जारी रहता है, लेकिन PWA अपने अस्थायी डोमेन के तहत ही चलता है. भले ही, PWA का सार्वजनिक तौर पर प्रमोशन न किया गया हो, लेकिन उपयोगकर्ताओं की संख्या लगातार बढ़ रही है. इनमें से ज़्यादातर Microsoft Store से आते हैं, जो Windows 10 के उपयोगकर्ताओं को PWA खोजने और उन्हें प्लैटफ़ॉर्म के हिसाब से बने ऐप्लिकेशन की तरह इंस्टॉल करने की अनुमति देता है.

आगे क्या करना है?

ZDF अपने PWA में सुविधाएं जोड़ना जारी रखने की योजना बना रहा है. इनमें मनमुताबिक बनाने के लिए लॉगिन, क्रॉस-डिवाइस और प्लैटफ़ॉर्म देखने की सुविधा, और पुश नोटिफ़िकेशन शामिल हैं.