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