PWA के तौर पर सैंटा ट्रैकर

साइट देखें

खास जानकारी

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

नतीजे

• सैंटा एक प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) है जो होम स्क्रीन पर जोड़ने (एटीएचएस) और ऑफ़लाइन मोड में काम करने की सुविधा देता है
• ज़रूरी शर्तें पूरी करने वाले 10% सेशन ATHS आइकॉन के ज़रिए शुरू हुए
• 75% उपयोगकर्ताओं ने नेटिव तौर पर, कस्टम एलिमेंट और शैडो डीओएम का इस्तेमाल किया. ये वेब कॉम्पोनेंट के दो मुख्य हिस्से हैं
• 81 का लाइटहाउस स्कोर
• सर्विस वर्कर एपीआई की मदद से ऑफ़लाइन होने पर, सिर्फ़ देखे गए सीन कैश मेमोरी में सेव करने और नई रिलीज़ पर उन्हें बिना किसी रुकावट के अपग्रेड करने के लिए लेज़ी लोडिंग से जुड़ा होता है

बैकग्राउंड

Google, छुट्टियों के दौरान Santa Tracker का इस्तेमाल करता है. हर साल, पूरे दिसंबर महीने में गेम और शिक्षा के अनुभवों के साथ सीज़न का जश्न मनाया जा सकता है. सैंटा को ज़रूरी आराम भी मिलता है. ऐसे में, छोटे जादूगर वेब और Android, दोनों के लिए सैंटा ट्रैकर को ओपन सोर्स के तौर पर रिलीज़ करने का काम करते हैं.

वेब पर, सैंटा ट्रैकर कई यूनीक 'सीन' वाली एक बड़ी और इंटरैक्टिव साइट है. इसे Polymer से लिखा गया है, जो ज़्यादातर आधुनिक ब्राउज़र पर काम करता है. उपयोगकर्ता का ब्राउज़र 'मॉडर्न' है या नहीं, इसका आकलन, सुविधा की पहचान से किया जाता है: सैंटा को Set और Web Performance API की ज़रूरत है.

2016 में, हमने ज़्यादातर दृश्यों के लिए ऑफ़लाइन अनुभव देने के लिए सांता ट्रैकर के पीछे के इंजन को अपग्रेड किया था. इसमें ऐसे सीन शामिल नहीं हैं जिनका बैक अप YouTube वीडियो से लिया गया हो या जो सैंटा की लाइव लोकेशन से जुड़े हों. यह भी मुमकिन है कि ये सीन सीधे तौर पर उत्तरी ध्रुव से जुड़ने पर ही उपलब्ध हों! 📶☃️

Android डिवाइस पर सैंटा ट्रैकर

चैलेंज

सैंटा का डिज़ाइन ऐसे प्रतिक्रियाशील डिज़ाइन का है जो सभी फ़ोन, टैबलेट और डेस्कटॉप पर अच्छी तरह से काम करता है. बेहतरीन मल्टीमीडिया कॉन्टेंट से, साइट पर बेहतरीन अनुभव मिलता है. इसमें, बेहतर विज़ुअल और छुट्टियों की थीम वाले ऑडियो भी शामिल हैं. हालांकि, सैंटा ट्रैकर का एक सामान्य बिल्ड कई सौ मेगाबाइट होता है! ऐसा कुछ वजहों से हो सकता है:

• सैंटा की पहचान, 35 से ज़्यादा भाषाओं में की जा सकती है. इसलिए, बहुत सारी एसेट की डुप्लीकेट कॉपी बनानी होगी.
• अलग-अलग प्लैटफ़ॉर्म पर अलग-अलग मीडिया की सुविधा होती है (जैसे, mp3 बनाम ogg).
• मल्टीमीडिया फ़ाइलें कभी-कभी अलग-अलग साइज़ और रिज़ॉल्यूशन में उपलब्ध होती हैं.

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

ये चुनौतियां:

• अलग-अलग 'सीन' में कॉन्टेंट दिखाने के लिए बड़े मल्टीमीडिया संसाधन
• पूरे महीने रिलीज़ किए गए बदलाव

...इसकी वजह से, साधारण ऑफ़लाइन रणनीति ठीक नहीं होती.

पॉलीमर की मदद से बनाया गया सैंटा

सैंटा को ऑफ़लाइन PWA में कैसे अपग्रेड किया गया है, इस पर जानने से पहले एक कदम पीछे जाएं और सैंटा के पूरे डिज़ाइन के बारे में बात करें.

सैंटा एक पेज वाला ऐप्लिकेशन है, जिसे मूल रूप से Polymer 0.5 में लिखा गया था. अब इसे Polymer के 1.7 वर्शन में अपग्रेड कर दिया गया है. सैंटा, कोड के एक शेयर किए गए सेट से मिलकर बना है. जैसे, राऊटर, शेयर की गई नेविगेशन ऐसेट वगैरह. इसमें कई यूनीक 'सीन' भी हैं.

हर सीन को अलग-अलग यूआरएल /village.html, /codelab.html, और /boatload.html से ऐक्सेस किया जा सकता है. साथ ही, यह सीन उसका वेब कॉम्पोनेंट है. जब कोई उपयोगकर्ता कोई सीन खोलता है, तो हम उसके सभी ज़रूरी एचटीएमएल और एसेट (इमेज, ऑडियो, सीएसएस, js) पहले से लोड कर देते हैं, जो सैंटा ट्रैकर रिपॉज़िटरी में /scenes/[[sceneName]] में मौजूद होते हैं. इस दौरान, उपयोगकर्ताओं को एक आसान प्रीलोडर दिखता है, जो गेम की प्रोग्रेस दिखाता है.

इस तरीके का मतलब है कि हमें उन सीन के लिए ग़ैर-ज़रूरी एसेट लोड करने की ज़रूरत नहीं पड़ती जो लोग वीडियो में नहीं देख रहे हैं (इसमें बहुत सारा डेटा होता है). इसका यह भी मतलब है कि हमें हर सीन के लिए ज़रूरी सभी एसेट का इंटरनल 'कैश मेनिफ़ेस्ट' रखना होगा. कैश मेनिफ़ेस्ट एक JSON फ़ाइल है, जिसमें फ़ाइल नाम से लेकर उसके कॉन्टेंट के MD5 हैश तक की मैपिंग की गई है.

इस्तेमाल किए जा रहे टेक्स्ट को लोड करें

यह मॉडल, बैंडविथ को बचाता है. साथ ही, पूरी साइट को एक साथ पहले से लोड करने के बजाय, सिर्फ़ उपयोगकर्ता के विज़िट किए गए सीन के लिए ज़रूरी संसाधन दिखाता है. सैंटा ट्रैकर, लोड होने के समय के बजाय रनटाइम के दौरान कस्टम एलिमेंट को अपग्रेड करने की Polymer की क्षमता का इस्तेमाल करता है. इस स्निपेट का इस्तेमाल करें:

<lazy-pages id="lazypages" selected-item="&#123;{selectedScene}}" ... >
    <dorf-scene id="village" route="village" icon="1f384" permanent
        mode$="[[mode]]"
        path$="scenes/dorf/dorf-scene_[[language]].html"
        class="santa-scene" allow-page-scrolling></dorf-scene>

    <boatload-scene route="boatload" icon="26f5"
        path$="scenes/boatload/boatload-scene_[[language]].html"
        loading-bg-color="#8fd7f7"
        loading-src="scenes/boatload/img/loading.svg"
        logo="scenes/boatload/img/logo.svg"
        class="santa-scene"></boatload-scene>

सैंटा ट्रैकर, किसी सीन को लोड करने के लिए यह तरीका अपनाता है. उदाहरण के लिए, boatload-scene:

1. शुरुआत में, सभी सीन एलिमेंट के बारे में जानकारी नहीं होती. इनमें <boatload-scene> को अतिरिक्त एट्रिब्यूट के साथ HTMLUnknownElement के तौर पर माना जाता है.
2. चुने गए सीन में बदलाव होने पर, <lazy-pages> एलिमेंट को सूचना मिलती है.
3. <lazy-pages> एलिमेंट, सीन के एलिमेंट और path एट्रिब्यूट की वैल्यू तय करता है और एचटीएमएल इंपोर्ट scenes/boatload/boatload-scene_en.html को लोड करता है. इसमें पॉलिमर एलिमेंट और उससे जुड़े दूसरे एलिमेंट शामिल होते हैं.
4. फ़्रेंडली प्रीलोडर दिखाया गया है.
5. एचटीएमएल इंपोर्ट के लोड और एक्ज़ीक्यूट होने के बाद, <boatload-scene> को पारदर्शी तरीके से, पॉलीमर के असल एलिमेंट में अपग्रेड कर दिया जाता है. 🎄🎉

इस नज़रिए की अपनी चुनौतियां हैं. उदाहरण के लिए, हम डुप्लीकेट वेब कॉम्पोनेंट शामिल नहीं करना चाहते. अगर दो सीन में एक ही एलिमेंट का इस्तेमाल हुआ है, जैसे कि paper-button, हम अपनी बिल्ड प्रोसेस के तहत इसे हटा देते हैं और इसके बजाय इसे सैंटा के शेयर किए गए कोड में शामिल कर देते हैं.

ऑफ़लाइन डिज़ाइन

Polymer और lazy-pages की वजह से सैंटा ट्रैकर को पहले से ही सीन में अच्छे से बांटा गया है. साथ ही, हर सीन की अपनी डायरेक्ट्री है. हमने सैंटा ट्रैकर का सर्विस वर्कर डिज़ाइन किया है. यह एक ऐसी चीज़ है जो उपयोगकर्ता के ब्राउज़र पर ऑफ़लाइन काम करने में मदद करती है. इसकी मदद से, शेयर किए गए कोड बनाम 'सीन' के फ़र्क़ को ध्यान में रखा जाता है.

सर्विस वर्कर के पीछे का सिद्धांत क्या है? जब साथ काम करने वाले ब्राउज़र पर कोई उपयोगकर्ता आपकी साइट लोड करता है, तो फ़्रंटएंड एचटीएमएल अनुरोध कर सकता है कि सर्विस वर्कर इंस्टॉल किया गया है. सैंटा ट्रैकर के लिए, सर्विस वर्कर /sw.js में रहता है. इससे install इवेंट ट्रिगर होता है, जो सैंटा के शेयर किए गए सभी कोड को प्री-कैश कर देगा. इसलिए, रनटाइम के दौरान कुछ भी फ़ेच करने की ज़रूरत नहीं है.

इंस्टॉल होने के बाद, सर्विस वर्कर सभी एचटीटीपी अनुरोधों को बीच में रोक सकता है. सैंटा ट्रैकर के लिए, फ़ैसले का आसान फ़्लो कुछ ऐसा दिखता है:

1. क्या अनुरोध पहले से ही कैश मेमोरी में सेव किया गया है?
   • बढ़िया! कैश मेमोरी में सेव किया गया रिस्पॉन्स दिखाएं.
2. क्या अनुरोध किसी सीन डायरेक्ट्री से मेल खाता है, जैसे कि " विश्लेषण/बोटलोड/बोटलोड-scene_en.html"?
   • उपयोगकर्ता को वापस करने से पहले, नेटवर्क का अनुरोध करें और नतीजे को कैश मेमोरी में सेव करें.
3. अगर ऐसा नहीं है, तो सामान्य नेटवर्क का अनुरोध करें.

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

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

हम इसे लाइव करेंगे

जैसा कि हमने बताया, सैंटा के छोटे जादूगर पूरे दिसंबर में कड़ी मेहनत करते हैं और उन्हें अक्सर महीने भर में नए अपडेट रिलीज़ करने पड़ते हैं. सैंटा ट्रैकर की रिलीज़ बनाए जाने पर, उसे एक यूनीक लेबल दिया जाता है—उदाहरण, v20161204112055, रिलीज़ का टाइमस्टैंप (4 दिसंबर, 2016 को 11:20:55).

लेबल की गई इस रिलीज़ के लिए, हम हर फ़ाइल का MD5 हैश जनरेट करते हैं और इसे अपने 'कैश मेमोरी' में सेव करते हैं. एक आधुनिक सॉलिड स्टेट डिस्क पर, यह सिस्टम बनाने की प्रोसेस में सिर्फ़ कुछ ही सेकंड का समय जोड़ता है.

हर रिलीज़ को Google के स्टैटिक कैश सर्वर पर एक यूनीक पाथ पर डिप्लॉय किया जाता है. इसका मतलब है कि पुरानी रिलीज़ कभी नहीं हटाई जाती हैं. इसका मतलब है कि एक नई रिलीज़ के बाद, सभी एसेट का एक अलग यूआरएल होगा—भले ही वे बदले न भी हों—और ब्राउज़र या सर्विस वर्कर की कैश मेमोरी में सेव की गई कोई भी चीज़ तब तक काम की नहीं रहेगी, जब तक हम कुछ और काम न करें.

हम "prod" संसाधनों के नए वर्शन का भी इस्तेमाल करते हैं—जो कि सैंटा का इंडेक्स एचटीएमएल और सर्विस वर्कर है. यह वर्शन https://santatracker.google.com/ पर मौजूद होता है. इससे पुराना वर्शन आ जाता है.

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

यहां से उपयोगकर्ता के ब्राउज़र को नया 'कैश मेनिफ़ेस्ट' दिखेगा. इसकी तुलना उपयोगकर्ता के मौजूदा कैश से की जाएगी और अगर एसेट का MD5 हैश अलग है, तो हम उन्हें कैश मेमोरी से मिटा देते हैं और ब्राउज़र से इसे फिर से फ़ेच करने के लिए कहते हैं. हालांकि, ज़्यादातर मामलों में, कैश मेमोरी में सेव किया गया कॉन्टेंट काफ़ी हद तक एक जैसा होता है या उसमें मामूली अंतर होता है.

सैंटा ट्रैकर में, सर्विस वर्कर को अपग्रेड करने से, उपयोगकर्ता का ब्राउज़र तुरंत फिर से लोड हो जाता है.

ध्यान दें: यह एक आक्रामक रणनीति है और इससे उस उपयोगकर्ता को परेशानी हो सकती है जो कोई गेम खेल रहा है. फिर से लोड करने की ऐसी रणनीति चुनें जो आपके अनुभवों के हिसाब से सही हो.

ऑफ़लाइन ब्राउज़िंग का अनुभव

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

एक छोटे बैनर से आपको ऑफ़लाइन ब्राउज़िंग के बारे में पता चलता है. जिन सीन को कैश मेमोरी में सेव नहीं किया जाता है वे "फ़्रीज़" होते हैं और उन पर क्लिक नहीं किया जा सकता. इस तरह, लोग उस कॉन्टेंट को ऐक्सेस नहीं कर पाएंगे जो उपलब्ध नहीं है.

सैंटा ट्रैकर, सैंटा के एपीआई को बार-बार अनुरोध करता है. अगर ये अनुरोध काम नहीं करते या टाइम आउट हो जाता है, तो हम मान लेते हैं कि उपयोगकर्ता ऑफ़लाइन है. हम ब्राउज़र की बिल्ट-इन navigator.onLine प्रॉपर्टी के बजाय, इस एपीआई का इस्तेमाल करते हैं: इससे हमें सिर्फ़ यह पता चलेगा कि उपयोगकर्ता ऑनलाइन है या नहीं. (इसे लाइ-फ़ाई भी कहा जाता है).

अंतरराष्ट्रीय कनेक्शन

हमारे ज़्यादातर उपयोगकर्ता अंग्रेज़ी (इसके बाद जैपनीज़, पॉर्चगीज़, स्पैनिश, और फ़्रेंच) भाषा में हैं, लेकिन सैंटा को 35 से ज़्यादा भाषाओं में बनाया और रिलीज़ किया गया है.

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

दूसरे शब्दों में कहें, तो सर्विस वर्कर के लिए सैंटा ट्रैकर का मौजूदा वर्शन असल में (build,language) का एक टपल है.

होम स्क्रीन पर जोड़ें

सैंटा ऑफ़लाइन काम करता है और एक सर्विस वर्कर उपलब्ध कराता है. इसलिए, ज़रूरी शर्तें पूरी करने वाले उपयोगकर्ताओं को इसे अपनी होम स्क्रीन पर इंस्टॉल करने के लिए कहा जाता है. साल 2016 में करीब 10% कॉन्टेंट, होम स्क्रीन के आइकॉन से लोड हुआ था.

नतीजा

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

हालांकि, सैंटा की पहचान अपने हिसाब से ही की जाती है, लेकिन इसके कई सिद्धांत, Polymer Project के ऐप्लिकेशन टूलबॉक्स में देखे जा सकते हैं. हमारा सुझाव है कि अगर आपको नए PWA को शुरुआत से बनाना है, तो इसे आज़माएं. इसके अलावा, अगर आपको फ़्रेमवर्क-ऐग्नोस्टिक तरीके का इस्तेमाल करना है, तो वर्कबॉक्स लाइब्रेरी को आज़माएं.