S(GH)PA: การแฮ็กแอปหน้าเดียวสำหรับ GitHub Pages

ฉันต้องการความสามารถในการกำหนดเส้นทางสำหรับเว็บไซต์ GitHub Pages ไปยัง index.html สำหรับการจัดการเป็นแอปหน้าเดียว (SPA) มาระยะหนึ่งแล้ว นี่เป็นเดิมพันบนโต๊ะเพราะแอปดังกล่าวต้องการให้ส่งคำขอทั้งหมดไปยังไฟล์ HTML ไฟล์เดียว เว้นแต่ว่าคุณต้องการคัดลอกไฟล์เดียวกันในเส้นทางทั้งหมดของคุณทุกครั้งที่ทำการเปลี่ยนแปลงในโครงการ ปัจจุบัน GitHub Pages ไม่มีโซลูชันการจัดการเส้นทาง ระบบเพจมีจุดมุ่งหมายเพื่อเป็นกลไกที่เรียบง่ายและเรียบง่ายสำหรับการให้บริการเนื้อหาโครงการขั้นพื้นฐาน

ในกรณีที่คุณไม่ทราบ GitHub ให้การปรับแต่งเล็กน้อยสำหรับเว็บไซต์โครงการของคุณ: ความสามารถในการเพิ่มไฟล์ 404.html และใช้เป็นหน้าแสดงข้อผิดพลาดที่คุณกำหนดเอง ฉันเริ่มใช้แฮ็ค SPA ครั้งแรกด้วยการทำซ้ำไฟล์ index.html และเปลี่ยนชื่อสำเนาเป็น 404.html ปรากฎว่าหลายคนประสบปัญหาเดียวกันกับ GitHub Pages และชอบแนวคิดทั่วไป อย่างไรก็ตาม ปัญหาที่บางคนใน Twitter แจ้งอย่างถูกต้องก็คือหน้า 404.html ยังคงแสดงผลด้วยรหัสสถานะ 404 ซึ่งไม่เป็นผลดีต่อโปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหา ถุงมือถูกโยนทิ้ง และฉันตัดสินใจที่จะตอบ — และตอบอย่างกระฉับกระเฉง!

อีกครั้งด้วยความรู้สึก

หลังจากนอนบนนั้น ฉันก็คิดกับตัวเองว่า “เราอยู่ลึกเข้าไปในเขตแฮ็กที่สกปรกแล้ว ทำไมฉันไม่ทำให้แฮ็คนี้สกปรกกว่านี้ล่ะ!” ด้วยเหตุนี้ ฉันได้พัฒนาแฮ็คที่ดียิ่งขึ้นซึ่งมีฟังก์ชันการทำงานและความเรียบง่ายแบบเดียวกัน ในขณะที่ยังคงรักษาข้อมูลของโปรแกรมรวบรวมข้อมูลของเว็บไซต์ของคุณ – และคุณไม่จำเป็นต้องเสียเวลาทำซ้ำไฟล์ index.html และเปลี่ยนชื่อเป็น 404.html อีกต่อไป ! วิธีแก้ปัญหาต่อไปนี้ควรใช้ได้กับเบราว์เซอร์เดสก์ท็อปและมือถือรุ่นใหม่ทั้งหมด (Edge, Chrome, Firefox, Safari) และใน Internet Explorer 10+

เทมเพลตและการสาธิต : หากคุณต้องการข้ามคำอธิบายและรับสินค้า นี่คือเทมเพลต repo และ URL ทดสอบเพื่อดูการใช้งานจริง

นั่นมันเมต้า

สิ่งแรกที่ฉันทำคือตรวจสอบตัวเลือกอื่นๆ เพื่อให้เบราว์เซอร์เปลี่ยนเส้นทางไปยังหน้า index.html ส่วนนั้นค่อนข้างตรงไปตรงมา โดยทั่วไปคุณมีสามตัวเลือก: การกำหนดค่าเซิร์ฟเวอร์ การจัดการ location JavaScript หรือเมตาแท็ก refresh อันแรกเห็นได้ชัดว่าไม่ต้องไปที่หน้า GitHub และโดยพื้นฐานแล้ว JavaScript ก็เหมือนกับการรีเฟรช แต่เนื้อหาที่แย่กว่านั้นคือการจัดทำดัชนีของโปรแกรมรวบรวมข้อมูล นั่นทำให้เรามีเมตาแท็ก เมตาแท็กที่มีค่ารีเฟรชเป็น 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 Organization อย่าใส่ชื่อ repo ในข้อความการแทนที่แอตทริบิวต์เนื้อหา ให้ทำดังนี้: content=“0;URL='/'”

การปรับแต่งการจัดการเส้นทาง

หากคุณต้องการการจัดการเส้นทางที่ละเอียดยิ่งขึ้น เพียงรวมตรรกะ JavaScript เพิ่มเติมในแท็ก script ที่แสดงด้านบน คุณสามารถปรับแต่งได้หลายอย่าง: องค์ประกอบของ href ที่คุณส่งไปยังหน้า index.html ; หน้าใดควรอยู่ในหน้า 404 (ผ่านการลบเมตาแท็กแบบไดนามิก) และตรรกะอื่นๆ ที่คุณต้องการกำหนดเพื่อกำหนดเนื้อหาที่จะแสดงตามเส้นทางขาเข้า

512 Magical Bytes

นี่คือหนึ่งในนิสัยแปลก ๆ ที่แปลกประหลาดที่สุดเท่าที่ฉันเคยพบมาในการพัฒนาเว็บ คุณต้องตรวจสอบให้แน่ใจว่าขนาดรวมของหน้า 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 หากฉันเป็นคุณ

เอาล่ะคนนั่นแหล่ะ ไปฉลองด้วยการเขียนแอพหน้าเดียวบน GitHub Pages!

บทความนี้เป็นส่วนหนึ่งของชุดการพัฒนาเว็บไซต์จากผู้เผยแพร่เทคโนโลยีและวิศวกรของ Microsoft เกี่ยวกับการเรียนรู้ JavaScript เชิงปฏิบัติ โครงการโอเพนซอร์ซ และแนวทางปฏิบัติที่ดีที่สุดในการทำงานร่วมกัน รวมถึงเบราว์เซอร์ Microsoft Edge

เราขอแนะนำให้คุณทดสอบในเบราว์เซอร์และอุปกรณ์ต่างๆ (รวมถึง Microsoft Edge ซึ่งเป็นเบราว์เซอร์เริ่มต้นสำหรับ Windows 10) ด้วยเครื่องมือฟรีบน dev.microsoftedge.com รวมถึงเครื่องมือสำหรับนักพัฒนา F12: เครื่องมือเจ็ดรายการที่แตกต่างกันและมีเอกสารครบถ้วนเพื่อช่วยคุณในการดีบัก ทดสอบ และ เพิ่มความเร็วหน้าเว็บของคุณ นอกจากนี้ เยี่ยมชมบล็อก Edge เพื่อรับทราบข้อมูลโดยนักพัฒนาและผู้เชี่ยวชาญของ Microsoft

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

• เวิร์กโฟลว์ที่เรียบง่ายตั้งแต่การพัฒนาไปจนถึงการปรับใช้งาน
• การสร้างเว็บแอปที่สมบูรณ์ในพื้นฐานสำหรับแอป
• สร้างบล็อกด้วย Jekyll และ GitHub Pages