ওয়েব কম্পোনেন্টস v1 এপিআই হল একটি ওয়েব প্ল্যাটফর্ম স্ট্যান্ডার্ড যা Chrome, Safari, Firefox এবং (শীঘ্রই) এজ-এ পাঠানো হয়েছে। v1 APIগুলি আক্ষরিক অর্থে লক্ষ লক্ষ সাইট দ্বারা ব্যবহৃত হয়, যা প্রতিদিন কোটি কোটি ব্যবহারকারীর কাছে পৌঁছায়। ড্রাফ্ট v0 API ব্যবহার করে বিকাশকারীরা মূল্যবান প্রতিক্রিয়া প্রদান করেছে যা স্পেসিফিকেশনগুলিকে প্রভাবিত করেছে। কিন্তু v0 API শুধুমাত্র Chrome দ্বারা সমর্থিত ছিল। ইন্টারঅপারেবিলিটি নিশ্চিত করার জন্য, গত বছরের শেষের দিকে, আমরা ঘোষণা করেছিলাম যে এই ড্রাফ্ট APIগুলিকে অবমূল্যায়ন করা হয়েছে এবং Chrome 73 অনুযায়ী অপসারণের জন্য নির্ধারিত ছিল৷
যেহেতু যথেষ্ট ডেভেলপাররা মাইগ্রেট করার জন্য আরও সময় চেয়েছেন, তাই এখনও ক্রোম থেকে APIগুলি সরানো হয়নি৷ v0 ড্রাফ্ট এপিআইগুলি এখন ফেব্রুয়ারি 2020-এর কাছাকাছি Chrome 80-এ অপসারণের জন্য লক্ষ্য করা হয়েছে ।
আপনি যদি বিশ্বাস করেন যে আপনি হয়তো v0 API ব্যবহার করছেন তা আপনার জানা দরকার:
- v0 API অক্ষম করে আপনার সাইট পরীক্ষা করুন । যদি আপনার সাইট প্রত্যাশিত হিসাবে কাজ করে, অভিনন্দন! আপনার কাজ শেষ ভবিষ্যতে ফিরে দেখুন: নির্দেশাবলীর জন্য v0 APIs নিষ্ক্রিয় করা ।
- আপনি যদি পলিমার লাইব্রেরি v1 বা v2 ব্যবহার করেন — পলিমার টিম দ্বারা পূর্বে প্রকাশিত নির্দেশাবলী অনুসরণ করুন৷
- আপনি যদি ছায়া DOM v0, কাস্টম উপাদান v0, বা HTML আমদানি ব্যবহার করেন তবে আপনাকে কিছু পলিফিল লোড করতে হবে। দেখুন v0 পলিফিল ব্যবহার করুন ।
- আপনি কি ব্যবহার করছেন তা নিশ্চিত না হলে চিন্তা করবেন না। সাহায্য দেখুন! আমি জানি না আমি কি API ব্যবহার করছি!
ভবিষ্যতে ফিরে যান: v0 APIs নিষ্ক্রিয় করা হচ্ছে
v0 API অক্ষম করে আপনার সাইট পরীক্ষা করতে, আপনাকে নিম্নলিখিত পতাকাগুলির সাথে কমান্ড লাইন থেকে Chrome শুরু করতে হবে:
--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports
কমান্ড লাইন থেকে শুরু করার আগে আপনাকে Chrome থেকে প্রস্থান করতে হবে। আপনার যদি Chrome Canary ইনস্টল করা থাকে, তাহলে এই পৃষ্ঠাটি Chrome-এ লোড করার সময় আপনি ক্যানারিতে পরীক্ষা চালাতে পারেন।
v0 API অক্ষম করে আপনার সাইট পরীক্ষা করতে:
- আপনি যদি Mac OS-এ থাকেন, তাহলে Chrome-এর জন্য এক্সিকিউটেবল পাথ খুঁজতে
chrome://versionএ ব্রাউজ করুন। ধাপ 3 এ আপনার পথের প্রয়োজন হবে। - Chrome প্রস্থান করুন।
কমান্ড-লাইন পতাকাগুলির সাথে Chrome পুনরায় চালু করুন:
--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImportsপতাকা দিয়ে Chrome শুরু করার নির্দেশাবলীর জন্য, পতাকা দিয়ে Chromium চালান দেখুন। উদাহরণস্বরূপ, উইন্ডোজে, আপনি চালাতে পারেন:
chrome.exe --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImportsআপনি ব্রাউজারটি সঠিকভাবে শুরু করেছেন তা দুবার চেক করতে, একটি নতুন ট্যাব খুলুন, 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 থেকে প্রস্থান করেছেন৷
অবশেষে, আপনার অ্যাপ লোড করুন এবং বৈশিষ্ট্যগুলির মাধ্যমে চালান। সবকিছু প্রত্যাশিত হিসাবে কাজ করে, আপনি সম্পন্ন.
v0 পলিফিল ব্যবহার করুন
ওয়েব কম্পোনেন্ট v0 পলিফিলগুলি এমন ব্রাউজারগুলিতে v0 APIগুলির জন্য সমর্থন প্রদান করে যেগুলি নেটিভ সমর্থন প্রদান করে না। v0 API অক্ষম করে আপনার সাইট Chrome-এ কাজ না করলে, আপনি সম্ভবত পলিফিল লোড করছেন না। বেশ কয়েকটি সম্ভাবনা রয়েছে:
- আপনি পলিফিলগুলি মোটেও লোড করছেন না। এই ক্ষেত্রে, আপনার সাইট ফায়ারফক্স এবং সাফারির মতো অন্যান্য ব্রাউজারে ব্যর্থ হওয়া উচিত।
- আপনি ব্রাউজার স্নিফিং এর উপর ভিত্তি করে শর্তসাপেক্ষে পলিফিল লোড করছেন। এই ক্ষেত্রে, আপনার সাইট অন্যান্য ব্রাউজারে কাজ করা উচিত. পলিফিল লোড করতে এগিয়ে যান।
অতীতে, পলিমার প্রকল্প দল এবং অন্যরা বৈশিষ্ট্য সনাক্তকরণের উপর ভিত্তি করে শর্তসাপেক্ষে পলিফিলগুলি লোড করার সুপারিশ করেছে৷ এই পদ্ধতিটি অক্ষম করা v0 API এর সাথে সূক্ষ্ম কাজ করা উচিত।
v0 পলিফিলস ইনস্টল করুন
ওয়েব কম্পোনেন্ট v0 পলিফিলগুলি কখনই npm রেজিস্ট্রিতে প্রকাশিত হয়নি। আপনি Bower ব্যবহার করে পলিফিল ইনস্টল করতে পারেন, যদি আপনার প্রকল্প ইতিমধ্যেই Bower ব্যবহার করে থাকে। অথবা আপনি একটি জিপ ফাইল থেকে ইনস্টল করতে পারেন।
Bower এর সাথে ইনস্টল করতে:
bower install --save webcomponents/webcomponentsjs#^0.7.0একটি জিপ ফাইল থেকে ইনস্টল করতে, GitHub থেকে সর্বশেষ 0.7.x রিলিজ ডাউনলোড করুন:
https://github.com/webcomponents/webcomponentsjs/releases/tag/v0.7.24
আপনি যদি একটি জিপ ফাইল থেকে ইনস্টল করেন, অন্য সংস্করণ বের হলে আপনাকে ম্যানুয়ালি পলিফিলস আপডেট করতে হবে। আপনি সম্ভবত আপনার কোড দিয়ে পলিফিলগুলি পরীক্ষা করতে চাইবেন।
v0 পলিফিল লোড করুন
ওয়েব কম্পোনেন্ট v0 পলিফিল দুটি পৃথক বান্ডেল হিসাবে সরবরাহ করা হয়েছে:
webcomponents-min.js | পলিফিল সব অন্তর্ভুক্ত. এই বান্ডেলে শ্যাডো DOM পলিফিল রয়েছে, যা অন্যান্য পলিফিলের তুলনায় অনেক বড় এবং এর কার্যক্ষমতার প্রভাব বেশি। আপনার ছায়া DOM সমর্থন প্রয়োজন হলে শুধুমাত্র এই বান্ডিলটি ব্যবহার করুন৷ |
webcomponents-lite-min.js | ছায়া DOM ছাড়া সমস্ত পলিফিল অন্তর্ভুক্ত করে। দ্রষ্টব্য: পলিমার 1.x ব্যবহারকারীদের এই বান্ডিলটি বেছে নেওয়া উচিত, যেহেতু ছায়া DOM এমুলেশন সরাসরি পলিমার লাইব্রেরিতে অন্তর্ভুক্ত ছিল। পলিমার 2.x ব্যবহারকারীদের পলিফিলের একটি ভিন্ন সংস্করণ প্রয়োজন। বিস্তারিত জানার জন্য পলিমার প্রকল্প ব্লগ পোস্ট দেখুন। |
এছাড়াও ওয়েব কম্পোনেন্ট পলিফিল প্যাকেজের অংশ হিসেবে পৃথক পলিফিল পাওয়া যায়। পৃথক পলিফিলগুলি আলাদাভাবে ব্যবহার করা একটি উন্নত বিষয়, এখানে কভার করা হয়নি।
পলিফিলগুলি নিঃশর্তভাবে লোড করতে:
<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-lite-min.js">
</script>
বা:
<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-min.js">
</script>
আপনি যদি গিটহাব থেকে সরাসরি পলিফিলগুলি ইনস্টল করেন তবে আপনাকে সেই পথটি সরবরাহ করতে হবে যেখানে আপনি পলিফিলগুলি ইনস্টল করেছেন।
আপনি যদি শর্তসাপেক্ষে বৈশিষ্ট্য সনাক্তকরণের উপর ভিত্তি করে পলিফিল লোড করেন, তাহলে v0 সমর্থন সরানো হলে আপনার সাইটটি কাজ করা চালিয়ে যেতে হবে।
আপনি যদি শর্তসাপেক্ষে ব্রাউজার স্নিফিং ব্যবহার করে পলিফিলগুলি লোড করেন (অর্থাৎ, নন-ক্রোম ব্রাউজারগুলিতে পলিফিলগুলি লোড করা হয়), Chrome থেকে v0 সমর্থন সরানো হলে আপনার সাইট ব্যর্থ হবে৷
সাহায্য! আমি জানি না আমি কি API ব্যবহার করছি!
আপনি যদি না জানেন যে আপনি কোন v0 API ব্যবহার করছেন - বা কোন API ব্যবহার করছেন - আপনি Chrome এ কনসোল আউটপুট পরীক্ষা করতে পারেন।
- আপনি যদি পূর্বে ফ্ল্যাগ দিয়ে Chrome শুরু করে থাকেন তাহলে v0 APIs অক্ষম করুন, Chrome বন্ধ করুন এবং এটিকে স্বাভাবিকভাবে পুনরায় চালু করুন।
- একটি নতুন Chrome ট্যাব খুলুন এবং আপনার সাইট লোড করুন৷
- DevTools কনসোল খুলতে Control+Shift+J (Windows, Linux, ChromeOS) অথবা Command+Option+J (Mac) টিপুন।
- অবচয় বার্তাগুলির জন্য কনসোল আউটপুট পরীক্ষা করুন। যদি অনেক কনসোল আউটপুট থাকে, তাহলে ফিল্টার বাক্সে "অবচন" লিখুন।
আপনি ব্যবহার করছেন এমন প্রতিটি v0 API-এর জন্য অবচয় বার্তা দেখতে পাবেন। উপরের আউটপুটটি HTML আমদানি, কাস্টম উপাদান v0 এবং ছায়া DOM v0 এর জন্য বার্তা দেখায়।
আপনি যদি এই APIগুলির মধ্যে এক বা একাধিক ব্যবহার করেন তবে দেখুন v0 পলিফিল ব্যবহার করুন ।
পরবর্তী পদক্ষেপ: v0 থেকে সরে যাওয়া
v0 পলিফিলগুলি লোড হচ্ছে তা নিশ্চিত করার জন্য আপনার সাইটটি কাজ করতে থাকবে যখন v0 APIগুলি সরানো হবে। আমরা ওয়েব কম্পোনেন্টস v1 এপিআই-এ যাওয়ার পরামর্শ দিই, যা ব্যাপকভাবে সমর্থিত।
আপনি যদি পলিমার লাইব্রেরি, X-Tag বা SkateJS-এর মতো একটি ওয়েব কম্পোনেন্ট লাইব্রেরি ব্যবহার করেন, তাহলে প্রথম ধাপ হল লাইব্রেরির নতুন সংস্করণগুলি উপলব্ধ আছে কিনা তা পরীক্ষা করা যা v1 API সমর্থন করে৷
যদি আপনার নিজের লাইব্রেরি থাকে, বা লাইব্রেরি ছাড়াই কাস্টম উপাদানগুলি লিখে থাকেন, তাহলে আপনাকে নতুন API-এ আপডেট করতে হবে। এই সম্পদ সাহায্য করতে পারে:
সারসংক্ষেপ
ওয়েব কম্পোনেন্টস v0 ড্রাফ্ট API গুলি চলে যাচ্ছে৷ আপনি যদি এই পোস্ট থেকে একটি জিনিস সরিয়ে নেন, তাহলে নিশ্চিত করুন যে আপনি v0 APIs নিষ্ক্রিয় করে আপনার অ্যাপটি পরীক্ষা করেছেন এবং প্রয়োজন অনুযায়ী পলিফিলগুলি লোড করুন ৷
দীর্ঘ সময়ের জন্য, আমরা আপনাকে সর্বশেষ API এ আপগ্রেড করতে এবং ওয়েব কম্পোনেন্ট ব্যবহার করতে উৎসাহিত করি!