सिंगल पेज ऐप्लिकेशन, नया पेज लोड किए बिना अलग-अलग कॉन्टेंट दिखा सकते हैं. ऐसा करने के लिए, वे लिंक और History 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 में मौजूद वेब ऐप्लिकेशन के साथ रिस्पॉन्स देता है.
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.
अब गुप्त विंडो में लिंक को रीफ़्रेश करने और खोलने पर, वे उम्मीद के मुताबिक काम करेंगे.