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