Chrome 105 में, नेविगेशन एपीआई के NavigateEvent के लिए दो नए तरीके जोड़े गए हैं. ये तरीके, Chrome 102 में जोड़े गए थे. इन तरीकों को इसलिए बेहतर बनाया गया है, क्योंकि इनमें समस्याएं आ रही थीं. intercept(), transitionWhile() की जगह लेता है. transitionWhile() का इस्तेमाल करना मुश्किल था. intercept() की मदद से, डेवलपर नेविगेशन के बाद स्टेटस को कंट्रोल कर सकते हैं. scroll() तरीका, स्क्रोल करके यूआरएल में बताए गए ऐंकर तक जाता है. यह restoreScroll() की जगह ले लेता है. यह तरीका सभी तरह के नेविगेशन के लिए काम नहीं करता.
इस लेख में, हम दोनों तरीकों से जुड़ी समस्याओं के बारे में बताएंगे. साथ ही, यह भी बताएंगे कि नए तरीके से इन समस्याओं को कैसे ठीक किया जा सकता है.
NavigateEvent.transitionWhile()
NavigateEvent.trasitionWhile() तरीका, Chrome 102 में Navigation API के साथ लॉन्च किया गया था. यह सिंगल पेज ऐप्लिकेशन में क्लाइंट-साइड ट्रांज़िशन के लिए नेविगेशन को इंटरसेप्ट करता है. इसका पहला आर्ग्युमेंट एक वादा है, जो ब्राउज़र और वेब ऐप्लिकेशन के दूसरे हिस्सों को सिग्नल देता है कि यह पूरा हो गया है.
यह व्यावहारिक तौर पर खराब था. कोडिंग के इस सामान्य पैटर्न पर विचार करें:
event.transitionWhile((async () => {
doSyncStuff();
await doAsyncStuff();
})());
यह नीचे दिए गए कोड के बराबर है. इस वजह से, एपीआई को यह पता चलने से पहले कि डेवलपर ने नेविगेशन को इंटरसेप्ट करने का फ़ैसला लिया है, नेविगेशन का कुछ हिस्सा चल जाता है.
doSyncStuff();
event.transitionWhile((async () => {
await doAsyncStuff();
})());
स्क्रोल को वापस लाने के लॉजिक में, इस वजह से ऐप्लिकेशन में गड़बड़ी हो सकती है. इसमें, स्क्रोल की पोज़िशन को डीओएम में बदलाव होने से पहले के बजाय, बाद में कैप्चर किया जाता है.
कौनसे बदलाव हुए हैं
transitionWhile() की जगह, मौजूदा स्पेसिफ़िकेशन में NavigateEvent.intercept() का इस्तेमाल किया गया है. नए तरीके में, transitionWhile() के साथ काम करने वाली focusReset और scrollRestoration प्रॉपर्टी के अलावा, हैंडलर की सुविधा काम करती है. नया हैंडलर हमेशा नेविगेशन के कमिट होने के बाद चलता है. साथ ही, स्क्रोल पोज़िशन जैसी चीज़ों को कैप्चर किया जाता है, ताकि transitionWhile() से जुड़ी समस्याओं से बचा जा सके.
transitionWhile() तरीका अब भी उपलब्ध है, लेकिन इसका इस्तेमाल बंद कर दिया गया है. इसे Chrome 108 में हटा दिया जाएगा.
intercept() का इस्तेमाल करना
NavigateEvent.intercept() पर भी वही पाबंदियां लागू होती हैं जो transitionWhile() पर लागू होती हैं. इसका मतलब है कि इसे सभी नेविगेशन इवेंट पर नहीं बुलाया जा सकता. क्रॉस-ऑरिजिन नेविगेशन को और न ही क्रॉस-डॉक्यूमेंट ट्रैवर्सल को रोका जा सकता है. ऐसा करने पर, "SecurityError" टाइप का DOMException दिखने लगेगा.
intercept() का इस्तेमाल करने के लिए, इसे कॉल करते समय अपना कस्टम हैंडलर पास करें.
navigation.addEventListener("navigate", event => {
event.intercept({
async handler() {
doSyncStuff();
await doAsyncStuff();
}
});
});
NavigateEvent.scroll()
एक पेज वाले ऐप्लिकेशन में भी, पेज के सबसे ऊपर से किसी ऐंकर पर नेविगेट करने (/a से /a#id पर जाने) की प्रोसेस को ब्राउज़र पूरी तरह से मैनेज करता है. हालांकि, किसी दूसरे 'पेज' (/a से /b#id) पर ऐंकर पर नेविगेट करने की प्रोसेस, एक पेज वाले ऐप्लिकेशन के लिए ज़्यादा मुश्किल होती है, जबकि यह प्रोसेस कई पेज वाले ऐप्लिकेशन के लिए आसान होती है. ऐप्लिकेशन को NavigateEvent.transitionWhile() का इस्तेमाल करके, /b#id तक पहुंचने के लिए नेविगेशन को बीच में रोकना होगा. इसके बाद, ऐंकर को व्यू में लाने के लिए, NavigateEvent.restoreScroll() पर कॉल करना होगा. जैसा कि ऊपर बताया गया है, फ़िलहाल ऐसा करना मुश्किल है.
कौनसे बदलाव हुए हैं
अब एक पेज वाले ऐप्लिकेशन में, यह कंट्रोल किया जा सकता है कि ब्राउज़र किसी ऐंकर पर स्क्रोल करेगा या आपका कोड.
scroll() का इस्तेमाल करना
इंटरसेप्ट हैंडलर पूरा होने के बाद, ब्राउज़र डिफ़ॉल्ट रूप से स्क्रोलिंग को अपने-आप मैनेज करने की कोशिश करेगा. अगर आपको स्क्रोलिंग खुद मैनेज करनी है, तो scroll को "manual" पर सेट करें. इसके बाद, जब ब्राउज़र को स्क्रोल पोज़िशन सेट करनी हो, तब NavigateEvent.scroll() को कॉल करें.
navigation.addEventListener("manual", event => {
scroll: "manual",
event.intercept({
async handler() {
doSyncStuff();
// Handle scrolling earlier than by default:
event.scroll();
await doAsyncStuff();
}
});
});
restoreScroll() का तरीका अब भी उपलब्ध है. हालांकि, अब इसे रोक दिया गया है और इसे Chrome 108 से हटा दिया जाएगा.
नतीजा
हमें उम्मीद है कि हम जल्द ही Navigation API के बारे में अपने लेख को अपडेट कर देंगे. इस बीच, इस एपीआई के स्पेसिफ़िकेशन में, खास तौर पर वेब डेवलपर के लिए ज़्यादा जानकारी मौजूद है.