يمكن لتطبيقات الصفحة الواحدة عرض محتوى مختلف بدون تحميل صفحة جديدة. ولتنفيذ ذلك، تستخدم معالِجات النقر على الروابط وHistory API. تتيح History API إمكانية التلاعب بسجلّ جلسات المتصفّح. بهذه الطريقة، يمكننا تعديل عنوان URL عند عرض صفحة مختلفة (تُعرف عادةً باسم "عرض" في تطبيقات الصفحة الواحدة). ويضمن أيضًا أن يظل زر الرجوع في المتصفح يعمل كما هو متوقع.
اطّلِع على التطبيق المكوّن من صفحة واحدة في هذا الدرس التطبيقي حول الترميز. يعرض صورًا للقطط أو الكلاب ويوفّر روابط للتبديل بين الحيوانَين. يبدو أنه يعمل بشكل جيد!
الكشف عن أخطاء 404 المخادعة
للأسف، هناك خطأ بسيط في التطبيق. لنلقِ نظرة عليه.
- لمعاينة الموقع الإلكتروني، انقر على عرض التطبيق، ثم انقر على
ملء الشاشة
. - انقر على الرابط Doggos. لاحظ كيف تغيّر عنوان URL.
- أعِد تحميل التطبيق.
تظهر لك صفحة تحتوي على "Cannot GET /doggos"، وهي صفحة خطأ 404 مخادعة. إنّها "مخادعة"، لأنّ تطبيق الويب يبدو أنّه يعمل بشكل جيد طالما أنّك تنقر فقط على الروابط داخله. يتعطّل عند استخدام عناوين URL في نافذة متصفّح جديدة أو عند إعادة تحميل
الصفحة. المشكلة هي أن الخادم لا يعرف كيفية الاستجابة لطلب عناوين URL هذه. يستخدم كود JavaScript في تطبيق الويب الخاص بنا واجهة برمجة تطبيقات السجل للتنقل بينها، لكن الخادم لا يعرف ماذا يفعل بها.
عندما لا يعرف الخادم ما يجب فعله لعنوان URL مطلوب، يستجيب
برمز حالة HTTP 404. يشير هذا الرمز إلى أنّ الخادم لم يعثر على أي محتوى لعنوان URL المطلوب.
لن تفهرس محرّكات البحث عناوين URL في هذه الحالة، لأنّ المستخدم سينقر على نتيجة بحث ويعثر على رسالة الخطأ، وليس على المحتوى الذي يبحث عنه، مثل صور الكلاب.
إصلاح الخادم
يستخدم هذا المشروع خادم express.js مكتوبًا بلغة JavaScript. لنصلح الخادم، لكي يستجيب باستخدام index.html وسيتولى تطبيق الصفحة الواحدة الباقي.
- انقر على إنشاء ريمكس للتعديل لجعل المشروع قابلاً للتعديل.
- اختَر ملف
server.js.
يحتوي هذا الملف على رمز الخادم. يتم إعداد خادم express.js وإرسال
محتوى index.html. يخدم إعداد المسار في السطر 15 تطبيق الويب فقط
عندما تنتقل الطلبات إلى عنوان URL /. يجب أن يعرض الخادم أيضًا عناوين URL الأخرى التي أنشأناها. لنغيّر هذا الإعداد ليعرض جميع عناوين URL، ليعمل أيضًا مع
عناوين URL الإضافية في المستقبل.
لإجراء ذلك، يمكننا تغيير الرمز البرمجي بدءًا من السطر 15 إلى ما يلي:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
يطابق /* أي عنوان URL ويستجيب الخادم الآن بتطبيق الويب في index.html لأي عنوان URL معيّن.
- لمعاينة الموقع الإلكتروني، انقر على عرض التطبيق، ثم انقر على
ملء الشاشة
.
من المفترض أن تعمل الآن إعادة تحميل الروابط وفتحها في نافذة تصفّح متخفٍ جديدة على النحو المتوقّع.