แอปหน้าเดียวแสดงเนื้อหาที่แตกต่างกันได้โดยไม่ต้องโหลดหน้าเว็บใหม่ โดยจะใช้ตัวแฮนเดิลการคลิกในลิงก์และ 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 ใดก็ได้
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
การรีเฟรชและเปิดลิงก์ในหน้าต่างใหม่ที่ไม่ระบุตัวตนควรทำงานได้ตามที่คาดไว้