يمكن أن تعرض تطبيقات الصفحة الواحدة محتوى مختلفًا بدون تحميل صفحة جديدة. ولإجراء ذلك، يستخدمون معالجات النقر على الروابط وHistory API. تسمح واجهة برمجة التطبيقات للسجلّ بمعالجة سجلّ جلسات المتصفح. بهذه الطريقة، يمكننا تعديل عنوان URL عند عرض صفحة مختلفة (يُشار إليها عادةً باسم "عرض" في تطبيقات الصفحة الواحدة). يتأكد أيضًا من أن زر الرجوع في المتصفح لا يزال يعمل كما هو متوقع.
اطّلِع على تطبيق الصفحة الواحدة في هذا الدرس التطبيقي حول الترميز. يعرض التطبيق صورًا إما للقطط أو للكلاب، ويقدّم روابط للتبديل بين الحيوانَين. يبدو أنّه يعمل بشكل جيد.
الكشف عن الخطأ الخداعي 404
يوجد خطأ بسيط في التطبيق. هيا نلقي نظرة عليه.
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة
. - انقر على الرابط Doggos. لاحظ كيف تغيّر عنوان URL.
- أعِد تحميل التطبيق.
تظهر لك صفحة تتضمّن "Cannot GET /doggos"، وهو خطأ 404 مخادع. ويُعدّ ذلك "خداعيًا"،
لأنّ تطبيق الويب يبدو أنّه يعمل بشكل جيد ما دامت النقرات على الروابط ضمنه فقط. ويتوقف عن العمل عند استخدام عناوين URL في نافذة متصفّح جديدة أو عند إعادة تحميل
الصفحة. تكمن المشكلة في أنّ الخادم لا يعرف كيفية الردّ على طلب عناوين URL هذه. يستخدم رمز JavaScript في تطبيق الويب واجهة برمجة التطبيقات History API للتنقل بينها، ولكن لا يعرف الخادم كيفية التعامل معها.
عندما لا يعرف الخادم ما يجب فعله بشأن عنوان URL محدد، يستجيب
برمز حالة HTTP 404. باستخدام هذا الرمز، يشير الخادم إلى أنّه لم يعثر على
أي شيء عن عنوان URL المطلوب.
لن تفهرس محركات البحث عناوين URL في هذه الحالة لأن المستخدم سينقر على نتيجة بحث ويعثر على رسالة الخطأ، ولكن لن يفهرس المحتوى الذي كان يبحث عنه، مثل صور الكلاب.
إصلاح الخادم
يستخدم هذا المشروع خادم express.js مكتوبًا بلغة JavaScript. لنصلح الخادم لكي يستجيب بالملف index.html وسيتولى التطبيق المكوّن من صفحة واحدة تنفيذ المهام الأخرى.
- انقر على Remix to Edit (إنشاء ريمكس لتعديله) ليصبح المشروع قابلاً للتعديل.
- اختَر الملف "
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 معيّن.
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على
ملء الشاشة
.
من المفترض أن يعمل الآن تحديث الروابط وفتحها في نافذة تصفّح متخفٍ جديدة على النحو المخطَّط له.