वेब कॉम्पोनेंट से जुड़ा अपडेट - वर्शन 1 एपीआई में अपग्रेड करने के लिए ज़्यादा समय

Jonathan Bingham
X GitHub
Arthur Evans
X GitHub

वेब कॉम्पोनेंट v1 एपीआई, वेब प्लैटफ़ॉर्म का एक स्टैंडर्ड है. इसे Chrome, Safari, Firefox, और जल्द ही Edge में भी उपलब्ध कराया जाएगा. v1 एपीआई का इस्तेमाल लाखों साइटें करती हैं. इनकी मदद से, हर दिन अरबों उपयोगकर्ताओं तक पहुंचा जा सकता है. ड्राफ़्ट v0 एपीआई का इस्तेमाल करने वाले डेवलपर ने अहम सुझाव दिए, जिनसे स्पेसिफ़िकेशन पर असर पड़ा. हालांकि, v0 API सिर्फ़ Chrome पर काम करते थे. इंटरऑपरेबिलिटी (अलग-अलग सिस्टम के साथ काम करने की सुविधा) को पक्का करने के लिए, हमने पिछले साल के आखिर में एलान किया था कि ड्राफ़्ट एपीआई का इस्तेमाल नहीं किया जा सकता. साथ ही, हमने यह भी बताया था कि Chrome 73 से इन एपीआई को हटा दिया जाएगा.

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

अगर आपको लगता है कि आपने v0 एपीआई का इस्तेमाल किया है, तो आपको इन बातों के बारे में पता होना चाहिए:

बैक टू फ़्यूचर: v0 एपीआई बंद करना

v0 एपीआई बंद करके अपनी साइट की जांच करने के लिए, आपको कमांड-लाइन से Chrome को इन फ़्लैग के साथ शुरू करना होगा:

--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

कमांड लाइन से Chrome को शुरू करने से पहले, आपको Chrome से बाहर निकलना होगा. अगर आपने Chrome Canary इंस्टॉल किया हुआ है, तो Chrome में इस पेज को लोड रखते हुए, Canary में टेस्ट चलाया जा सकता है.

v0 एपीआई बंद करके अपनी साइट की जांच करने के लिए:

  1. अगर आपके पास Mac OS है, तो Chrome की एक्ज़िक्यूट की जा सकने वाली फ़ाइल का पाथ ढूंढने के लिए, chrome://version पर जाएं. आपको तीसरे चरण में पाथ की ज़रूरत पड़ेगी.
  2. Chrome से बाहर निकलें.

  3. कमांड-लाइन फ़्लैग की मदद से Chrome को रीस्टार्ट करें:

    --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

    फ़्लैग के साथ Chrome को शुरू करने के निर्देशों के लिए, फ़्लैग के साथ Chromium चलाना लेख पढ़ें. उदाहरण के लिए, Windows पर ये काम किए जा सकते हैं:

    chrome.exe --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

  4. यह पक्का करने के लिए कि आपने ब्राउज़र को सही तरीके से शुरू किया है, एक नया टैब खोलें. इसके बाद, DevTools कंसोल खोलें और यह कमांड चलाएं:

    console.log(
"Native HTML Imports?", 'import' in document.createElement('link'),
"Native Custom Elements v0?", 'registerElement' in document,
"Native Shadow DOM v0?", 'createShadowRoot' in document.createElement('div'));

    अगर सब कुछ उम्मीद के मुताबिक काम कर रहा है, तो आपको ये दिखेंगे:

    Native HTML Imports? false Native Custom Elements v0? false Native Shadow DOM v0? false

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

  5. आखिर में, अपना ऐप्लिकेशन लोड करें और सुविधाओं को आज़माएं. अगर सब कुछ उम्मीद के मुताबिक काम करता है, तो आपका काम हो गया.

v0 polyfills का इस्तेमाल करना

Web Components v0 के पॉलीफ़िल, ऐसे ब्राउज़र पर v0 एपीआई के साथ काम करते हैं जो नेटिव सपोर्ट नहीं देते. अगर v0 एपीआई बंद होने पर भी आपकी साइट Chrome पर काम नहीं कर रही है, तो हो सकता है कि आपने पॉलीफ़िल लोड न किए हों. इसके कई कारण हो सकते हैं:

  • आपने पॉलीफ़िल को लोड नहीं किया है. इस मामले में, Firefox और Safari जैसे अन्य ब्राउज़र पर आपकी साइट काम नहीं करेगी.
  • ब्राउज़र स्निफ़िंग के आधार पर, शर्तों के मुताबिक पॉलीफ़िल लोड किए जा रहे हैं. ऐसे में, आपकी साइट अन्य ब्राउज़र पर काम करनी चाहिए. पॉलीफ़िल लोड करें पर जाएं.

पहले, Polymer प्रोजेक्ट टीम और अन्य लोगों ने सुविधा का पता लगाने के आधार पर, पॉलीफ़िल को शर्त के साथ लोड करने का सुझाव दिया था. यह तरीका, v0 एपीआई बंद होने पर भी ठीक से काम करेगा.

v0 polyfills इंस्टॉल करना

Web Components v0 के पॉलीफ़िल, npm रजिस्ट्री में कभी पब्लिश नहीं किए गए थे. अगर आपका प्रोजेक्ट पहले से ही Bower का इस्तेमाल कर रहा है, तो Bower का इस्तेमाल करके polyfills इंस्टॉल किए जा सकते हैं. इसके अलावा, आपके पास ZIP फ़ाइल से भी इंस्टॉल करने का विकल्प है.

  • Bower की मदद से इंस्टॉल करने के लिए:

    bower install --save webcomponents/webcomponentsjs#^0.7.0

  • zip फ़ाइल से इंस्टॉल करने के लिए, GitHub से 0.7.x का नया वर्शन डाउनलोड करें:

    https://github.com/webcomponents/webcomponentsjs/releases/tag/v0.7.24

    अगर आपने zip फ़ाइल से इंस्टॉल किया है, तो कोई दूसरा वर्शन आने पर आपको मैन्युअल तरीके से पॉलीफ़िल अपडेट करने होंगे. आपको अपने कोड में पॉलीफ़िल की जांच करनी होगी.

v0 polyfills लोड करना

Web Components v0 के पॉलीफ़िल, दो अलग-अलग बंडल के तौर पर उपलब्ध कराए जाते हैं:

webcomponents-min.js इसमें सभी पॉलीफ़िल शामिल होते हैं. इस बंडल में शैडो DOM polyfill शामिल है, जो अन्य polyfills से काफ़ी बड़ा है और परफ़ॉर्मेंस पर ज़्यादा असर डालता है. इस बंडल का इस्तेमाल सिर्फ़ तब करें, जब आपको शैडो DOM की सुविधा की ज़रूरत हो.
webcomponents-lite-min.js इसमें शैडो डीओएम को छोड़कर, सभी पॉलीफ़िल शामिल हैं. ध्यान दें: Polymer 1.x के उपयोगकर्ताओं को यह बंडल चुनना चाहिए, क्योंकि शैडो DOM इम्यूलेशन को सीधे तौर पर, Polymer लाइब्रेरी में शामिल किया गया था. Polymer 2.x के उपयोगकर्ताओं को, polyfills के किसी दूसरे वर्शन की ज़रूरत होती है. ज़्यादा जानकारी के लिए, Polymer प्रोजेक्ट की ब्लॉग पोस्ट देखें.

वेब कॉम्पोनेंट के पॉलीफ़िल पैकेज के हिस्से के तौर पर, अलग-अलग पॉलीफ़िल भी उपलब्ध हैं. अलग-अलग polyfills का इस्तेमाल करना एक बेहतर विषय है. इस बारे में यहां नहीं बताया गया है.

बिना किसी शर्त के पॉलीफ़िल लोड करने के लिए:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-lite-min.js">
</script>

या:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-min.js">
</script>

अगर आपने पॉलीफ़िल को सीधे GitHub से इंस्टॉल किया है, तो आपको वह पाथ देना होगा जहां आपने पॉलीफ़िल इंस्टॉल किए हैं.

अगर आपने सुविधा का पता लगाने के आधार पर, पॉलीफ़िल को शर्त के साथ लोड किया है, तो v0 के लिए सहायता हटाने के बाद भी आपकी साइट काम करती रहेगी.

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

मदद चाहिए! मुझे नहीं पता कि मैं कौनसे एपीआई इस्तेमाल कर रहा/रही हूं!

अगर आपको नहीं पता कि आपने v0 एपीआई में से किसी का इस्तेमाल किया है या नहीं या किस एपीआई का इस्तेमाल किया है, तो Chrome में कंसोल आउटपुट देखें.

  1. अगर आपने पहले v0 एपीआई को बंद करने के लिए, Chrome को फ़्लैग के साथ शुरू किया था, तो Chrome को बंद करें और उसे सामान्य तरीके से रीस्टार्ट करें.
  2. Chrome में नया टैब खोलें और अपनी साइट लोड करें.
  3. DevTools का कंसोल खोलने के लिए, Control+Shift+J (Windows, Linux, ChromeOS) या Command+Option+J (Mac) दबाएं.
  4. बंद किए जाने के मैसेज के लिए, कंसोल आउटपुट देखें. अगर कंसोल आउटपुट बहुत ज़्यादा है, तो फ़िल्टर बॉक्स में "अमान्य" डालें.
इस्तेमाल न करने से जुड़ी चेतावनियां दिखाने वाली कंसोल विंडो

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

अगर इनमें से एक या उससे ज़्यादा एपीआई का इस्तेमाल किया जा रहा है, तो v0 polyfills का इस्तेमाल करना लेख पढ़ें.

अगले चरण: v0 से माइग्रेट करना

यह पक्का करने पर कि v0 polyfills लोड हो रहे हैं, यह पक्का किया जा सकता है कि v0 API हटाए जाने के बाद भी आपकी साइट काम करती रहेगी. हमारा सुझाव है कि आप वेब कॉम्पोनेंट v1 एपीआई का इस्तेमाल करें. ये एपीआई ज़्यादातर ब्राउज़र पर काम करते हैं.

अगर Polymer लाइब्रेरी, X-Tag या SkateJS जैसी वेब कॉम्पोनेंट लाइब्रेरी का इस्तेमाल किया जा रहा है, तो सबसे पहले यह देखें कि लाइब्रेरी के ऐसे नए वर्शन उपलब्ध हैं या नहीं जो v1 एपीआई के साथ काम करते हैं.

अगर आपके पास अपनी लाइब्रेरी है या आपने लाइब्रेरी के बिना कस्टम एलिमेंट लिखे हैं, तो आपको नए एपीआई पर अपडेट करना होगा. इन संसाधनों से आपको मदद मिल सकती है:

खास जानकारी

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

हमारा सुझाव है कि आप आने वाले समय में, नए एपीआई पर अपग्रेड करें और वेब कॉम्पोनेंट का इस्तेमाल करते रहें!