באפליקציות עם דף יחיד אפשר להציג תוכן שונה בלי לטעון דף חדש. כדי לעשות זאת, הם משתמשים בטיפול בקליק על קישורים וב-History API. History API מאפשר לבצע פעולות על היסטוריית הסשנים בדפדפן. כך נוכל לעדכן את כתובת ה-URL כשמוצג דף אחר (בדרך כלל נקרא 'תצוגה' באפליקציות עם דף יחיד). בנוסף, הוא מוודא שלחצן החזרה אחורה בדפדפן עדיין פועל כצפוי.
כדאי לעיין בקוד של אפליקציית דף יחיד במדריך הקוד הזה. מוצגות בו תמונות של חתול או כלב, ויש קישורים להחלפה בין שני בעלי החיים. נראה שזה עובד בסדר גמור.
חשיפת שגיאת 404 ערמומית
לצערנו, יש באפליקציה באג קטן. נבדוק את זה.
- כדי לראות תצוגה מקדימה של האתר, מקישים על הצגת האפליקציה. לאחר מכן מקישים על מסך מלא
. - לוחצים על הקישור Doggos. שימו לב איך כתובת ה-URL השתנתה.
- טוענים מחדש את האפליקציה.
יוצג לכם דף עם 'Cannot GET /doggos' – קוד 404 'ערמומי'. היא 'ערמומית', כי נראה שאפליקציית האינטרנט פועלת בצורה תקינה כל עוד לוחצים רק על קישורים בתוכה. הבעיה מתרחשת כשמשתמשים בכתובות ה-URL בחלון דפדפן חדש או כשמרעננים את הדף. הבעיה היא שהשרת לא יודע איך להגיב לבקשה לכתובות ה-URL האלה. קוד ה-JavaScript באפליקציית האינטרנט שלנו משתמש ב-History API כדי לנווט ביניהן, אבל השרת לא יודע מה לעשות איתן.
בכל פעם שהשרת לא יודע מה לעשות עם כתובת URL שהתבקשה, הוא מגיב עם קוד סטטוס HTTP 404. הקוד הזה מציין שהשרת לא מצא משהו לגבי כתובת ה-URL המבוקשת.
במקרה כזה, מנועי החיפוש לא יכללו את כתובות ה-URL באינדקס, כי משתמש ילחץ על תוצאת חיפוש וימצא את הודעת השגיאה, אבל לא את התוכן שהוא חיפש, כמו תמונות של כלבים.
תיקון השרת
בפרויקט הזה נעשה שימוש בשרת express.js שנכתב ב-JavaScript. נתקן את השרת כך שיגיב עם index.html, והאפליקציה עם הדף היחיד יטפלת בשאר.
- לוחצים על Remix to Edit כדי לאפשר עריכה של הפרויקט.
- בוחרים את הקובץ
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 נתונה.
- כדי לראות תצוגה מקדימה של האתר, מקישים על הצגת האפליקציה. לאחר מכן מקישים על מסך מלא
.
עכשיו אמורה להיות אפשרות לרענן את הדף ולפתוח את הקישורים בחלון פרטי חדש כרגיל.