जानें कि ZDF ने ऑफ़लाइन सहायता, इंस्टॉल करने की सुविधा, और डार्क मोड जैसी आधुनिक सुविधाओं की मदद से, ZDF का एक प्रोग्रेसिव वेब ऐप्लिकेशन (पीडब्ल्यूए) कैसे बनाया.
जब ब्रॉडकास्टर ZDF अपनी फ़्रंटएंड टेक्नोलॉजी को फिर से डिज़ाइन करने के बारे में सोच रहा था करने का फ़ैसला लिया है, तो उन्होंने Search Ads 360 के नए वर्शन का इस्तेमाल करने के लिए, प्रोग्रेसिव वेब ऐप्लिकेशन स्ट्रीमिंग साइट ZDFmediathek. डेवलपमेंट एजेंसी Cellular ने वेब पर आधारित ZDF के प्लैटफ़ॉर्म के हिसाब से खास iOS और Android ऐप्लिकेशन जैसा ही है. कॉन्टेंट बनाने PWA इंस्टॉल करने की सुविधा, ऑफ़लाइन वीडियो चलाने, ऐनिमेशन ट्रांज़िशन वगैरह ऑफ़र करता है गहरे रंग वाला मोड.
सर्विस वर्कर जोड़ना
PWA की एक मुख्य सुविधा है, जिसमें ऑफ़लाइन सहायता मिलती है. ZDF के लिए ज़्यादातर मेहनताना वर्कबॉक्स, लाइब्रेरी का सेट और नोड मॉड्यूल की मदद से, कैश मेमोरी में डेटा सेव करने की अलग-अलग रणनीतियों को इस्तेमाल करना आसान हो जाता है. कॉन्टेंट बनाने ZDF PWA को TypeScript और React की मदद से बनाया गया है, इसलिए यह Workbox लाइब्रेरी का इस्तेमाल करता है पहले से बिल्ट-इन create-react-app पाने के लिए प्री-कैश मेमोरी वाली स्टैटिक एसेट. इससे ऐप्लिकेशन, डाइनैमिक बनाने पर फ़ोकस कर पाता है ऑफ़लाइन उपलब्ध होने पर वीडियो और उनका मेटाडेटा.
इसका बुनियादी आइडिया बहुत आसान है: वीडियो को फ़ेच करें और उसे ब्लॉब के तौर पर सेव करें IndexedDB. फिर प्लेबैक के दौरान, ऑनलाइन/ऑफ़लाइन इवेंट सुनें और डिवाइस के ऑफ़लाइन होने पर डाउनलोड किया गया वर्शन.
अफ़सोस की बात है कि चीज़ें पहले से ज़्यादा जटिल हो गई थीं. प्रोजेक्ट में से एक के लिए आधिकारिक ZDF वेब प्लेयर का उपयोग करना ज़रूरी था. यह प्लेयर, ऑफ़लाइन सहायता. प्लेयर इनपुट के तौर पर Content ID लेता है और ZDF API से बात करता है. और संबंधित वीडियो को चलाता है.
यहां पर वेब की सबसे शक्तिशाली सुविधाओं में से एक की बचत होती है: सर्विस वर्कर.
सर्विस वर्कर, खिलाड़ी के किए गए अलग-अलग अनुरोधों को बीच में रोक सकता है और IndexedDB से मिले डेटा के साथ जवाब देगा. यह साफ़ तौर पर ऑफ़लाइन जुड़ जाता है प्लेयर के कोड की एक भी लाइन को बदले बिना.
ऑफ़लाइन वीडियो काफ़ी बड़े होते हैं. इसलिए, एक बड़ा सवाल यह है कि डिवाइस में सेव किया जा सकता है. StorageManager की मदद से एपीआई जिसे ऐप्लिकेशन यह अनुमान लगा सकता है जगह खाली हो. साथ ही, स्टोरेज कम होने पर, उपयोगकर्ता को इसकी सूचना दें डाउनलोड शुरू कर रहा है. माफ़ करें, ब्राउज़र की सूची में Safari ब्राउज़र नहीं है लागू किया जा रहा है और लिखने के समय पर ज़्यादा अप-टू-डेट नहीं था अन्य ब्राउज़र किस तरह कोटा लागू करते हैं, इस बारे में जानकारी. इसलिए, टीम ने छोटी यूटिलिटी: डिवाइस. अब तक एक व्यापक लेख में दी गई जानकारी मौजूद है, जिसमें विवरण.
कस्टम इंस्टॉल प्रॉम्प्ट जोड़ना
ZDF के पीडब्ल्यूए की मदद से, ऐप्लिकेशन में अपने हिसाब से इंस्टॉल करने का तरीका उपलब्ध कराया जाता है. साथ ही, उपयोगकर्ताओं को ऐप्लिकेशन को तुरंत इंस्टॉल कर लें, ताकि वे अपना पहला वीडियो डाउनलोड कर सकें. यह है इंस्टॉल के लिए प्रॉम्प्ट देने का यह अच्छा समय है, क्योंकि उपयोगकर्ता ने साफ़ तौर पर ऐप्लिकेशन को ऑफ़लाइन इस्तेमाल करें.
डाउनलोड की गई फ़ाइलों को ऐक्सेस करने के लिए, ऑफ़लाइन पेज बनाना
जब डिवाइस, इंटरनेट से कनेक्ट न हो और उपयोगकर्ता वह पृष्ठ जो ऑफ़लाइन मोड में उपलब्ध नहीं है, तो उसके बजाय एक विशेष पृष्ठ दिखाया जाता है इस सूची में, पहले से डाउनलोड किए जा चुके सभी वीडियो की सूची होती है. अगर अभी तक डाउनलोड नहीं किया गया है).
ज़रूरत के हिसाब से बनाए गए फ़ीचर के लिए, फ़्रेम लोड होने की दर का इस्तेमाल करना
उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, ZDF के पीडब्ल्यूए में कुछ छोटे-छोटे ट्रांज़िशन शामिल किए गए हैं
ऐसा तब होता है, जब उपयोगकर्ता स्क्रोल या नेविगेट करता है. कम कीमत वाले डिवाइसों पर, जैसे कि
ऐनिमेशन का आम तौर पर उलटा असर होता है. इससे ऐप्लिकेशन की रफ़्तार धीमी हो जाती है और
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 का प्लान है कि वे अपने पीडब्ल्यूए में सुविधाएं जोड़ना जारी रखें. जैसे, लॉगिन करने के लिए मनमुताबिक बनाना, क्रॉस-डिवाइस और प्लैटफ़ॉर्म पर कॉन्टेंट देखना, और पुश नोटिफ़िकेशन.