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

साइट देखें

खास जानकारी

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

नतीजे

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

बैकग्राउंड

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

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

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

चुनौतियां

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

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

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

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

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

...इस वजह से, ऑफ़लाइन रणनीति काम करना बंद कर देती है.

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

इस बारे में विस्तार से बताने से पहले कि हम ऐप्लिकेशन को ऑफ़लाइन PWA में अपग्रेड किया.

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

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

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

इस्तेमाल की जा रही इमेज लोड करें

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

<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 की बदौलत, सैंटा ट्रैकर को पहले ही अलग-अलग सीन में साफ़-साफ़ बांटा गया है; हर एक के साथ सीन की खुद की डायरेक्ट्री है. हमने सैंटा ट्रैकर का सर्विस वर्कर डिज़ाइन किया है. यह एक ऐसी सुविधा है जो ऑफ़लाइन मोड में काम करती है. शेयर किए गए कोड बनाम 'सीन' को लेकर आपकी जानकारी को सुरक्षित रखने के लिए, उपयोगकर्ता का ब्राउज़र अंतर.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

नतीजा

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

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