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

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

Jeff Posnick

बैकग्राउंड

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

आभार

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