Chrome 107 में नया

Adriana Jara

यहां कुछ ज़रूरी जानकारी दी गई है:

मेरा नाम एड्रियाना जारा है. चलिए, Chrome 107 में डेवलपर के लिए उपलब्ध नई सुविधाओं के बारे में जानते हैं.

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 कंस्ट्रेंट का इस्तेमाल करके, वेब ऐप्लिकेशन अब ब्राउज़र को यह बता सकता है कि उसे किस तरह के सरफ़ेस को ज़्यादा प्रमुखता से दिखाना है.

उदाहरण के लिए, इससे गलती से ज़रूरत से ज़्यादा जानकारी शेयर करने से बचा जा सकता है. ऐसा इसलिए, क्योंकि एक टैब शेयर करना डिफ़ॉल्ट तौर पर सेट हो सकता है. मीडिया पिकर के पुराने और नए प्रॉम्प्ट के स्क्रीनशॉट.

रेंडर ब्लॉक करने वाले संसाधनों की पहचान करना

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

अब परफ़ॉर्मेंस एपीआई में 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 को बेहतर बनाने और उपयोगकर्ताओं को बेहतर अनुभव देने में मदद मिलती है. परफ़ॉर्मेंस एपीआई के बारे में ज़्यादा जानने के लिए, एमडीएन दस्तावेज़ देखें. साथ ही, रेंडरिंग को ब्लॉक करने वाले रिसॉर्स ढूंढें और उन्हें ऑप्टिमाइज़ करें.

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

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

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

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

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

और भी कई सुविधाएं!

बेशक, इसमें और भी बहुत कुछ है.

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

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

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

सदस्यता लें

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

मैं एड्रियाना जारा हूं. Chrome 108 के रिलीज़ होते ही, मैं आपको Chrome में मौजूद नई सुविधाओं के बारे में बताऊंगी!