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