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

पब्लिश होने की तारीख: 22 जुलाई, 2021

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

  • सर्वर कोड, जो डिस्क पर मौजूद फ़ाइलों के पाथ को मैप करता है
  • सिंगल-पेज ऐप्लिकेशन में मौजूद लॉजिक, जो मौजूदा जगह में हुए बदलावों का इंतज़ार करता है. इसके बाद, उससे मिलता-जुलता DOM बनाता है और उसे दिखाता है.

हालांकि, कोई एक तय स्टैंडर्ड नहीं है, लेकिन वेब डेवलपर ने यूआरएल राउटिंग पैटर्न को दिखाने के लिए एक सामान्य सिंटैक्स का इस्तेमाल किया है. यह सिंटैक्स, regular expressions से काफ़ी मिलता-जुलता है. हालांकि, इसमें डोमेन के हिसाब से कुछ चीज़ें जोड़ी गई हैं. जैसे, पाथ सेगमेंट से मैच करने के लिए टोकन. Express और Ruby on Rails जैसे लोकप्रिय सर्वर-साइड फ़्रेमवर्क, इस सिंटैक्स का इस्तेमाल करते हैं. JavaScript डेवलपर, path-to-regexp या regexpparam जैसे मॉड्यूल का इस्तेमाल करके, इस लॉजिक को अपने कोड में जोड़ सकते हैं.

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

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

ब्राउज़र के साथ काम करने की सुविधा और पॉलीफ़िल

URLPattern, Chrome और Edge के वर्शन 95 और उसके बाद के वर्शन में डिफ़ॉल्ट रूप से चालू होता है.

urlpattern-polyfill लाइब्रेरी, ब्राउज़र या Node जैसे एनवायरमेंट में URLPattern इंटरफ़ेस का इस्तेमाल करने का तरीका उपलब्ध कराती है. इनमें यह सुविधा पहले से मौजूद नहीं होती. अगर पॉलीफ़िल का इस्तेमाल किया जाता है, तो पक्का करें कि आपने सुविधा का पता लगाने की सुविधा का इस्तेमाल किया हो. इससे यह पक्का किया जा सकेगा कि इसे सिर्फ़ तब लोड किया जा रहा है, जब मौजूदा एनवायरमेंट में इसकी सुविधा उपलब्ध न हो. ऐसा न करने पर, आपको URLPattern का एक अहम फ़ायदा नहीं मिलेगा: सहायता करने वाले एनवायरमेंट को इसका इस्तेमाल करने के लिए, अतिरिक्त कोड डाउनलोड और पार्स करने की ज़रूरत नहीं होती.

if (!(globalThis && 'URLPattern' in globalThis)) {
  // URLPattern is not available, so the polyfill is needed.
}

सिंटैक्स के साथ काम करने की सुविधा

URLPattern के लिए, यह सिद्धांत सबसे अहम है कि किसी भी चीज़ को दोबारा न बनाया जाए. अगर आपको Express या Ruby on Rails में इस्तेमाल होने वाले राउटिंग सिंटैक्स के बारे में पहले से पता है, तो आपको कुछ नया सीखने की ज़रूरत नहीं है. हालांकि, लोकप्रिय राउटिंग लाइब्रेरी में सिंटैक्स के बीच कुछ अंतर हैं. इसलिए, किसी एक सिंटैक्स को आधार सिंटैक्स के तौर पर चुना जाना था. URLPattern के डिज़ाइनर ने path-to-regexp के पैटर्न सिंटैक्स को शुरुआती बिंदु के तौर पर इस्तेमाल करने का फ़ैसला किया. हालांकि, उन्होंने इसके एपीआई सरफेस का इस्तेमाल नहीं किया.

यह फ़ैसला, path-to-regexp के मौजूदा रखरखाव करने वाले व्यक्ति से सलाह लेने के बाद लिया गया है.

सपोर्ट किए गए सिंटैक्स के बारे में जानने का सबसे अच्छा तरीका है कि आप path-to-regexp के दस्तावेज़ पढ़ें. GitHub पर मौजूद MDN पर पब्लिश करने के लिए, दस्तावेज़ पढ़ा जा सकता है.

कुछ और सुविधाएं

URLPattern का सिंटैक्स, path-to-regexp के सिंटैक्स का सुपरसेट है. ऐसा इसलिए है, क्योंकि URLPattern में राउटिंग लाइब्रेरी की एक ऐसी सुविधा काम करती है जो आम तौर पर नहीं मिलती: ओरिजन मैच करना. इसमें होस्टनेम में वाइल्डकार्ड शामिल हैं. ज़्यादातर रूटिंग लाइब्रेरी, सिर्फ़ pathname से जुड़ी होती हैं. कभी-कभी, वे यूआरएल के खोज या हैश वाले हिस्से से भी जुड़ी होती हैं. इन्हें कभी भी यूआरएल के ऑरिजिन वाले हिस्से की जांच नहीं करनी पड़ती, क्योंकि इनका इस्तेमाल सिर्फ़ एक ही ऑरिजिन वाले वेब ऐप्लिकेशन में, एक ही ऑरिजिन वाली राउटिंग के लिए किया जाता है.

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

उदाहरण

पैटर्न बनाना

URLPattern बनाने के लिए, इसके कंस्ट्रक्टर को स्ट्रिंग या ऐसा ऑब्जेक्ट पास करें जिसकी प्रॉपर्टी में, मैच करने के लिए पैटर्न के बारे में जानकारी हो.

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

const p = new URLPattern({
  protocol: 'https',
  username: '',
  password: '',
  hostname: 'example.com',
  port: '',
  pathname: '/foo/:image.jpg',
  search: '*',
  hash: '*',
});

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

कंस्ट्रक्टर, इस्तेमाल को आसान बनाने के लिए कई शॉर्टकट उपलब्ध कराता है. search और hash या किसी अन्य प्रॉपर्टी को पूरी तरह से हटाना, उन्हें '*' वाइल्डकार्ड पर सेट करने के बराबर है. इस उदाहरण को इस तरह से भी लिखा जा सकता है:

const p = new URLPattern({
  protocol: 'https',
  username: '',
  password: '',
  hostname: 'example.com',
  port: '',
  pathname: '/foo/:image.jpg',
});

एक और शॉर्टकट के तौर पर, ओरिजिन के बारे में पूरी जानकारी एक ही प्रॉपर्टी, baseURL में दी जा सकती है. इससे

const p = new URLPattern({
  pathname: '/foo/:image.jpg',
  baseURL: 'https://example.com',
});

इन सभी उदाहरणों में यह माना गया है कि आपके इस्तेमाल के उदाहरण में, मिलते-जुलते ऑरिजिन शामिल हैं. अगर आपको यूआरएल के सिर्फ़ अन्य हिस्सों से मिलान करना है, तो ऑरिजिन को छोड़कर (जैसा कि कई सिंगल-ऑरिजिन राउटिंग के मामलों में होता है), ऑरिजिन की जानकारी को पूरी तरह से हटाया जा सकता है. इसके बजाय, pathname, search, और hash प्रॉपर्टी का कोई कॉम्बिनेशन दिया जा सकता है. पहले की तरह, छोड़ी गई प्रॉपर्टी को ऐसे माना जाएगा जैसे उन्हें * वाइल्डकार्ड पैटर्न पर सेट किया गया हो.

const p = new URLPattern({pathname: '/foo/:image.jpg'});

कंस्ट्रक्टर को ऑब्जेक्ट पास करने के बजाय, एक या दो स्ट्रिंग दी जा सकती हैं. अगर एक स्ट्रिंग दी जाती है, तो यह पूरे यूआरएल पैटर्न को दिखाती है. इसमें पैटर्न की वह जानकारी भी शामिल होती है जिसका इस्तेमाल ऑरिजिन से मैच करने के लिए किया जाता है. अगर आपने दो स्ट्रिंग दी हैं, तो दूसरी स्ट्रिंग का इस्तेमाल baseURL के तौर पर किया जाता है. साथ ही, पहली स्ट्रिंग को उस आधार के हिसाब से माना जाता है.

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

const p = new URLPattern('https://example.com/foo/:image.jpg?*#*');

URLPattern बनाने के लिए स्ट्रिंग का इस्तेमाल करते समय, कुछ बातों का ध्यान रखना ज़रूरी है.

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

स्ट्रिंग का इस्तेमाल करते समय, अगर आपको बनाए गए URLPattern में वाइल्डकार्ड का इस्तेमाल करना है, तो आपको उन्हें साफ़ तौर पर शामिल करना होगा.

// p1 and p2 are equivalent.
const p1 = new URLPattern('/foo', location.origin);
const p2 = new URLPattern({
  protocol: location.protocol,
  hostname: location.hostname,
  pathname: '/foo',
  search: '',
  hash: '',
});

// p3 and p4 are equivalent.
const p3 = new URLPattern('/foo?*#*', location.origin);
const p4 = new URLPattern({
  protocol: location.protocol,
  hostname: location.hostname,
  pathname: '/foo',
});

आपको यह भी पता होना चाहिए कि किसी स्ट्रिंग पैटर्न को उसके कॉम्पोनेंट में पार्स करना, संभावित रूप से अस्पष्ट होता है. यूआरएल में : जैसे वर्ण होते हैं. हालांकि, पैटर्न मैचिंग सिंटैक्स में इनका खास मतलब होता है. इस समस्या से बचने के लिए, URLPattern कंस्ट्रक्टर यह मान लेता है कि इनमें से कोई भी खास वर्ण, यूआरएल का हिस्सा नहीं, बल्कि पैटर्न का हिस्सा है. अगर आपको किसी ऐसे वर्ण को यूआरएल के हिस्से के तौर पर इस्तेमाल करना है जिसका मतलब साफ़ तौर पर समझ में नहीं आता, तो पक्का करें कि उसे स्ट्रिंग के तौर पर देते समय, \` character. For example, the literal URLabout:blankshould be escaped as'about\:blank'` के साथ एस्केप किया गया हो.

पैटर्न का इस्तेमाल करना

URLPattern बनाने के बाद, इसे इस्तेमाल करने के लिए आपके पास दो विकल्प होते हैं. test() और exec(), दोनों तरीकों में एक ही इनपुट लिया जाता है और मैच की जांच करने के लिए एक ही एल्गोरिदम का इस्तेमाल किया जाता है. इन दोनों में सिर्फ़ रिटर्न वैल्यू का अंतर होता है. test(), दिए गए इनपुट से मैच होने पर true दिखाता है. ऐसा न होने पर, false दिखाता है. exec(), मैच के बारे में ज़्यादा जानकारी दिखाता है. साथ ही, कैप्चर ग्रुप या null दिखाता है, अगर कोई मैच नहीं है. यहां दिए गए उदाहरणों में, exec() का इस्तेमाल दिखाया गया है. हालांकि, अगर आपको सिर्फ़ बूलियन वैल्यू चाहिए, तो इनमें से किसी भी उदाहरण में test() का इस्तेमाल किया जा सकता है.

test() और exec() तरीकों का इस्तेमाल करने का एक तरीका, स्ट्रिंग पास करना है. कंस्ट्रक्टर की तरह ही, अगर एक स्ट्रिंग दी जाती है, तो यह पूरा यूआरएल होना चाहिए. इसमें ऑरिजिन भी शामिल होना चाहिए. अगर दो स्ट्रिंग दी जाती हैं, तो दूसरी स्ट्रिंग को baseURL वैल्यू के तौर पर माना जाता है. साथ ही, पहली स्ट्रिंग का आकलन उस आधार पर किया जाता है.

const p = new URLPattern({
  pathname: '/foo/:image.jpg',
  baseURL: 'https://example.com',
});

const result = p.exec('https://example.com/foo/cat.jpg');
// result will contain info about the successful match.
// const result = p.exec('/foo/cat.jpg', 'https://example.com')
// is equivalent, using the baseURL syntax.

const noMatchResult = p.exec('https://example.com/bar');
// noMatchResult will be null.

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

const p = new URLPattern({pathname: '/foo/:image.jpg'});

const result = p.exec({pathname: '/foo/:image.jpg'});
// result will contain info about the successful match.

वाइल्डकार्ड या टोकन वाले URLPattern पर exec() का इस्तेमाल करने पर, रिटर्न वैल्यू से आपको यह जानकारी मिलेगी कि इनपुट यूआरएल में, उनसे जुड़ी वैल्यू क्या थीं. इससे आपको उन वैल्यू को खुद पार्स करने की ज़रूरत नहीं पड़ती.

const p = new URLPattern({
  hostname: ':subdomain.example.com',
  pathname: '/*/:image.jpg'
});

const result = p.exec('https://imagecdn1.example.com/foo/cat.jpg');
// result.hostname.groups.subdomain will be 'imagecdn1'
// result.pathname.groups[0] will be 'foo', corresponding to *
// result.pathname.groups.image will be 'cat'

पहचान ज़ाहिर न करने वाले और नाम वाले ग्रुप

exec() फ़ंक्शन को यूआरएल स्ट्रिंग पास करने पर, आपको एक वैल्यू मिलती है. इससे पता चलता है कि पैटर्न के सभी ग्रुप से कौनसे हिस्से मैच हुए हैं.

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

ऐरे इंडेक्स का इस्तेमाल करके, पैटर्न से मैच करने वाली अनाम वैल्यू को ऐक्सेस किया जा सकता है. अगर एक से ज़्यादा पैटर्न में 'कोई भी' वैल्यू मौजूद है, तो इंडेक्स 0 सबसे बाईं ओर मौजूद पैटर्न के लिए मैचिंग वैल्यू दिखाता है. इसके बाद, 1 और अन्य इंडेक्स का इस्तेमाल, बाद के पैटर्न के लिए किया जाता है.

पैटर्न में नाम वाले ग्रुप का इस्तेमाल करने पर, मैच को ऐसी प्रॉपर्टी के तौर पर दिखाया जाता है जिनके नाम, हर ग्रुप के नाम से मेल खाते हैं.

यूनिकोड और सामान्य बनाने की सुविधा

URLPattern में यूनिकोड वर्णों का इस्तेमाल कई तरीकों से किया जा सकता है.

  • :café जैसे नाम वाले ग्रुप में यूनिकोड वर्ण शामिल हो सकते हैं. JavaScript आइडेंटिफ़ायर के लिए इस्तेमाल किए जाने वाले नियम, नाम वाले ग्रुप पर भी लागू होते हैं.

  • पैटर्न में मौजूद टेक्स्ट, उसी नियमों के मुताबिक अपने-आप कोड में बदल जाएगा जिनका इस्तेमाल उस कॉम्पोनेंट के यूआरएल को कोड में बदलने के लिए किया जाता है. pathname में मौजूद यूनिकोड वर्णों को पर्सेंट-कोड में बदला जाएगा. इसलिए, pathname का /café जैसा पैटर्न अपने-आप /caf%C3%A9 में बदल जाता है. hostname में मौजूद यूनिकोड वर्ण, प्रतिशत-कोडिंग के बजाय प्यूनीकोड का इस्तेमाल करके अपने-आप कोड में बदल जाते हैं.

  • रेगुलर एक्सप्रेशन ग्रुप में सिर्फ़ ASCII वर्ण होने चाहिए. रेगुलर एक्सप्रेशन सिंटैक्स की वजह से, इन ग्रुप में यूनिकोड वर्णों को अपने-आप कोड में बदलना मुश्किल और असुरक्षित हो जाता है. अगर आपको रेगुलर एक्सप्रेशन ग्रुप में किसी यूनिकोड वर्ण से मैच करना है, तो आपको उसे मैन्युअल तरीके से पर्सेंट कोड में बदलना होगा. जैसे, café से मैच करने के लिए (caf%C3%A9).

यूनिकोड वर्णों को एन्कोड करने के साथ-साथ, URLPattern यूआरएल को सामान्य भी करता है. उदाहरण के लिए, pathname कॉम्पोनेंट में मौजूद /foo/./bar को /foo/bar में छोटा कर दिया गया है.

अगर आपको यह पता नहीं चल रहा है कि किसी इनपुट पैटर्न को कैसे सामान्य किया गया है, तो अपने ब्राउज़र के DevTools का इस्तेमाल करके, बनाए गए URLPattern इंस्टेंस की जाँच करें.

पूरी जानकारी का इस्तेमाल करना

Glitch डेमो में, URLPattern के मुख्य इस्तेमाल के उदाहरण को दिखाया गया है. इसमें, सर्विस वर्कर के fetch event handler में, एसिंक्रोनस फ़ंक्शन के लिए खास पैटर्न को मैप किया गया है. ये फ़ंक्शन, नेटवर्क अनुरोधों का जवाब जनरेट कर सकते हैं. इस उदाहरण में दिए गए कॉन्सेप्ट, राउटिंग के अन्य उदाहरणों पर भी लागू किए जा सकते हैं. इन्हें सर्वर-साइड या क्लाइंट-साइड, दोनों पर लागू किया जा सकता है.

फ़ीडबैक और आने वाले समय के लिए प्लान

URLPattern की बुनियादी सुविधा, Chrome और Edge पर उपलब्ध है. हालांकि, इसमें कुछ और सुविधाएं भी जोड़ी जाएंगी. URLPattern के कुछ पहलुओं पर अब भी काम चल रहा है. साथ ही, कुछ खास व्यवहारों के बारे में कई सवाल हैं. इन सवालों के जवाबों को अब भी बेहतर बनाया जा सकता है. हमारा सुझाव है कि आप URLPattern को आज़माएं और GitHub पर समस्या के ज़रिए हमें अपना सुझाव, राय या शिकायत भेजें.

टेंप्लेट बनाने की सुविधा

path-to-regexp लाइब्रेरी, compile() function उपलब्ध कराती है. यह राउटिंग के व्यवहार को उलट देती है. compile(), टोकन प्लेसहोल्डर के लिए पैटर्न और वैल्यू लेता है. इसके बाद, यूआरएल पाथ के लिए एक स्ट्रिंग दिखाता है. इस स्ट्रिंग में, वैल्यू को बदल दिया जाता है.

हमें उम्मीद है कि आने वाले समय में, हम इसे URLPattern में जोड़ देंगे. हालांकि, शुरुआती रिलीज़ के लिए यह सुविधा उपलब्ध नहीं है.

वेब प्लैटफ़ॉर्म की आने वाली सुविधाएं चालू करें

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

सर्विस वर्कर स्कोप पैटर्न मैचिंग, फ़ाइल हैंडलर के तौर पर PWA, और स्पेकुलेटिव प्रीफ़ेचिंग जैसी सुविधाओं के लिए, URLPattern का इस्तेमाल करने के बारे में चर्चा चल रही है.

स्वीकार किए गए सभी अनुरोधों की पूरी सूची देखने के लिए, ओरिजनल जानकारी देने वाला दस्तावेज़ देखें.