אפליקציות של דף יחיד יכולות להציג תוכן שונה בלי לטעון דף חדש. כדי לעשות את זה, הם משתמשים ב-click handlers בקישורים וב-History API. History API מאפשר לשנות את היסטוריית הסשנים בדפדפן. כך אנחנו יכולים לעדכן את כתובת ה-URL כשמוצג דף אחר (בדרך כלל נקרא "תצוגה" באפליקציות של דף יחיד). הוא גם מוודא שהכפתור "הקודם" בדפדפן עדיין פועל כצפוי.
אפשר לראות את האפליקציה בדף יחיד ב-Codelab הזה. הוא מציג תמונות של חתולים או כלבים ומספק קישורים למעבר בין שתי החיות. נראה שהכול עובד כמו שצריך.
איך חושפים שגיאות 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 נתונה.
- כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה ואז על מסך מלא .
עכשיו אפשר לרענן את הקישורים ולפתוח אותם בחלון פרטי חדש.