Chrome 124 में नया

Pete LePage

यहां Chrome 124 के बारे में खास जानकारी दी गई है:

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

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

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

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

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

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

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

अन्य एपीआई parseHTMLUnsafe() है और यह DOMParser.parseFromString() की तरह काम करता है.

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

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

WebSocket स्ट्रीम एपीआई

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

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