يمكن أن تعرض تطبيقات الصفحة الواحدة محتوى مختلفًا بدون تحميل صفحة جديدة. ولإجراء ذلك، يتم استخدام معالجات النقر على الروابط وHistory API. تتيح واجهة برمجة التطبيقات 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 معيّن.
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على
ملء الشاشة
.
من المفترض أن يعمل الآن تحديث الروابط وفتحها في نافذة تصفّح متخفٍ جديدة على النحو المخطَّط له.