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 में इसे हटा दिया जाएगा.
इंटरसेप्ट() का इस्तेमाल करना
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 को "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 में इसे हटा दिया जाएगा.
नतीजा
हमें उम्मीद है कि जल्द ही नेविगेशन एपीआई पर हमारे लेख को अपडेट कर दिया जाएगा. तब तक, इस एपीआई के स्पेसिफ़िकेशन में, खास तौर पर वेब डेवलपर के लिए काफ़ी जानकारी दी गई है.