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

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

विज्ञापन दिखाने से रोकने वाले संसाधनों की पहचान करना

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

अब परफ़ॉर्मेंस एपीआई में 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');

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

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

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

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

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

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

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

इसके अलावा, और भी कई चीज़ें हैं.

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

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

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

सदस्यता लें

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

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