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

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

बैकग्राउंड

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

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

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

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

ब्राउज़र सपोर्ट और पॉलीफ़िल

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

urlpattern-polyfill लाइब्रेरी की मदद से, ऐसे ब्राउज़र या नोड जैसे एनवायरमेंट में 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 पर इसके मौजूदा होम पेज पर, एमडीएन पर पब्लिकेशन के लिए बनाया गया दस्तावेज़ पढ़ें.

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

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

ऑरिजिन को ध्यान में रखने से, ज़्यादा इस्तेमाल के मामलों में मदद मिलती है. जैसे, किसी सर्विस वर्कर के 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 में यूनिकोड कैरेक्टर को प्रतिशत-एन्कोडिंग के बजाय, Punycode का इस्तेमाल करके अपने-आप एन्कोड किया जाता है.

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

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

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

यह रही पूरी जानकारी

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

सुझाव, शिकायत या राय और आने वाले समय की योजनाएं

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

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

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

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

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

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

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

स्वीकार हैं

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