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

पैटर्न मैचिंग के सामान्य इस्तेमाल के उदाहरणों को स्टैंडर्ड करने का तरीका.

रूटिंग हर वेब ऐप्लिकेशन का अहम हिस्सा है. रूटिंग में, यूआरएल को लेकर, उस पर पैटर्न मैचिंग या ऐप्लिकेशन के हिसाब से कोई लॉजिक लागू करना शामिल होता है. इसके बाद, आम तौर पर नतीजे के आधार पर वेब कॉन्टेंट दिखाया जाता है. रूटिंग को कई तरीकों से लागू किया जा सकता है: कभी-कभी यह किसी सर्वर पर चलने वाला कोड होता है, जो डिस्क पर फ़ाइलों के पाथ को मैप करता है. इसके अलावा, यह सिंगल-पेज ऐप्लिकेशन में मौजूद लॉजिक भी हो सकता है, जो मौजूदा जगह में होने वाले बदलावों का इंतज़ार करता है और दिखाने के लिए 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 के लिए दस्तावेज़ देखें. MDN पर पब्लिश करने के लिए, दस्तावेज़ को पढ़ा जा सकता है. यह दस्तावेज़, GitHub पर मौजूद अपने मौजूदा होम पेज पर उपलब्ध है.

अतिरिक्त सुविधाएं

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 में मौजूद यूनिकोड वर्णों को पर्सेंट कोड में बदला जाएगा. इसलिए, /café जैसे pathname पैटर्न को अपने-आप /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 को वेब प्लैटफ़ॉर्म का एक सामान्य हिस्सा माना जाता है, तो रूटिंग या पैटर्न मैचिंग से फ़ायदा होने वाली अन्य सुविधाएं, इसके ऊपर भी बुनियादी थीम के तौर पर डेवलप हो सकती हैं.

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

धन्यवाद

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