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