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