Chrome 105 में, नेविगेशन एपीआई के NavigateEvent के लिए दो नए तरीके जोड़े गए हैं. ये तरीके, Chrome 102 में जोड़े गए थे. इन तरीकों को इसलिए बेहतर बनाया गया है, क्योंकि इनमें समस्याएं आ रही थीं. intercept(), transitionWhile() की जगह लेता है. transitionWhile() का इस्तेमाल करना मुश्किल था. intercept() की मदद से, डेवलपर नेविगेशन के बाद स्टेटस को कंट्रोल कर सकते हैं. scroll() का तरीका, restoreScroll() की जगह लेता है. 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 के बारे में अपने लेख को अपडेट कर देंगे. इस बीच, इस एपीआई के स्पेसिफ़िकेशन में, खास तौर पर वेब डेवलपर के लिए ज़्यादा जानकारी मौजूद है.