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