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

Jonathan Bingham
X GitHub
Arthur Evans
X GitHub

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

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

अगर आपको लगता है कि शायद आप v0 एपीआई का इस्तेमाल कर रहे हैं, तो आपके लिए यह जानना ज़रूरी है:

आने वाले समय पर वापस जाएं: v0 एपीआई को बंद करना

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

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

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

बंद किए गए 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 को पूरी तरह से बंद कर दिया हो.

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

v0 पॉलीफ़िल का इस्तेमाल करना

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

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

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

v0 पॉलीफ़िल इंस्टॉल करें

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

  • 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 पॉलीफ़िल लोड करें

वेब कॉम्पोनेंट v0 पॉलीफ़िल को दो अलग-अलग बंडल के तौर पर दिया जाता है:

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

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

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

<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 का इस्तेमाल बंद करने पर आपकी साइट काम नहीं करेगी.

मदद चाहिए! मुझे नहीं पता कि मैं किन API का उपयोग कर रहा/रही हूं!

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

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

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

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

अगले चरण: v0 को बंद किया जा रहा है

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

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

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

खास जानकारी

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

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