Chrome 85 में नया

Pete LePage

Chrome 85 को अब स्टेबल चैनल के लिए रोल आउट किया जा रहा है.

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

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

कॉन्टेंट दिखने की सेटिंग

ब्राउज़र रेंडरिंग प्रोसेस

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

किसी एलिमेंट पर content-visibility: auto लागू करने से, ब्राउज़र को यह पता चलता है कि वह उस एलिमेंट के लिए रेंडरिंग का काम तब तक छोड़ सकता है, जब तक वह व्यूपोर्ट में स्क्रोल न हो जाए. इससे, शुरुआती रेंडरिंग तेज़ी से होती है.


.my-class {
  content-visibility: auto;
}

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

कॉन्टेंट को छोटे-छोटे हिस्सों में बांटने और content-visibility: auto; जोड़ने से, इस पेज को रेंडर होने में लगने वाला समय 232 मि॰से॰ से घटकर सिर्फ़ 30 मि॰से॰ हो गया.

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

@property और सीएसएस वैरिएबल

सीएसएस वैरिएबल, जिन्हें तकनीकी तौर पर कस्टम प्रॉपर्टी कहा जाता है, बहुत काम के होते हैं. Houdini CSS Properties and Values API की मदद से, अपनी कस्टम प्रॉपर्टी के लिए टाइप और डिफ़ॉल्ट फ़ॉलबैक वैल्यू तय की जा सकती है. हमने JavaScript में इन्हें तय करने की सुविधा जोड़ी थी. इसके बारे में हमने पहले Chrome 78 में नया क्या है लेख में बताया था.

Chrome 85 से, सीएसएस में सीधे तौर पर सीएसएस प्रॉपर्टी तय और सेट की जा सकती हैं. मुझे सीएसएस प्रॉपर्टी के बारे में यह पसंद है कि यह प्रॉपर्टी को सिमैंटिक अर्थ, फ़ॉलबैक वैल्यू देती है. साथ ही, सीएसएस टेस्टिंग को भी चालू करती है.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

उना ने एक बेहतरीन पोस्ट लिखी है @property: CSS वैरिएबल को सुपरपावर देना इसमें बताया गया है कि इनका इस्तेमाल कैसे किया जा सकता है.

मिलते-जुलते इंस्टॉल किए गए ऐप्लिकेशन पाना

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

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

Chrome 80 में पहली बार लॉन्च होने पर, यह सुविधा सिर्फ़ Android ऐप्लिकेशन के लिए काम करती थी. अब Android पर, यह भी देखा जा सकता है कि आपका PWA इंस्टॉल किया गया है या नहीं. साथ ही, Windows पर यह पता लगाया जा सकता है कि Windows UWP ऐप्लिकेशन इंस्टॉल है या नहीं.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

मेरा यह लेख पढ़ें क्या आपका ऐप्लिकेशन इंस्टॉल है? getInstalledRelatedApps() आपको बताएगा! पर जाएं. यहां आपको यह जानकारी मिलेगी कि यह सुविधा कैसे काम करती है. साथ ही, अपने ऐप्लिकेशन पर हस्ताक्षर करने का तरीका भी बताया गया है, ताकि यह साबित किया जा सके कि वे आपके हैं.

ऐप्लिकेशन आइकॉन के शॉर्टकट

Windows पर ऐप्लिकेशन आइकॉन का शॉर्टकट

हमने Chrome 84 में, ऐप्लिकेशन के आइकॉन के शॉर्टकट की सुविधा जोड़ी है. मैंने गलती से कहा था कि ये सुविधाएं हर जगह उपलब्ध हैं, लेकिन ये सिर्फ़ Android पर उपलब्ध हैं. अब Chrome 85 में, ये सुविधाएं Android और Windows पर उपलब्ध हैं. साथ ही, ये Chrome और Edge, दोनों पर उपलब्ध हैं.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

पूरी जानकारी के लिए, web.dev पर ऐप्लिकेशन के आइकॉन के शॉर्टकट लेख पढ़ें. साथ ही, हम आपको हुई परेशानी के लिए माफ़ी मांगते हैं.

ऑरिजिन ट्रायल: fetch() का इस्तेमाल करके स्ट्रीमिंग के अनुरोध

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

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

उदाहरण के लिए, इसका इस्तेमाल सर्वर को चालू करने के लिए किया जा सकता है. इसके अलावा, माइक्रोफ़ोन या कैमरे से कैप्चर किए गए ऑडियो या वीडियो को स्ट्रीम करने के लिए भी इसका इस्तेमाल किया जा सकता है.

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

अन्य डेटा

बेशक, इसके अलावा और भी कई सुविधाएं हैं.

Promise.any एक ऐसा प्रॉमिस दिखाता है जो दिए गए पहले प्रॉमिस से पूरा होता है. हालांकि, यह प्रॉमिस पूरा भी हो सकता है और अस्वीकार भी किया जा सकता है.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

.replaceAll() की मदद से, किसी स्ट्रिंग में मौजूद सभी इंस्टेंस को आसानी से बदला जा सकता है. अब रेगुलर एक्सप्रेशन की ज़रूरत नहीं है!

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85 में, AVIF को डिकोड करने की सुविधा जोड़ी गई है. यह एक इमेज फ़ॉर्मैट है, जिसे AV1 की मदद से कोड किया जाता है. इसे Alliance for Open Media ने स्टैंडर्ड बनाया है. AVIF, JPEG और WebP की तुलना में बेहतर तरीके से कंप्रेस करता है. हाल ही में Netflix की स्टडी के मुताबिक, स्टैंडर्ड JPEG की तुलना में 50% और 4:4:4 कॉन्टेंट पर > 60% की बचत होती है.

साथ ही, AppCache को हटाने की प्रोसेस शुरू हो गई है.

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

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

सदस्यता लें

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

मैं पीट लेपेज हूं और मैंने आखिरकार बाल कटवा लिए हैं!

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