एक पेज वाले ऐप्लिकेशन, नया पेज लोड किए बिना अलग-अलग कॉन्टेंट दिखा सकते हैं. ऐसा करने के लिए, वे लिंक और History API पर क्लिक हैंडलर का इस्तेमाल करते हैं. इतिहास वाले एपीआई की मदद से, ब्राउज़र सेशन के इतिहास में बदलाव किया जा सकता है. इस तरह से हम कोई दूसरा पेज दिखाते समय यूआरएल को अपडेट कर सकते हैं (आम तौर पर, सिंगल पेज ऐप्लिकेशन में इसे "व्यू" कहा जाता है). इससे यह भी पक्का होता है कि ब्राउज़र का 'वापस जाएं' बटन अब भी उम्मीद के मुताबिक काम कर रहा है.
इस कोडलैब में सिंगल पेज ऐप्लिकेशन पर एक नज़र डालें. इसमें बिल्ली या कुत्ते की इमेज दिखाई गई हैं और दो जानवरों के बीच टॉगल करने के लिए लिंक भी दिए गए हैं. यह सही लग रहा है!
स्नीकी 404 को सामने लाने का काम
माफ़ करें, ऐप्लिकेशन में एक छोटी सी गड़बड़ी है. चलिए, इस पर नज़र डालते हैं!
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं. - कुत्ते लिंक पर क्लिक करें. ध्यान दें कि यूआरएल कैसे बदल गया.
- ऐप्लिकेशन को फिर से लोड करें.
आपको "Cannot GET /doggos" वाला पेज मिलता है—स्नीकी 404 कोड. यह "स्नीकी" है, क्योंकि वेब ऐप्लिकेशन तब तक ठीक से काम करता है, जब तक उसमें मौजूद लिंक पर
क्लिक किया जाता है. नई ब्राउज़र विंडो में यूआरएल इस्तेमाल करते समय या पेज को रीफ़्रेश करते समय, यह
काम करता है. समस्या यह है कि सर्वर को इन यूआरएल के अनुरोध का जवाब देने का तरीका नहीं पता है. हमारे वेब ऐप्लिकेशन का JavaScript कोड इन यूआरएल के बीच नेविगेट करने के लिए, इतिहास एपीआई का इस्तेमाल कर रहा है, लेकिन सर्वर को यह नहीं पता कि इन यूआरएल का क्या करना है.
जब सर्वर को यह पता नहीं होता कि अनुरोध किए गए यूआरएल के लिए क्या करना है, तो वह एचटीटीपी स्टेटस कोड 404 के साथ जवाब देता है. इस कोड के साथ सर्वर बताता है कि उसे
अनुरोध किए गए यूआरएल के लिए कुछ नहीं मिला.
इस मामले में सर्च इंजन यूआरएल को इंडेक्स नहीं करेंगे, क्योंकि लोगों को खोज के नतीजे पर क्लिक करके गड़बड़ी का मैसेज दिखेगा. हालांकि, यह नहीं दिखेगा कि उन्हें किस कॉन्टेंट की तलाश है, जैसे कि कुत्ते की तस्वीरें.
सर्वर की समस्या ठीक करना
यह प्रोजेक्ट, JavaScript में लिखे गए express.js सर्वर का इस्तेमाल करता है. चलिए, सर्वर को ठीक करते हैं, ताकि यह index.html के ज़रिए जवाब दे और बाकी काम एक पेज वाला ऐप्लिकेशन कर दे.
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
server.jsफ़ाइल चुनें.
इस फ़ाइल में सर्वर कोड है. यह Express.js सर्वर सेट अप करता है और
index.html का कॉन्टेंट भेजता है. लाइन 15 में रूट सेटअप, वेब ऐप्लिकेशन के लिए तब ही काम करता है, जब / यूआरएल पर अनुरोध भेजे जाते हैं. सर्वर को हमारे बनाए गए अन्य यूआरएल भी
दिखाने चाहिए. सभी यूआरएल को दिखाने के लिए इसे बदलें, ताकि आने वाले समय में यह
दूसरे यूआरएल के साथ भी काम करे.
ऐसा करने के लिए, हम पंक्ति 15 से शुरू होने वाले कोड को इसमें बदल सकते हैं:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/* किसी भी यूआरएल से मैच करता है और सर्वर अब किसी भी यूआरएल के लिए, index.html में वेब ऐप्लिकेशन का जवाब देता है.
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.
नई गुप्त विंडो में लिंक रीफ़्रेश करने और खोलने से अब उम्मीद के मुताबिक काम करना चाहिए.