S (GH) PA: The Single Page App Hack لصفحات GitHub

لبعض الوقت الآن ، كنت أرغب في القدرة على توجيه المسارات لموقع ويب صفحات GitHub إلى index.html للتعامل معها كتطبيق أحادي الصفحة (SPA). هذا هو جدول الرهانات لأن مثل هذه التطبيقات تتطلب توجيه جميع الطلبات إلى ملف HTML واحد ، إلا إذا كنت ترغب في نسخ نفس الملف عبر جميع مساراتك في كل مرة تقوم فيها بإجراء تغيير على المشروع. حاليًا ، لا تقدم صفحات GitHub حلاً للتعامل مع المسار ؛ يهدف نظام الصفحات إلى أن يكون آلية مسطحة وبسيطة لخدمة المحتوى الأساسي للمشروع.

في حال لم تكن على دراية ، يوفر GitHub لقمة واحدة من التخصيص لموقع الويب الخاص بمشروعك: القدرة على إضافة ملف 404.html وجعله بمثابة صفحة خطأ مخصصة. لقد اتخذت أول طعنة في اختراق SPA ببساطة عن طريق نسخ ملف index.html الخاص بي وإعادة تسمية النسخة إلى 404.html . تبين أن العديد من الأشخاص قد واجهوا نفس المشكلة مع صفحات GitHub وأحبوا الفكرة العامة. ومع ذلك ، فإن المشكلة التي أثارها بعض الأشخاص على Twitter بشكل صحيح هي أن الصفحة 404.html لا تزال تُعرض برمز الحالة 404 ، وهو أمر غير مناسب لبرامج زحف محركات البحث. لقد تم إلقاء القفاز ، وقررت أن أجيب - وأجيب بقوة!

احد مزيد من الوقت مع الشعور

بعد النوم عليه ، قلت لنفسي ، "ذاتي ، نحن في أعماق منطقة الاختراق القذرة ، فلماذا لا أجعل هذا الاختراق أكثر قذارة؟!" تحقيقا لهذه الغاية ، لقد طورت اختراقًا أفضل يوفر نفس الوظيفة والبساطة ، مع الحفاظ أيضًا على عصير الزاحف لموقع الويب الخاص بك - ولا تحتاج حتى إلى إضاعة الوقت في نسخ ملف index.html وإعادة تسميته إلى 404.html بعد الآن ! يجب أن يعمل الحل التالي في جميع متصفحات سطح المكتب والجوّال الحديثة (Edge و Chrome و Firefox و Safari) وفي Internet Explorer 10+.

النموذج والعرض التوضيحي : إذا كنت تريد تخطي الشرح والحصول على البضائع ، فإليك نموذج إعادة الشراء وعنوان URL للاختبار لرؤيته أثناء العمل.

هذا ميتا جدا

أول شيء فعلته هو التحقق من الخيارات الأخرى لجعل المتصفح يعيد التوجيه إلى صفحة index.html . كان هذا الجزء واضحًا جدًا. لديك ثلاثة خيارات أساسية: تكوين الخادم ، أو معالجة location JavaScript ، أو refresh العلامة الوصفية. من الواضح أن أول واحد يحظر استخدام صفحات GitHub. وجافا سكريبت هو في الأساس نفس التحديث ، ولكن يمكن القول إنه أسوأ بالنسبة لفهرسة الزاحف. هذا يتركنا مع meta tag. يبدو أن العلامة الوصفية ذات قيمة التحديث 0 يتم التعامل معها على أنها إعادة توجيه 301 بواسطة محركات البحث ، والتي تعمل بشكل جيد مع حالة الاستخدام هذه.

ستحتاج إلى البدء بإضافة ملف 404.html إلى مستودع gh-pages الذي يحتوي على مستند HTML فارغ بداخله. يجب أن يزيد إجمالي هذا المستند عن 512 بايت (موضح أدناه). بعد ذلك ، ضع الترميز التالي في عنصر head الصفحة 404.html :

 <script> sessionStorage.redirect = location.href; </script> <meta http-equiv="refresh" content="0;URL='/REPO_NAME_HERE'">

تعيّن هذه الشفرة عنوان URL للدخول الذي تمت تجربته إلى متغير في كائن sessionStorage القياسي وتعيد التوجيه فورًا إلى صفحة index.html الخاصة بمشروعك باستخدام علامة تحديث وصفية. إذا كنت تقوم بإنشاء موقع مؤسسة Github ، فلا تضع اسم الريبو في نص بديل سمة المحتوى ، فقط افعل هذا: content=“0;URL='/'”

تخصيص معالجة الطريق

إذا كنت تريد معالجة مسار أكثر تفصيلاً ، فما عليك سوى تضمين بعض منطق JavaScript الإضافي في علامة script الموضحة أعلاه. يمكنك تعديل عدة أشياء: تكوين href الذي تقوم بتمريره إلى صفحة index.html ؛ الصفحات التي يجب أن تظل في صفحة 404 (عن طريق الإزالة الديناميكية للعلامة الوصفية) ؛ وأي منطق آخر تريد وضعه لإملاء المحتوى الذي يتم عرضه بناءً على المسار الوارد.

512 بايت السحري

هذه ، بكل بساطة ، واحدة من أغرب المراوغات التي واجهتها في تطوير الويب. يجب عليك التأكد من أن الحجم الإجمالي لصفحة 404.html أكبر من 512 بايت ، لأنه إذا لم يكن كذلك ، فسيتجاهلها Internet Explorer ويعرض صفحة متصفح عامة 404 بدلاً من ذلك. عندما اكتشفت ذلك أخيرًا ، اضطررت إلى فتح بيرة للتعامل مع مقدار الوقت الذي استغرقته.

دعونا نصنع التاريخ

لالتقاط واستعادة عنوان URL الذي انتقل إليه المستخدم في البداية ، ستحتاج إلى إضافة علامة script التالية إلى head صفحة index.html قبل أن تعمل أي JavaScript أخرى على الحالة الحالية للصفحة:

 <script> (function(){ var redirect = sessionStorage.redirect; delete sessionStorage.redirect; if (redirect && redirect != location.href) { history.replaceState(null, null, redirect); } })(); </script>

يسترد هذا الجزء من JavaScript عنوان URL الذي قمنا بتخزينه مؤقتًا في sessionStorage على الصفحة 404.html ويستبدل إدخال history الحالي به. إن الطريقة التي تختار بها التعامل مع الأشياء من هنا أمر متروك لك ، لكنني popstate و hashchange إذا كنت مكانك.

حسنًا يا رفاق ، هذا كل شيء. اذهب الآن للاحتفال بكتابة بعض التطبيقات ذات الصفحة الواحدة على صفحات جيثب!

هذه المقالة جزء من سلسلة تطوير الويب من المبشرين التقنيين والمهندسين في Microsoft حول تعلم JavaScript العملي ، والمشاريع مفتوحة المصدر وأفضل ممارسات التشغيل البيني ، بما في ذلك مستعرض Microsoft Edge.

نحن نشجعك على الاختبار عبر المتصفحات والأجهزة (بما في ذلك Microsoft Edge - المتصفح الافتراضي لنظام التشغيل Windows 10) باستخدام أدوات مجانية على dev.microsoftedge.com ، بما في ذلك أدوات المطور F12: سبع أدوات مميزة وموثقة بالكامل لمساعدتك في تصحيح الأخطاء والاختبار و تسريع صفحات الويب الخاصة بك. قم أيضًا بزيارة مدونة Edge لتبقى على اطلاع من قبل مطوري وخبراء Microsoft.

مزيد من القراءة على SmashingMag:

• سير عمل بسيط من التطوير إلى النشر
• إنشاء تطبيق ويب كامل في Foundation For Apps
• أنشئ مدونة باستخدام صفحات Jekyll و GitHub