इस पेज का अनुवाद Cloud Translation API से किया गया है.

Chrome 97 में नया

Pete LePage

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

क्लाइंट और सर्वर के बीच रीयल-टाइम मैसेज भेजने के लिए, WebTransport एक नया विकल्प है.
सुविधा की पहचान का इस्तेमाल करके यह देखें कि ब्राउज़र पर किस तरह की स्क्रिप्ट काम करती हैं.
आखिर से अरे खोजना आसान हो जाता है.
और भी बहुत कुछ है.

नए साल की शुभकामनाएं! मेरा नाम पीट लीपेज है. आइए और जानें और देखें कि Chrome 97 में डेवलपर के लिए नया क्या है.

वेब ट्रांसपोर्ट

अगर अपने सर्वर और पेज के बीच मैसेज भेजने के लिए वेब सॉकेट या WebRTC डेटा चैनल एपीआई का इस्तेमाल किया जा रहा है, तो आपके लिए एक नया विकल्प है. WebTransport एक नया एपीआई है. यह क्लाइंट-सर्वर के साथ, दो-तरफ़ा, कम इंतज़ार के समय को दिखाता है.

इस वर्शन में, WebSockets के मुकाबले कम इंतज़ार का समय होता है. वहीं, RTC Data Channel API को पीयर-टू-पीयर मैसेज सेवा के लिए डिज़ाइन किया गया है. वहीं, Web Transport API को खास तौर पर क्लाइंट-सर्वर मैसेज सेवा के लिए डिज़ाइन किया गया है.

यह अपने Stream API के साथ भरोसेमंद तरीके से डेटा भेजने के साथ-साथ अपने datagram API का इस्तेमाल करके भी डेटा भेजने की सुविधा देता है. यह वेब वर्कर पर काम करता है. इसका मतलब है कि यह Streams का पालन करने वाला इंटरफ़ेस दिखाता है, इसलिए यह बैकप्रेशर को ऑप्टिमाइज़ करने की सुविधा देता है.

इसका इस्तेमाल करने के लिए, आपको एक ऐसे सर्वर की ज़रूरत होगी जो एचटीटीपी/3 के साथ काम करता हो. यह आम तौर पर WebRTC सर्वर को सेट अप करने और उसे बनाए रखने से आसान होता है. एक नया WebTransport इंस्टेंस खोलें, इसके कनेक्ट होने का इंतज़ार करें, और अब डेटा भेजना शुरू करें.

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

पूरी जानकारी के लिए, web.dev पर WebTransport के साथ प्रयोग करने वाला लेख देखें.

स्क्रिप्ट प्रकार सुविधा की पहचान

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

HTMLScriptElement.supports() डालें. इसका इस्तेमाल करके यह पता लगाया जा सकता है कि किस तरह की स्क्रिप्ट का इस्तेमाल किया जा सकता है. साथ ही, ब्राउज़र को सबसे सही विकल्प भेजा जा सकता है.

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

कलेक्शन के नए प्रोटोटाइप

जब JavaScript पहले से ज़्यादा आसान होता है, तब मुझे यह अच्छा लगता है. Array और TypedArray अब findLast() और findLastIndex() स्टैटिक तरीकों के साथ काम करते हैं.

ये फ़ंक्शन, find() और findIndex() की तरह ही होते हैं. हालांकि, इन्हें शुरू करने के बजाय, अरे के आखिर से खोजें.

उदाहरण के लिए, दस से बड़ी किसी अरे में आखिरी संख्या ढूंढने के लिए, findLast() को टेस्ट फ़ंक्शन से कॉल करें. इससे यह पता चलता है कि वैल्यू 10 से ज़्यादा है या नहीं. इसका मतलब है कि आप आगे बढ़ सकते हैं.

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

UA स्ट्रिंग में, Chrome 100 को एम्युलेट करें

कुछ ही महीनों में, हम Chrome 100, तीन डिजिट का वर्शन नंबर, को हिट करेंगे. वर्शन नंबर की जांच करने वाले या UA स्ट्रिंग को पार्स करने वाले किसी भी कोड की जांच करके, यह पक्का करना चाहिए कि उसमें तीन अंक हों.

#force-major-version-to-100 नाम का एक फ़्लैग मौजूदा वर्शन को 100 में बदल देगा, ताकि आप यह पक्का कर सकें कि सब कुछ ठीक से काम कर रहा हो.

Chrome, नए #force-major-version-to-100 विकल्प को हाइलाइट करने वाले पेज को फ़्लैग करता है

और ज़्यादा!

बेशक, यहां बहुत कुछ है.

फ़ॉर्म एंट्री में नई लाइनें अब Gecko और WebKit की तरह ही सामान्य हो गई हैं. इससे ब्राउज़र के बीच इंटरऑपरेबिलिटी बेहतर होती है.

हम क्लाइंट के संकेत के नामों को sec-ch से शुरू करके, उनका स्टैंडर्ड तय कर रहे हैं. उदाहरण के लिए, dpr को sec-ch-dpr हो जाता है. हम इन संकेतों के मौजूदा वर्शन काम करना जारी रखेंगे. हालांकि, आपको इन संकेतों के बंद होने और इन्हें हटाने की योजना बनानी होगी.

बंद किए गए <details> एलिमेंट अब खोजे जा सकते हैं और उन्हें लिंक किया जा सकता है. पेज में ढूंढें, ScrollToTextFragment और एलिमेंट फ़्रैगमेंट नेविगेशन का इस्तेमाल करने पर ये छिपे हुए एलिमेंट अपने-आप बड़े हो जाएंगे.

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

इसमें सिर्फ़ कुछ खास बातों के बारे में बताया गया है. Chrome 97 में दूसरे बदलावों के बारे में जानने के लिए, नीचे दिए गए लिंक देखें.

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

मैं हूं पीट लेपेज और Chrome 98 के रिलीज़ होते ही, मैं आपको बताऊंगी कि Chrome में नया क्या है!