Chrome 107-এ নতুন

Adriana Jara

আপনার যা জানা প্রয়োজন:

আমি আদ্রিয়ানা জারা। আসুন, Chrome 107-এ ডেভেলপারদের জন্য নতুন কী আছে তা খুঁটিয়ে দেখে নেওয়া যাক।

Screen Capture API-তে নতুন প্রপার্টি

এই ভার্সনে, স্ক্রিন শেয়ারিংয়ের অভিজ্ঞতা উন্নত করতে স্ক্রিন ক্যাপচার API নতুন প্রপার্টি যোগ করে।

DisplayMediaStreamOptions, selfBrowserSurface প্রপার্টি যোগ করেছেন। এই হিন্টের মাধ্যমে অ্যাপ্লিকেশন ব্রাউজারকে বলতে পারে যে getDisplayMedia() কল করার সময় বর্তমান ট্যাব বাদ দেওয়া উচিত।

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

এটি ভুলবশত নিজের ছবি ক্যাপচার করা আটকায় এবং ভিডিও কনফারেন্সে আমরা যে "হল অফ মিরর" এফেক্ট দেখতে পাই তা এড়িয়ে যায়।

DisplayMediaStreamOptions-এর কাছে এখন surfaceSwitching প্রপার্টিও আছে। স্ক্রিন শেয়ার করার সময় ট্যাব পরিবর্তন করার জন্য Chrome কোনও বোতাম দেখাবে কিনা তা প্রোগ্রাম্যাটিক পদ্ধতিতে কন্ট্রোল করার জন্য এই প্রপার্টি একটি বিকল্প যোগ করে। এইসব বিকল্প getDisplayMedia()-এ পাস করা হবে। Share this tab instead বোতাম ব্যবহারকারীদের ভিডিও-কনফারেন্সিং ট্যাবে ফিরে না গিয়ে বা ট্যাবের দীর্ঘ তালিকা থেকে বেছে না নিয়েই একটি নতুন ট্যাবে স্যুইচ করার অনুমতি দেয়, তবে ওয়েব অ্যাপ্লিকেশন এটি ম্যানেজ না করলে আচরণটি শর্তসাপেক্ষে প্রকাশ করা হয়।

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

এছাড়াও, MediaTrackConstraintSet displaySurface প্রপার্টি যোগ করে। getDisplayMedia() কল করা হলে, ব্রাউজার ব্যবহারকারীকে ডিসপ্লে সারফেসের বিকল্প অফার করে: ট্যাব, উইন্ডো বা মনিটর। displaySurface কনস্ট্রেন্ট ব্যবহার করে, ওয়েব অ্যাপ এখন ব্রাউজারকে ইঙ্গিত দিতে পারে যে এটি সারফেসের ধরনগুলির মধ্যে একটিকে আরও স্পষ্টভাবে অফার করতে পছন্দ করে কিনা।

যেমন, এটি ভুলবশত প্রয়োজনের চেয়ে বেশি শেয়ার করা আটকায় কারণ ডিফল্ট হিসেবে একটি ট্যাব শেয়ার করা যেতে পারে। পুরনো ও নতুন মিডিয়া পিকার প্রম্পটের স্ক্রিনশট।

রেন্ডার ব্লকিং রিসোর্স শনাক্ত করুন

ব্যবহারকারীদের দ্রুত অভিজ্ঞতা প্রদান করার জন্য ডেভেলপারদের কাছে কোনও পৃষ্ঠার পারফর্ম্যান্স সম্পর্কে নির্ভরযোগ্য ইনসাইট থাকা অত্যন্ত গুরুত্বপূর্ণ। এখনও পর্যন্ত ডেভেলপাররা কোনও রিসোর্স রেন্ডার ব্লকিং কিনা তা নির্ধারণ করার জন্য জটিল হিউরিস্টিকসের উপর নির্ভর করেছেন।

এখন Performance API-তে renderBlockingStatus প্রপার্টি অন্তর্ভুক্ত করা হয়েছে যা ব্রাউজার থেকে সরাসরি সিগন্যাল প্রদান করে। এই সিগন্যাল সেইসব রিসোর্স শনাক্ত করে যেগুলি ডাউনলোড না হওয়া পর্যন্ত আপনার পৃষ্ঠা দেখাতে বাধা দেয়।

এখানে দেখানো কোড স্নিপেট থেকে বোঝা যায় যে কীভাবে আপনার সব রিসোর্সের তালিকা পাওয়া যায় এবং রেন্ডার ব্লক করছে এমন সব রিসোর্সের তালিকা তৈরি করতে নতুন renderBlockingStatus প্রপার্টি ব্যবহার করা যায়।

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

Core Web Vitals এবং আরও ভালো ব্যবহারকারীর অভিজ্ঞতা প্রদান করার জন্য আপনার রিসোর্স লোড করার পদ্ধতি অপ্টিমাইজ করা সাহায্য করে, Performance API সম্পর্কে আরও জানতে MDN ডকুমেন্টেশন দেখুন, সেইসব রেন্ডার ব্লকিং রিসোর্স খুঁজুন এবং অপ্টিমাইজ করুন।

PendingBeacon API-এর অরিজিন ট্রায়াল

ডিক্লেরেটিভ PendingBeacon API ব্রাউজারকে, কখন বিকন পাঠানো হবে তা কন্ট্রোল করতে দেয়।

বেকন হল ডেটার একটি বান্ডেল যা কোনও নির্দিষ্ট উত্তরের প্রত্যাশা না করেই ব্যাকএন্ড সার্ভারে পাঠানো হয়।

অ্যাপ্লিকেশনগুলি প্রায়শই ব্যবহারকারীর ভিজিটের শেষে এই বিকনগুলি পাঠাতে চায়, তবে সেই "পাঠান" কল করার জন্য কোনও উপযুক্ত সময় নেই। এই API ব্রাউজারকে ডেটা পাঠানোর দায়িত্ব দেয়, যাতে এটি page unload বা page hide-এ বিকন সাপোর্ট করতে পারে। এর ফলে ডেভেলপারকে সঠিক সময়ে কল পাঠানোর জন্য কোড লিখতে হয় না।

অরিজিন ট্রায়ালের জন্য সাইন-আপ করুন, API ব্যবহার করে দেখুন এবং ব্যবহারের ক্ষেত্র উন্নত করতে আমাদের মতামত পাঠান।

এবং আরও অনেক কিছু!

অবশ্যই, আরও অনেক কিছু আছে।

  • expect-ct http হেডার বন্ধ করা হয়েছে।
  • rel অ্যাট্রিবিউট এখন <form> এলিমেন্টে কাজ করে।
  • আমি শেষবার grid-template ইন্টারপোলেশন উল্লেখ করেছি, এবার এটি অন্তর্ভুক্ত করা উচিত।

আরও পড়ুন

এতে শুধু কিছু গুরুত্বপূর্ণ হাইলাইট কভার করা হয়। Chrome 107-এ অতিরিক্ত পরিবর্তনের জন্য নিচের লিঙ্কগুলি দেখুন।

সাবস্ক্রাইব করুন

আপ-টু-ডেট থাকতে, Chrome Developers YouTube চ্যানেল সাবস্ক্রাইব করুন এবং আমরা নতুন ভিডিও লঞ্চ করলেই আপনি ইমেল বিজ্ঞপ্তি পাবেন।

আমি আদ্রিয়ানা জারা, Chrome 108 রিলিজ হওয়ার সাথে সাথেই আমি এখানে এসে আপনাকে Chrome-এর নতুন ফিচার সম্পর্কে জানাব!