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

Chrome 83 में नया

Pete LePage

Chrome 83 को अब स्टेबल वर्शन के तौर पर रोल आउट किया जा रहा है.

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

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

नमस्ते, पीट लेपेज बोल रहा हूं. फ़िलहाल, मैं घर से काम और शूटिंग कर रहा हूं. आइए, Chrome 83 में डेवलपर के लिए क्या नया है, इस बारे में जानें!

भरोसेमंद टाइप

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

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

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

इसके बजाय, मुझे textContent जैसे किसी सुरक्षित फ़ंक्शन का इस्तेमाल करना होगा, किसी भरोसेमंद टाइप को पास करना होगा या ऐलिमेंट बनाकर appendChild() का इस्तेमाल करना होगा.

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

भरोसेमंद टाइप चालू करने से पहले, आपको report-only CSP हेडर का इस्तेमाल करके, किसी भी उल्लंघन की पहचान करनी होगी और उसे ठीक करना होगा.

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com

इसके बाद, जब सब कुछ ठीक हो जाए, तो इसे सही तरीके से चालू करें. पूरी जानकारी के लिए, web.dev पर भरोसेमंद टाइप की मदद से, डीओएम पर आधारित क्रॉस-साइट स्क्रिप्टिंग से जुड़ी जोखिम को रोकना लेख पढ़ें.

फ़ॉर्म कंट्रोल से जुड़े अपडेट

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

पहले, फ़ॉर्म कंट्रोल की डिफ़ॉल्ट स्टाइल.

फ़ॉर्म कंट्रोल की स्टाइल अपडेट करने के बाद.

फ़ॉर्म कंट्रोल के लुक को आधुनिक बनाने के लिए, Microsoft ने जो काम किया है उससे मैं काफ़ी प्रभावित हूं. इनमें बेहतर विज़ुअल स्टाइल के अलावा, बेहतर टच और ऐक्सेस की सुविधाएं भी मिलती हैं. इनमें बेहतर कीबोर्ड की सुविधा भी शामिल है!

नए फ़ॉर्म कंट्रोल, Microsoft Edge में पहले से ही उपलब्ध हैं. अब ये Chrome 83 में भी उपलब्ध हैं. ज़्यादा जानकारी के लिए, Chromium ब्लॉग पर फ़ॉर्म कंट्रोल और फ़ोकस में हुए अपडेट देखें.

ऑरिजिन ट्रायल

`measureMemory()` की मदद से मेमोरी मेज़र करना

Chrome 83 में ऑरिजिन ट्रायल शुरू किया जा रहा है. performance.measureMemory() एक नया API है. इसकी मदद से, अपने पेज के लिए मेमोरी के इस्तेमाल को मेज़र किया जा सकता है. साथ ही, मेमोरी लीक का पता लगाया जा सकता है.

मेमोरी लीक आसानी से हो सकती हैं:

इवेंट लिसनर को अनरजिस्टर न करना
किसी iframe से ऑब्जेक्ट कैप्चर करना
किसी कर्मचारी को बंद न करना
ऐरे में ऑब्जेक्ट इकट्ठा करना
और इसी तरह.

मेमोरी लीक की वजह से, पेज धीरे-धीरे लोड होते हैं और उपयोगकर्ताओं को बड़े पेज के तौर पर दिखते हैं.

if (performance.measureMemory) {
  try {
    const result = await performance.measureMemory();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

नए एपीआई के बारे में पूरी जानकारी पाने के लिए, web.dev पर measureMemory() की मदद से, अपने वेब पेज के कुल मेमोरी इस्तेमाल को मॉनिटर करें लेख पढ़ें.

नेटिव फ़ाइल सिस्टम एपीआई से जुड़े अपडेट

नेटिव फ़ाइल सिस्टम एपीआई ने Chrome 83 में, ऑरिजिन ट्रायल की नई सुविधा शुरू की है. इसमें, लिखने लायक स्ट्रीम के साथ-साथ फ़ाइल हैंडल सेव करने की सुविधा भी उपलब्ध है.

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

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

फ़ाइल हैंडल को IndexedDB में सेव करने से, स्टेटस सेव किया जा सकता है या यह याद रखा जा सकता है कि उपयोगकर्ता किन फ़ाइलों पर काम कर रहा था. उदाहरण के लिए, हाल ही में बदलाव की गई फ़ाइलों की सूची बनाएं, वह फ़ाइल खोलें जिस पर उपयोगकर्ता काम कर रहा था वगैरह.

इन सुविधाओं का इस्तेमाल करने के लिए, आपको नया ऑरिजिन ट्रायल टोकन चाहिए. इसलिए, ज़्यादा जानकारी के लिए, web.dev पर मेरा अपडेट किया गया लेख नेटिव फ़ाइल सिस्टम एपीआई: लोकल फ़ाइलों को आसानी से ऐक्सेस करना पढ़ें. साथ ही, नया ऑरिजिन ट्रायल टोकन पाने का तरीका भी जानें.

अन्य ऑरिजिन ट्रायल

ऑरिजिन ट्रायल में मिलने वाली सुविधाओं की पूरी सूची देखें.

क्रॉस-ओरिजिन से जुड़ी नई नीतियां

कुछ वेब एपीआई, Spectre जैसे साइड-चैनल अटैक का खतरा बढ़ाते हैं. इस जोखिम को कम करने के लिए, ब्राउज़र ऑप्ट-इन के आधार पर एक अलग वातावरण उपलब्ध कराते हैं. इसे क्रॉस-ऑरिजिन आइसोलेशन कहा जाता है. क्रॉस-ऑरिजिन आइसोलेटेड स्टेटस, document.domain में बदलाव होने से भी रोकता है. document.domain में बदलाव करने की सुविधा की मदद से, एक ही साइट के दस्तावेज़ों के बीच कम्यूनिकेशन किया जा सकता है. इसे एक ही ऑरिजिन से जुड़ी नीति में एक गड़बड़ी माना गया है.

पूरी जानकारी के लिए, COOP और COEP का इस्तेमाल करके, अपनी वेबसाइट को "क्रॉस-ऑरिजिन आइसोलेटेड" बनाना लेख पढ़ें.

वेब पर मापी जाने वाली सेहत की जानकारी

उपयोगकर्ता अनुभव की क्वालिटी को मेज़र करने के कई तरीके हैं. उपयोगकर्ता अनुभव के कुछ पहलू, साइट और कॉन्टेक्स्ट के हिसाब से होते हैं. हालांकि, सिग्नल का एक सामान्य सेट होता है, जिसे "वेबसाइट की परफ़ॉर्मेंस की जानकारी" कहा जाता है. यह सभी वेब अनुभवों के लिए ज़रूरी है. उपयोगकर्ता अनुभव से जुड़ी बुनियादी ज़रूरतों में, पेज के लोड होने का अनुभव, इंटरैक्टिविटी, और पेज के कॉन्टेंट का विज़ुअल स्टैबिलिटी शामिल है. ये सभी ज़रूरतें, 2020 की वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी की बुनियाद हैं.

सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय, पेज लोड होने में लगने वाले समय का आकलन करती है. साथ ही, यह पेज लोड होने की टाइमलाइन में उस समय के बारे में बताती है जब पेज का मुख्य कॉन्टेंट लोड होने की संभावना होती है.
फ़र्स्ट इनपुट डिले से, पेज के रिस्पॉन्सिव होने की जानकारी मिलती है. साथ ही, इससे यह भी पता चलता है कि पेज से पहली बार इंटरैक्ट करने पर, उपयोगकर्ताओं को कैसा अनुभव मिला.
कुल लेआउट शिफ़्ट से पता चलता है कि पेज लोड होने के दौरान उसका लेआउट कितनी बार बदलता है. साथ ही, इससे यह भी पता चलता है कि पेज पर दिखने वाले कॉन्टेंट का लेआउट अचानक कितनी बार बदलता है.

ये सभी मेट्रिक, उपयोगकर्ता के हिसाब से अहम नतीजे कैप्चर करती हैं. साथ ही, इन्हें फ़ील्ड में मेज़र किया जा सकता है. इनमें, प्रयोगशाला में गड़बड़ी का पता लगाने वाली मेट्रिक के बराबर मेट्रिक और टूल भी होते हैं. उदाहरण के लिए, 'सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय', लोड होने में लगने वाले समय की मुख्य मेट्रिक है. हालांकि, यह फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) और टाइम टू फ़र्स्ट बाइट (टीटीएफ़बी) पर भी काफ़ी निर्भर करती है. इन मेट्रिक को मॉनिटर करना और इनमें सुधार करना ज़रूरी है.

ज़्यादा जानने के लिए, पूरी जानकारी के लिए Chromium ब्लॉग पर वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी: अच्छी परफ़ॉर्मेंस वाली साइट के लिए ज़रूरी मेट्रिक लेख पढ़ें.

अन्य डेटा

Chrome अब Barcode Detection API के साथ काम करता है. इसकी मदद से, बारकोड का पता लगाया जा सकता है और उसे डिकोड किया जा सकता है.
नया सीएसएस @supports फ़ंक्शन, सीएसएस सिलेक्टर के लिए सुविधा का पता लगाने की सुविधा देता है.
नए ARIA एनोटेशन, टिप्पणियों, सुझावों, और टेक्स्ट हाइलाइट के लिए स्क्रीन रीडर की सुविधा के साथ काम करते हैं. ये एनोटेशन, <mark> की तरह ही काम करते हैं.
prefers-color-scheme मीडिया क्वेरी की मदद से, लेखक अपनी गहरे रंग वाली थीम का इस्तेमाल कर सकते हैं. इससे, उन्हें अपने अनुभवों पर पूरा कंट्रोल मिलता है.
JavaScript में अब शेयर किए गए वर्कर में मॉड्यूल काम करते हैं.

क्या आपको यह जानना है कि आने वाले समय में क्या-क्या होगा? इसे देखने के लिए, Fugu API ट्रैकर देखें!

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

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

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

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