একক পৃষ্ঠা অ্যাপগুলি একটি নতুন পৃষ্ঠা লোড না করেই বিভিন্ন সামগ্রী দেখাতে পারে৷ এটি করার জন্য, তারা লিঙ্কগুলিতে ক্লিক হ্যান্ডলার এবং ইতিহাস API ব্যবহার করে। ইতিহাস API ব্রাউজার সেশন ইতিহাস ম্যানিপুলেট করতে অনুমতি দেয়। এইভাবে আমরা একটি ভিন্ন পৃষ্ঠা দেখানোর সময় URL আপডেট করতে পারি (সাধারণত একক পৃষ্ঠা অ্যাপে এটিকে "ভিউ" বলা হয়)। এটি ব্রাউজারের পিছনের বোতামটি এখনও প্রত্যাশিত হিসাবে কাজ করে তা নিশ্চিত করে।
এই কোডল্যাবে একক পৃষ্ঠা অ্যাপটি দেখুন। এটি বিড়াল বা কুকুরের ছবি দেখায় এবং দুটি প্রাণীর মধ্যে টগল করার লিঙ্ক প্রদান করে। এটা ঠিক কাজ বলে মনে হচ্ছে!
স্নিকি 404 উন্মোচন
দুর্ভাগ্যবশত অ্যাপটিতে একটি সূক্ষ্ম বাগ রয়েছে। চলুন দেখে নেওয়া যাক!
- সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন
. - Doggos লিঙ্কে ক্লিক করুন. লক্ষ্য করুন কিভাবে URL পরিবর্তিত হয়েছে।
- অ্যাপটি পুনরায় লোড করুন।
আপনি " Cannot GET /doggos " লেখা একটি পৃষ্ঠা পাবেন—একটি স্নিকি 404৷ এটি "sneaky", কারণ ওয়েব অ্যাপটি ঠিক ততক্ষণ কাজ করবে বলে মনে হচ্ছে যতক্ষণ না আপনি শুধুমাত্র এর মধ্যে থাকা লিঙ্কগুলিতে ক্লিক করুন৷ একটি নতুন ব্রাউজার উইন্ডোতে URL ব্যবহার করার সময় বা পৃষ্ঠাটি রিফ্রেশ করার সময় এটি ভেঙে যায়। সমস্যা হল যে সার্ভার এই URL গুলির জন্য একটি অনুরোধের প্রতিক্রিয়া জানাতে জানে না৷ আমাদের ওয়েব অ্যাপের জাভাস্ক্রিপ্ট কোড তাদের মধ্যে নেভিগেট করার জন্য ইতিহাস API ব্যবহার করছে, কিন্তু সার্ভার তাদের সাথে কি করতে হবে তা জানে না। যখনই সার্ভার একটি অনুরোধ করা URL এর জন্য কি করতে হবে তা জানে না, এটি HTTP স্ট্যাটাস কোড 404 দিয়ে সাড়া দেয়। এই কোডের সাথে সার্ভার বলে যে এটি অনুরোধ করা URL এর জন্য কিছুই খুঁজে পায়নি।
সার্চ ইঞ্জিন এই ক্ষেত্রে ইউআরএলগুলিকে সূচী করবে না, কারণ একজন ব্যবহারকারী একটি অনুসন্ধান ফলাফলে ক্লিক করবে এবং ত্রুটির বার্তা খুঁজে পাবে, কিন্তু কুকুরের ছবিগুলির মতো তারা যে বিষয়বস্তু খুঁজছিল তা নয়।
সার্ভার ঠিক করা
এই প্রকল্পটি জাভাস্ক্রিপ্টে লেখা একটি express.js সার্ভার ব্যবহার করে। সার্ভারটি ঠিক করা যাক, তাই এটি index.html এর সাথে সাড়া দেয় এবং একক পৃষ্ঠার অ্যাপ বাকিটির যত্ন নেবে।
- প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷
-
server.jsফাইলটি নির্বাচন করুন।
এই ফাইলটিতে সার্ভার কোড রয়েছে। এটি একটি express.js সার্ভার সেট আপ করে এবং index.html এর বিষয়বস্তু পাঠায়। 15 লাইনে রুট সেটআপ শুধুমাত্র তখনই ওয়েব অ্যাপে পরিবেশন করে যখন অনুরোধ URL / এ যায়। সার্ভারকে আমাদের তৈরি করা অন্যান্য URL গুলিও পরিবেশন করা উচিত৷ চলুন সব URLS পরিবেশন করার জন্য এটি পরিবর্তন করা যাক, যাতে এটি ভবিষ্যতে অতিরিক্ত URL-এর সাথেও কাজ করে।
এটি করার জন্য, আমরা 15 লাইন থেকে শুরু হওয়া কোডটি এতে পরিবর্তন করতে পারি:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/* যেকোনো URL এর সাথে মেলে এবং সার্ভার এখন যে কোনো URL এর জন্য index.html এ ওয়েব অ্যাপের সাথে সাড়া দেয়।
- সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .
একটি নতুন ছদ্মবেশী উইন্ডোতে লিঙ্কগুলি রিফ্রেশ করা এবং খোলার ফলে এখন প্রত্যাশিতভাবে কাজ করা উচিত৷