برنامه‌های تک‌صفحه‌ای می‌توانند محتوای متفاوتی را بدون بار کردن صفحه جدید نشان دهند. برای انجام این کار، آن‌ها از گرداننده‌های کلیک روی پیوندها و History API استفاده می‌کنند. History API امکان دستکاری سابقه جلسه مرورگر را فراهم می‌کند. به‌این‌ترتیب می‌توانیم نشانی وب را هنگام نمایش صفحه متفاوت (که معمولاً در «برنامه‌های تک‌صفحه‌ای» به آن «نما» می‌گویند) به‌روز کنیم. همچنین مطمئن می‌شود دکمه برگشتن مرورگر همچنان طبق انتظار کار می‌کند.
در این codelab، به «برنامه تک‌صفحه‌ای» نگاهی بیندازید. این برنامه تصاویر گربه یا سگ را نشان می‌دهد و پیوندهایی برای جابه‌جایی بین این دو حیوان ارائه می‌دهد. به‌نظر می‌رسد درست کار می‌کند!
آشکار کردن خطای ۴۰۴ پنهان
متأسفانه اشکال جزئی‌ای در برنامه وجود دارد. بیایید نگاهی بیندازیم!
- برای پیش‌دید کردن سایت، مشاهده برنامه را فشار دهید. سپس
تمام‌صفحه
را فشار دهید. - روی پیوند Doggos کلیک کنید. ببینید نشانی وب چگونه تغییر کرد.
- برنامه را مجدداً بار کنید.
صفحه‌ای با «Cannot GET /doggos» دریافت می‌کنید—یک خطای ۴۰۴ پنهان. این کار «مخفیانه» است،
زیرا به‌نظر می‌رسد برنامه وب تا زمانی که فقط روی پیوندهای درون آن کلیک می‌کنید، به‌خوبی کار می‌کند. هنگام استفاده از نشانی‌های وب در پنجره مرورگر جدید یا هنگام بازآوری صفحه، این پیوندها خراب می‌شوند. مشکل این است که سرور نمی‌داند چگونه به درخواست این نشانی‌های وب پاسخ دهد. کد جاوا اسکریپت در برنامه وب ما از History API برای پیمایش بین آن‌ها استفاده می‌کند، اما سرور نمی‌داند با آن‌ها چه کند.
هرگاه سرور نداند برای نشانی وب درخواست‌شده چه کاری باید انجام دهد،
با رمز وضعیت HTTP 404 پاسخ می‌دهد. با این کد، سرور می‌گوید چیزی برای نشانی وب درخواستی پیدا نکرده است.
در این حالت، موتورهای جستجو نشانی‌های وب را نمایه نمی‌کنند، زیرا کاربر روی نتیجه جستجو کلیک می‌کند و پیام خطا را می‌بیند، اما محتوایی را که به‌دنبالش بوده است (مثلاً عکس‌های سگ) پیدا نمی‌کند.
درحال رفع مشکل سرور
این پروژه از سرور express.js استفاده می‌کند که به زبان جاوا اسکریپت نوشته شده است. بیایید سرور را اصلاح کنیم تا با index.html پاسخ دهد و برنامه تک‌صفحه‌ای بقیه کارها را انجام دهد.
- روی بازآمیزی برای ویرایش کلیک کنید تا پروژه قابل‌ویرایش شود.
- فایل
server.jsرا انتخاب کنید.
این فایل حاوی کد سرور است. این کد یک سرور express.js راه‌اندازی می‌کند و
محتوای index.html را ارسال می‌کند. راه‌اندازی مسیر در خط ۱۵ فقط زمانی به برنامه وب خدمات ارائه می‌دهد
که درخواست‌ها به نشانی وب / بروند. سرور باید نشانی‌های وب دیگری را که ایجاد کرده‌ایم نیز ارائه دهد. بیایید این را تغییر دهیم تا همه نشانی‌های وب را ارائه دهد، تا در آینده با نشانی‌های وب اضافی نیز کار کند.
برای انجام این کار، می‌توانیم کد را از خط ۱۵ به این صورت تغییر دهیم:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/* با هر نشانی وبی مطابقت دارد و سرور اکنون با برنامه وب در
index.html برای هر نشانی وب داده‌شده پاسخ می‌دهد.
- برای پیش‌دید کردن سایت، مشاهده برنامه را فشار دهید. سپس
تمام‌صفحه
را فشار دهید.
اکنون باز کردن پیوندها در پنجره ناشناس جدید و بازآوری آن‌ها باید طبق انتظار کار کند.