Chrome 107 में नया

Adriana Jara

यहां आवश्यक जानकारी दी गई है:

मैं एड्रियाना जारा हूं. चलिए, जानते हैं और देखते हैं कि Chrome 107 में डेवलपर के लिए नया क्या है.

Screen Capture API में नई प्रॉपर्टी

इस वर्शन में, Screen Capture 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 में recordBlockStatus प्रॉपर्टी शामिल है, जो ब्राउज़र से सीधे तौर पर सिग्नल देती है. यह प्रॉपर्टी उन संसाधनों की पहचान करती है जो आपके पेज को तब तक दिखने से रोकते हैं, जब तक वे डाउनलोड नहीं हो जाते.

यहां दिया गया कोड स्निपेट दिखाता है कि अपने सभी संसाधनों की सूची कैसे पाएं और रेंडर होने वाले सभी संसाधनों की सूची बनाने के लिए, किस तरह की नई किस किस तरह की जानकारी ट्रिगर हो सकती है.

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

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

संसाधनों को लोड करने के तरीके को ऑप्टिमाइज़ करने से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी मिलती है. साथ ही, उपयोगकर्ताओं को बेहतर अनुभव मिलता है. Performance API के बारे में ज़्यादा जानने के लिए, एमडीएन के दस्तावेज़ देखें. साथ ही, रेंडर होने में रुकावट डालने वाले रिसॉर्स को खोजें और ऑप्टिमाइज़ करें.

PendingBeacon API का ऑरिजिन ट्रायल

एलान वाला PendingBeacon API का इस्तेमाल करके, ब्राउज़र यह कंट्रोल कर सकता है कि बीकन कब भेजा जाए.

बीकन, डेटा का एक बंडल होता है, जो किसी खास रिस्पॉन्स की उम्मीद किए बिना बैकएंड सर्वर पर भेजा जाता है.

ऐप्लिकेशन अक्सर किसी उपयोगकर्ता की विज़िट के अंत में इन बीकन को भेजना चाहते हैं, लेकिन इस "भेजें" कॉल के लिए अभी सही समय नहीं है. यह एपीआई, ब्राउज़र को ईमेल भेजने की जानकारी देता है, ताकि यह page unload या page hide पर बीकन की सुविधा दे सके. इसके लिए, डेवलपर को सही समय पर 'भेजें' कॉल को लागू करने की ज़रूरत नहीं होती.

ऑरिजिन ट्रायल के लिए साइन अप करें. एपीआई को आज़माकर देखें. साथ ही, इस्तेमाल के उदाहरणों को बेहतर बनाने के लिए, हमें अपने सुझाव/राय दें या शिकायत करें.

और ज़्यादा!

निश्चित रूप से बहुत कुछ है.

  • expect-ct एचटीटीपी हेडर अब काम नहीं करता.
  • rel एट्रिब्यूट अब <form> एलिमेंट पर काम करता है.
  • पिछली बार मैंने grid-template इंटरपोलेशन का ज़िक्र किया था, इस बार उसे शामिल किया जाना चाहिए.

इसके बारे में और पढ़ें

इसमें सिर्फ़ कुछ खास हाइलाइट शामिल हैं. Chrome 107 में और बदलावों के बारे में जानने के लिए, नीचे दिए गए लिंक देखें.

सदस्यता लें

अप-टू-डेट रहने के लिए, Chrome Developers के YouTube चैनल की सदस्यता लें. जब भी हम कोई नया वीडियो लॉन्च करेंगे, तब आपको ईमेल से सूचना मिलेगी.

मैं हूँ एड्रियाना जारा और Chrome 108 के रिलीज़ होते ही, मैं आपको बताऊँगी कि Chrome की नई चीज़ क्या है!