सिंगल पेज ऐप्लिकेशन, नया पेज लोड किए बिना अलग-अलग कॉन्टेंट दिखा सकते हैं. ऐसा करने के लिए, वे लिंक और इतिहास API पर क्लिक हैंडलर का इस्तेमाल करते हैं. History API की मदद से, ब्राउज़र सेशन के इतिहास में बदलाव किया जा सकता है. इस तरह, हम किसी अलग पेज (आम तौर पर सिंगल पेज ऐप्लिकेशन में "व्यू" कहा जाता है) को दिखाते समय यूआरएल को अपडेट कर सकते हैं. इससे यह भी पक्का हो जाता है कि ब्राउज़र का 'वापस जाएं' बटन अब भी उम्मीद के मुताबिक काम कर रहा है.
इस कोडलैब में, सिंगल पेज ऐप्लिकेशन के बारे में जानें. इसमें बिल्ली या कुत्ते की इमेज दिखाई जाती है. साथ ही, इन दोनों जानवरों के बीच टॉगल करने के लिए लिंक भी दिए जाते हैं. ऐसा लगता है कि यह ठीक से काम कर रहा है!
404 गड़बड़ी के बारे में जानकारी
माफ़ करें, ऐप्लिकेशन में एक छोटी सी गड़बड़ी है. आइए, इसकी जांच करते हैं!
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं. - Doggos लिंक पर क्लिक करें. ध्यान दें कि यूआरएल कैसे बदला.
- ऐप्लिकेशन को फिर से लोड करें.
आपको "Cannot GET /doggos" वाला पेज दिखेगा—स्नीकी 404. यह "स्नीकी" होता है, क्योंकि लगता है कि वेब ऐप्लिकेशन ठीक से तब तक काम करता है, जब तक उसमें मौजूद लिंक पर क्लिक नहीं किया जाता. यह नई ब्राउज़र विंडो में यूआरएल का इस्तेमाल करने या पेज को रीफ़्रेश करने पर बंद हो जाता है. समस्या यह है कि सर्वर को इन यूआरएल के अनुरोध का जवाब देने का तरीका नहीं पता. हमारे वेब ऐप्लिकेशन में मौजूद JavaScript कोड, इनके बीच नेविगेट करने के लिए History API का इस्तेमाल कर रहा है, लेकिन सर्वर को नहीं पता कि इनका क्या करना है.
जब सर्वर को यह पता नहीं होता कि अनुरोध किए गए यूआरएल के लिए क्या करना है, तो वह रिस्पॉन्स के तौर पर एचटीटीपी स्टेटस कोड 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 में मौजूद वेब ऐप्लिकेशन के साथ रिस्पॉन्स देता है.
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.
लिंक को रीफ़्रेश करने और नई गुप्त विंडो में खोलने से, अब उम्मीद के मुताबिक काम होगा.