Chrome 97 में नया

Pete LePage

यहां आपके जानने योग्य तथ्य दिए गए हैं:

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

Web Transport

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

इसकी इंतज़ार की अवधि, वेबसोकेट की तुलना में कम होती है. साथ ही, यह RTC डेटा चैनल एपीआई के मुकाबले बेहतर है. RTC डेटा चैनल एपीआई को पीयर-टू-पीयर मैसेजिंग के लिए डिज़ाइन किया गया है, जबकि वेब ट्रांसपोर्ट एपीआई को खास तौर पर क्लाइंट-सर्वर मैसेजिंग के लिए डिज़ाइन किया गया है.

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

इसका इस्तेमाल करने के लिए, आपको एचटीटीपी/3 के साथ काम करने वाला सर्वर चाहिए. आम तौर पर, यह वेबआरटीसी सर्वर को सेट अप और मैनेज करने से आसान होता है. नया 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 के साथ प्रयोग करना लेख पढ़ें.

स्क्रिप्ट टाइप की सुविधा का पता लगाना

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

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 से ज़्यादा वैल्यू वाले ऐरे में आखिरी वैल्यू ढूंढें. इसके लिए, 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 डेवलपर के YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.

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