แอปหน้าเดียวสามารถแสดงเนื้อหาที่แตกต่างกันได้โดยไม่ต้องโหลดหน้าเว็บใหม่ โดยใช้เครื่องจัดการการคลิกในลิงก์และ History API History API ช่วยให้ จัดการประวัติเซสชันของเบราว์เซอร์ได้ วิธีนี้จะช่วยให้เราอัปเดต URL เมื่อแสดงหน้าที่ต่างกัน (มักเรียกว่า "การดู" ในแอปหน้าเดียว) และยังช่วยให้ปุ่มย้อนกลับของเบราว์เซอร์ยังคงทำงานตามที่คาดไว้ด้วย
ลองดูแอปหน้าเดียวใน Codelab นี้ โดยจะแสดงรูปภาพแมวหรือสุนัข และให้ลิงก์ในการสลับไปมาระหว่างสัตว์ 2 ตัว ดูเหมือนว่าจะไม่มีปัญหาอะไรนะ
กำลังเผยโฉมข้อผิดพลาด 404 ที่แอบแฝง
ขออภัย มีข้อบกพร่องเล็กๆ น้อยๆ ในแอป เราลองมาดูกัน!
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- คลิกลิงก์ Doggos สังเกตว่า URL เปลี่ยนแปลงไปอย่างไร
- โหลดแอปซ้ำ
คุณเห็นหน้าที่มีคำว่า "Cannot GET /doggos" อยู่ ซึ่งเป็นหน้า 404 ที่แอบแฝง เป็น "อย่างล้นหลาม"
เพราะเว็บแอปจะทำงานปกติดีตราบใดที่คุณคลิกลิงก์ภายใน
แอปเท่านั้น และจะใช้งานไม่ได้เมื่อใช้ URL ในหน้าต่างเบราว์เซอร์ใหม่หรือเมื่อรีเฟรชหน้าเว็บ ปัญหาคือเซิร์ฟเวอร์ไม่ทราบวิธีตอบสนองต่อคำขอสำหรับ URL เหล่านี้ โค้ด JavaScript ในเว็บแอปของเราใช้ History API เพื่อสลับไปมาระหว่าง URL เหล่านี้ แต่เซิร์ฟเวอร์ไม่ทราบว่าจะทำอย่างไรกับ URL เหล่านี้
เมื่อใดก็ตามที่เซิร์ฟเวอร์ไม่ทราบว่าต้องทำอย่างไรกับ 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 ที่กำหนด
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
ขณะนี้การรีเฟรชและเปิดลิงก์ในหน้าต่างที่ไม่ระบุตัวตนใหม่ควรทำงานตามที่คาดไว้