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