Chrome 95 में नया

Pete LePage

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

  • ब्राउज़र में पहले से मौजूद URLPattern की मदद से, रूटिंग करना आसान हो जाता है.
  • Eye Dropper API, रंग चुनने के लिए पहले से मौजूद टूल उपलब्ध कराता है.
  • ऑरिजिन ट्रायल का एक नया वर्शन उपलब्ध है. इसकी मदद से, अब छोटी UA स्ट्रिंग पाने के लिए ऑप्ट इन किया जा सकता है.
  • PWA Summit के सभी वीडियो ऑनलाइन उपलब्ध हैं.
  • इसके अलावा, और भी बहुत कुछ है.

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

URLPattern के साथ रूटिंग

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

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

अगर आपको Express, Ruby on Rails या path-to-regexp में इस्तेमाल किए गए रूटिंग सिंटैक्स के बारे में पहले से पता है, तो आपको यह सिंटैक्स जाना-पहचाना लगेगा.

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

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

उदाहरण के लिए, Google Docs के ज़रिए इस्तेमाल किए जा सकने वाले URLPattern को देखें. हम फ़ाइल का kind, फ़ाइल ID, और उसे किस mode में खोलना है, यह बताएंगे. इसके बाद, पैटर्न का इस्तेमाल करने के लिए, हम test() या exec() को कॉल कर सकते हैं.

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern, Chrome और Edge के 95 और उसके बाद के वर्शन में डिफ़ॉल्ट रूप से चालू होता है. साथ ही, Node जैसे ऐसे ब्राउज़र या एनवायरमेंट के लिए, जिन पर यह सुविधा अभी काम नहीं करती, urlpattern-polyfill लाइब्रेरी का इस्तेमाल किया जा सकता है.

पूरी जानकारी के लिए, जेफ़ का लेख URLPattern, वेब प्लैटफ़ॉर्म पर रूटिंग की सुविधा देता है देखें!

Eye Dropper API की मदद से रंग चुनना

मैंने जितने भी डिज़ाइन ऐप्लिकेशन इस्तेमाल किए हैं उनमें से ज़्यादातर में आईड्रॉपर टूल होता है. इससे यह पता लगाना आसान हो जाता है कि किसी चीज़ का रंग क्या है. कुछ ब्राउज़र में <input type=color> में पहले से ही आईड्रॉपर की सुविधा होती है, लेकिन यह सुविधा सही नहीं है.

Microsoft के कुछ लोगों ने आइ ड्रॉपर एपीआई को लागू किया है. इससे वेब पर भी यह सुविधा मिलती है. इसका इस्तेमाल करने के लिए, नया EyeDropper() इंस्टेंस बनाएं. इसके बाद, उस पर open() को कॉल करें.

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

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

Glitch पर डेमो आज़माया जा सकता है और कोड देखा जा सकता है.

PWA समिट

क्या आपने इस महीने की शुरुआत में PWA Summit में हिस्सा लिया था?

हमें यह देखकर खुशी हुई कि इतने सारे लोग PWA के बारे में बात कर रहे थे और अपने अनुभव शेयर कर रहे थे. अगर आपने यह सम्मेलन नहीं देखा है, तो सभी वीडियो अपलोड कर दिए गए हैं. इसलिए, PWASummit.org या PWA Summit के YouTube चैनल पर जाकर, इन्हें ज़रूर देखें.

यूज़र-एजेंट रिडक्शन ऑरिजिन ट्रायल

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

Chrome 95 से, एक नया ऑरिजिन ट्रायल शुरू किया जा रहा है. इससे, अब कम वर्णों वाली UA स्ट्रिंग पाने के लिए ऑप्ट इन किया जा सकता है. इससे, Chrome में कम किए गए UA के डिफ़ॉल्ट तौर पर लागू होने से पहले, आपको समस्याओं का पता लगाने और उन्हें ठीक करने में मदद मिलेगी.

ये बदलाव, कई रिलीज़ में धीरे-धीरे लागू किए जाएंगे. हालांकि, तैयारी करने और टेस्ट करने के लिए, आपके पास अभी से ही सभी चीज़ें मौजूद हैं.

पूरी जानकारी और टाइमलाइन, developer.chrome.com पर उपयोगकर्ता एजेंट हेडर में दी गई जानकारी को कम करने की प्रोसेस के ऑरिजिन ट्रायल की पोस्ट में दी गई है.

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

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

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

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

सदस्यता लें

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

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