Chrome 124 में नया

Pete LePage

Chrome 124 के हाइलाइट यहां दिए गए हैं:

क्या आपको पूरी जानकारी चाहिए? Chrome 124 के रिलीज़ नोट देखें.

JavaScript में डिक्लेरेटिव शैडो डीओएम का इस्तेमाल करना

दो नए एपीआई हैं, जिनकी मदद से एलान वाले शैडो DOM का इस्तेमाल, JavaScript से किया जा सकता है.

setHTMLUnsafe(), innerHTML जैसा ही है. इसकी मदद से, किसी एलिमेंट के अंदरूनी एचटीएमएल को दी गई स्ट्रिंग पर सेट किया जा सकता है. इससे तब मदद मिलती है, जब आपके पास ऐसा एचटीएमएल हो जिसमें इस तरह का एलान वाला शैडो डीओम शामिल हो.

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

अगर सिर्फ़ innerHTML का इस्तेमाल किया जाता है, तो ब्राउज़र इसे सही तरीके से पार्स नहीं करेगा और कोई शैडो DOM नहीं होगा. हालांकि, setHTMLUnsafe() का इस्तेमाल करने पर, आपका शैडो डीओएम बन जाता है और एलिमेंट को आपकी उम्मीद के मुताबिक पार्स किया जाता है.

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

दूसरा एपीआई parseHTMLUnsafe() है और यह DOMParser.parseFromString() की तरह ही काम करता है.

ये दोनों एपीआई असुरक्षित हैं. इसका मतलब है कि इनमें इनपुट को सुरक्षित बनाने की कोई प्रोसेस नहीं होती. इसलिए, आपको यह पक्का करना होगा कि उन्हें जो भी खिलाया जा रहा है वह सुरक्षित हो. हमें उम्मीद है कि आने वाले समय में, हम ऐसा वर्शन देखेंगे जिसमें इनपुट को सुरक्षित बनाने की सुविधा होगी.

आखिरकार, ये दोनों एपीआई Firefox और Safari के नए वर्शन में पहले से ही काम कर रहे हैं!

WebSocket Stream API

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

लेकिन, अगर डेटा आपके प्रोसेस करने की क्षमता से ज़्यादा तेज़ी से आता है, तो क्या होगा?

इसे बैक प्रेशर कहा जाता है. इससे आपको गंभीर समस्याएं हो सकती हैं. माफ़ करें, WebSocket API में बैकप्रेशर से निपटने का कोई अच्छा तरीका नहीं है.

WebSocket Stream API की मदद से, स्ट्रीम और वेब सॉकेट का इस्तेमाल किया जा सकता है. इसका मतलब है कि बिना किसी अतिरिक्त शुल्क के बैक प्रेशर लागू किया जा सकता है.

नया WebSocketStream बनाकर शुरू करें और उसे WebSocket सर्वर का यूआरएल दें.

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

इसके बाद, कनेक्शन खुलने का इंतज़ार करें. इससे, ReadableStream और WritableStream दिखेगा. ReadableStream.getReader() तरीके को कॉल करने पर, आपको एक ReadableStreamDefaultReader मिलता है. इसके बाद, स्ट्रीम खत्म होने तक उससे डेटा read() किया जा सकता है.

डेटा लिखने के लिए, WritableStream.getWriter() मेथड को कॉल करें. इससे आपको एक WritableStreamDefaultWriter मिलता है, जिसे write() डेटा में डाला जा सकता है.

ट्रांज़िशन में हुए सुधार देखना

मुझे व्यू ट्रांज़िशन की सुविधाओं को लेकर खुशी हो रही है. Chrome 124 में दो नई सुविधाएं जोड़ी गई हैं, जिन्हें व्यू ट्रांज़िशन को आसान बनाने के लिए डिज़ाइन किया गया है.

जब नेविगेशन किसी दस्तावेज़ को नए दस्तावेज़ से बदलता है, तो pageswap इवेंट, दस्तावेज़ के विंडो ऑब्जेक्ट पर ट्रिगर होता है.

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

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

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

इसके अलावा, और भी बहुत कुछ है.

  • disallowReturnToOpener ब्राउज़र को यह संकेत देता है कि उसे पिक्चर में पिक्चर विंडो में ऐसा बटन नहीं दिखाना चाहिए जिससे उपयोगकर्ता, वीडियो खोलने वाले टैब पर वापस जा सके.

  • कीबोर्ड की मदद से फ़ोकस किए जा सकने वाले स्क्रोल कंटेनर, स्क्रोल कंटेनर को फ़ोकस करने लायक बनाकर, ऐक्सेस की सुविधा को बेहतर बनाते हैं. इसके लिए, वे क्रम से फ़ोकस करने की सुविधा का इस्तेमाल करते हैं.

  • यूनिवर्सल इंस्टॉल की सुविधा की मदद से, उपयोगकर्ता किसी भी पेज को इंस्टॉल कर सकते हैं. भले ही, वह मौजूदा PWA की शर्तों को पूरा न करता हो.

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

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

सदस्यता लें

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

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