Chrome 96 में नया

Pete LePage

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

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

नमस्ते, मैं पीट लेपेज हूं. आखिरकार, स्टूडियो में शूटिंग शुरू हो गई है. आइए, Chrome 96 में डेवलपर के लिए क्या नया है, इस बारे में जानें.

PWA के लिए मेनिफ़ेस्ट id

जब कोई उपयोगकर्ता कोई PWA इंस्टॉल करता है, तो ब्राउज़र को उसकी खास पहचान करने का तरीका चाहिए. हालांकि, हाल ही तक वेब ऐप्लिकेशन मेनिफ़ेस्ट स्पेसिफ़िकेशन में, किसी PWA की पहचान करने का तरीका नहीं बताया गया था. इस वजह से, ब्राउज़र को यह तय करना पड़ता था कि वह PWA है या नहीं. इस वजह से, PWA को अलग-अलग तरीके से लागू किया जाता था. कुछ ब्राउज़र में start_url का इस्तेमाल किया जाता है, जबकि कुछ में मेनिफ़ेस्ट फ़ाइल के पाथ का इस्तेमाल किया जाता है.

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

मेनिफ़ेस्ट में id प्रॉपर्टी जोड़ने से, start_url या मेनिफ़ेस्ट की जगह पर निर्भरता हट जाती है. साथ ही, उन फ़ील्ड को अपडेट किया जा सकता है.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

id प्रॉपर्टी के लिए, Chrome 96 से शुरू होने वाले डेस्कटॉप Chromium पर आधारित ब्राउज़र में सहायता उपलब्ध है. फ़िलहाल, मोबाइल के लिए यूनीक आईडी के तौर पर मेनिफ़ेस्ट यूआरएल का इस्तेमाल किया जाता है. हालांकि, 2022 की पहली छमाही में, मोबाइल के लिए भी यह सुविधा उपलब्ध हो जाएगी.

अगर आपके पास पहले से ही प्रोडक्शन में कोई PWA है और आपको अपने मैनिफ़ेस्ट में id जोड़ना है, तो आपको ब्राउज़र से असाइन किए गए आईडी का इस्तेमाल करना होगा. id को, Dev Tools में ऐप्लिकेशन पैनल के मेनिफ़ेस्ट पैनल में देखा जा सकता है.

किसी नए PWA के लिए, id को अपनी पसंद की किसी भी स्ट्रिंग वैल्यू पर सेट किया जा सकता है. हालांकि, याद रखें कि आने वाले समय में इसे नहीं बदला जा सकेगा. इसलिए, इसे समझदारी से चुनें.

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

ज़्यादा जानकारी के लिए, वेब ऐप्लिकेशन मेनिफ़ेस्ट आईडी प्रॉपर्टी की मदद से, पीडब्ल्यूए की यूनीक पहचान करना देखें.

PWA के लिए, यूआरएल के प्रोटोकॉल हैंडलर

वेब ऐप्लिकेशन, प्रोटोकॉल हैंडलर के तौर पर रजिस्टर करने के लिए, navigator.registerProtocolHandler() का इस्तेमाल कर सकते हैं. उदाहरण के लिए, Gmail mailto प्रोटोकॉल को रजिस्टर कर सकता है. इसके बाद, जब कोई उपयोगकर्ता mailto: प्रीफ़िक्स वाले लिंक पर क्लिक करेगा, तो Gmail खुल जाएगा. इससे उपयोगकर्ता को ईमेल भेजने में आसानी होगी.

Chrome 96 से, कोई PWA अपने इंस्टॉलेशन के हिस्से के तौर पर, प्रोटोकॉल हैंडलर के तौर पर रजिस्टर हो सकता है. अपने PWA के लिए ऐसा करने के लिए, अपने वेब ऐप्लिकेशन मेनिफ़ेस्ट में protocol_handlers प्रॉपर्टी जोड़ें. साथ ही, उस protocol की जानकारी दें जिसे आपको मैनेज करना है और उस url की जानकारी दें जिस पर क्लिक करने पर वह खुलना चाहिए.

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

इस प्रोसेस में कुछ पाबंदियां हैं. साथ ही, किसी भी प्रोटोकॉल को रजिस्टर नहीं किया जा सकता. इसलिए, पूरी जानकारी के लिए PWA के लिए, यूआरएल के प्रोटोकॉल हैंडलर का रजिस्ट्रेशन लेख पढ़ें. साथ ही, जानें कि अपने प्रोटोकॉल बनाने के लिए, web+ सिंटैक्स का इस्तेमाल कैसे किया जा सकता है!

प्राथमिकता के बारे में सलाह (ऑरिजिन ट्रायल)

जब कोई ब्राउज़र किसी वेब पेज को पार्स करता है और इमेज, स्क्रिप्ट या सीएसएस जैसे रिसॉर्स को ढूंढना और डाउनलोड करना शुरू करता है, तो वह पेज लोड को ऑप्टिमाइज़ करने के लिए, उन्हें फ़ेच करने की प्राथमिकता असाइन करता है. ब्राउज़र, प्राथमिकताएं असाइन करने में काफ़ी अच्छे होते हैं. हालांकि, ऐसा हो सकता है कि वे हर मामले में सबसे सही न हों.

प्राथमिकता के सुझाव, एक्सपेरिमेंट के तौर पर उपलब्ध एक सुविधा है. यह Chrome 96 से ऑरिजिन ट्रायल के तौर पर उपलब्ध है. इससे वेबसाइट की परफ़ॉर्मेंस की जानकारी को ऑप्टिमाइज़ करने में मदद मिल सकती है. importance एट्रिब्यूट की मदद से, सीएसएस, फ़ॉन्ट, स्क्रिप्ट, इमेज, और iframe जैसे रिसॉर्स टाइप के लिए प्राथमिकता तय की जा सकती है.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

उदाहरण के लिए, यहां Google Flights का पेज दिया गया है. बैकग्राउंड इमेज, सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) होती है.

आइए, देखें कि यह प्रायॉरिटी के सुझावों के साथ और बिना उनसे लोड होता है. बैकग्राउंड इमेज पर प्राथमिकता को high पर सेट करने पर, एलसीपी 2.6 सेकंड से घटकर 1.9 सेकंड हो गया.

Fetch Priority API की मदद से, रिसॉर्स लोड करने की प्रोसेस को ऑप्टिमाइज़ करना लेख पढ़ें. इसमें आपको इस सुविधा के बारे में पूरी जानकारी मिलेगी. साथ ही, ऑरिजिन ट्रायल के लिए रजिस्टर करने का तरीका और इसकी मदद से रेंडरिंग की परफ़ॉर्मेंस को बेहतर बनाने के कुछ बेहतरीन उदाहरण भी मिलेंगे.

UA स्ट्रिंग में Chrome 100 को एमुलेट करना

अगले साल की शुरुआत में, हम Chrome 100 वर्शन लॉन्च करेंगे. यह वर्शन तीन अंकों का होगा. वर्शन नंबर की जांच करने वाले या UA स्ट्रिंग को पार्स करने वाले किसी भी कोड की जांच की जानी चाहिए, ताकि यह पक्का किया जा सके कि वह तीन अंकों को हैंडल करता है.

Chrome के वर्शन 96 से, एक नया फ़्लैग #force-major-version-to-100 जोड़ा गया है. इससे, वर्शन का मौजूदा नंबर 100 हो जाएगा. इससे यह पक्का किया जा सकेगा कि सब कुछ उम्मीद के मुताबिक काम कर रहा है.

ज़्यादा जानकारी के लिए, उपयोगकर्ता-एजेंट स्ट्रिंग में Chrome के मेजर वर्शन को 100 पर सेट करना लेख पढ़ें.

Chrome Dev Summit

Chrome Dev Summit खत्म हो गया है. सभी वीडियो और कॉन्टेंट ऑनलाइन उपलब्ध हैं. Chrome Dev Summit की साइट पर जाएं. अगर आपने मुख्य भाषण या लाइव स्ट्रीम को नहीं देखा है, तो Chrome Developers के YouTube चैनल पर सीडीएस प्लेलिस्ट देखें.

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

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

• बैक, फ़ॉरवर्ड कैश – या bfcache – अब स्टेबल वर्शन में उपलब्ध है. इससे Chrome, Firefox और Safari, दोनों के साथ काम करता है.

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

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

• Chrome DevTools (96) में नया क्या है
• Chrome 96 में बंद किए गए और हटाए गए फ़ंक्शन
• Chrome 96 के लिए ChromeStatus.com के अपडेट
• Chrome 96 में JavaScript में नया क्या है
• Chromium सोर्स रिपॉज़िटरी में हुए बदलावों की सूची
• Chrome के रिलीज़ कैलेंडर की जानकारी

सदस्यता लें

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

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