Chrome 97 में नया

Pete LePage

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

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

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

Web Transport

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

इसकी इंतज़ार की अवधि, वेबसोकेट की तुलना में कम होती है. साथ ही, यह 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 में नया क्या है!