Chrome 96 में नया

Pete LePage

यहां आवश्यक जानकारी दी गई है:

मेरा नाम पीट लीपेज है और मैं स्टूडियो में शूट कर रहा हूं. चलिए, देखते हैं कि Chrome 96 में डेवलपर के लिए नया क्या है.

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

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

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

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

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

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

DevTools में, कंप्यूट किया गया ऐप्लिकेशन आईडी दिखाया गया है

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

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

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

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

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 का पेज. बैकग्राउंड की वह इमेज, सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी) है.

बड़ी बैकग्राउंड इमेज के साथ Google Flights का स्क्रीनशॉट

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

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

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

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

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

Chrome Flags पेज पर, #force-major-version-to-100 विकल्प को हाइलाइट किया गया है

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

Chrome डेवलपर समिट

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

और ज़्यादा!

बेशक, यहां बहुत कुछ है.

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

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

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

सदस्यता लें

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

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