Tek sayfalık uygulamalar, yeni bir sayfa yüklemeden farklı içerikler gösterebilir. Bunun için bağlantılarda tıklama işleyicileri ve Geçmiş API'sini kullanır. History API, tarayıcı oturum geçmişini değiştirmenize olanak tanır. Bu şekilde, farklı bir sayfayı gösterirken URL'yi güncelleyebiliriz (Tek Sayfalık Uygulamalarda genellikle "görüntüleme" olarak adlandırılır). Ayrıca, tarayıcının geri düğmesinin beklendiği gibi çalışmaya devam etmesini sağlar.
Bu codelab'deki tek sayfalık uygulamaya göz atın. Reklamda kedi veya köpek resimleri gösterilir ve iki hayvan arasında geçiş yapmanızı sağlayan bağlantılar sağlanır. Sorunsuz çalışıyor.
Gizli 404'leri ortaya çıkarma
Maalesef uygulamada küçük bir hata var. Bir göz atalım.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran
düğmesine basın. - Doggos bağlantısını tıklayın. URL'nin nasıl değiştiğine dikkat edin.
- Uygulamayı yeniden yükleyin.
"Cannot GET /doggos" içeren bir sayfa görürsünüz. Bu, gizli bir 404'tür. Bu "gizli" bir dosyadır, çünkü
yalnızca içindeki bağlantıları tıkladığınız sürece web uygulaması iyi çalışır. URL'ler yeni bir tarayıcı penceresinde kullanıldığında veya sayfa yenilendiğinde çalışmaz. Sorun, sunucunun bu URL'lerle ilgili bir isteğe nasıl yanıt vereceğini bilmemesinden kaynaklanıyor. Web uygulamamızdaki JavaScript kodu, bunlar arasında gezinmek için History API'yi kullanıyor ancak sunucu bunlarla ne yapacağını bilmiyor.
Sunucu, istenen bir URL için ne yapacağını bilmediğinde 404 HTTP durum koduyla yanıt verir. Bu kodla sunucu, istenen URL için
bir şey bulamadığını belirtir.
Kullanıcı bir arama sonucunu tıkladığında hata mesajı görür ve aradığı içeriği (ör. köpek resimleri) bulamaz. Bu nedenle arama motorları bu durumdaki URL'leri dizine eklemez.
Sunucuyu düzeltme
Bu projede JavaScript ile yazılmış bir express.js sunucusu kullanılmaktadır. Sunucuyu, index.html ile yanıt verecek şekilde düzeltelim. Tek sayfalık uygulama geri kalanını halleder.
- Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.
server.jsdosyasını seçin.
Bu dosya sunucu kodunu içerir. Bir express.js sunucusu oluşturur ve index.html içeriğini gönderir. 15. satırda ayarlanan rota, yalnızca istekler / URL'sine gittiğinde web uygulamasını sunar. Sunucu, oluşturduğumuz diğer URL'leri de sunmalıdır. Bunu ileride ek URL'lerle de çalışması için tüm URL'leri sunacak şekilde değiştirelim.
Bunun için, 15. satırdan başlayan kodu aşağıdaki şekilde değiştirebiliriz:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/*, herhangi bir URL ile eşleşir ve sunucu artık belirli bir URL için index.html içindeki web uygulamasıyla yanıt verir.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a basın.
Bağlantıları yeni bir gizli pencerede yenileyip açmak artık beklendiği gibi çalışacaktır.