Gizli 404 hatalarını düzeltme

Martin Splitt

Tek Sayfalık Uygulamalar, yeni sayfa yüklenmeden farklı içerikler gösterebilir. Bunun için bağlantılarda ve History API'de tıklama işleyicileri kullanırlar. History API, tarayıcı oturum geçmişinin değiştirilmesine olanak tanır. Bu şekilde, farklı bir sayfayı gösterirken (genellikle Tek Sayfalık Uygulamalarda "görünüm" olarak adlandırılır) URL'yi güncelleyebiliriz. Ayrıca, tarayıcının geri düğmesinin hâlâ beklendiği gibi çalıştığından emin olmanızı da sağlar.

Bu codelab'deki Tek Sayfalık Uygulama'ya göz atın. Kedi veya köpek resimlerini gösterir ve bu iki hayvan arasında geçiş yapmak için bağlantılar sağlar. Bu iyi görünüyor!

Gizli 404 sorusunu açığa çıkarma

Maalesef uygulamada küçük bir hata var. Bir göz atalım.

  • Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a tam ekran basın.
  • Doggos bağlantısını tıklayın. URL'nin nasıl değiştiğine dikkat edin.
  • Uygulamayı yeniden yükleyin.

İçinde "Cannot GET /doggos" yazan bir sayfayla karşılaşıyorsunuz: Gizli bir 404 kodu. Bu "gizlidir", çünkü yalnızca içindeki bağlantıları tıkladığınız sürece web uygulaması düzgün çalışır. URL'ler yeni bir tarayıcı penceresinde kullanılırken veya sayfa yenilenirken bozuluyor. Sorun, sunucunun bu URL'ler için yapılan isteklere nasıl yanıt vereceğini bilmemesidir. Web uygulamamızdaki JavaScript kodu, bunlar arasında gezinmek için History API'sini kullanmaktadır, ancak sunucu bunlarla ne yapacağını bilmemektedir. Sunucu, istenen bir URL için ne yapacağını bilemediğinde 404 HTTP durum koduyla yanıt verir. Bu kodla sunucu, istenen URL için hiçbir şey bulamadığını söyler.

Bu durumda, kullanıcı bir arama sonucunu tıklayıp hata mesajını bulacağından, ancak aradığı içeriği (ör. köpek resimleri) bulacağından, arama motorları URL'leri dizine eklemez.

Sunucuyu düzeltme

Bu proje, JavaScript'te yazılmış bir express.js sunucusu kullanmaktadır. Şimdi sunucuyu düzeltelim. Böylece index.html ile yanıt verir ve gerisini tek sayfalık uygulama halleder.

  • Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.
  • server.js dosyasını seçin.

Bu dosya sunucu kodunu içerir. Bir express.js sunucusu kurar ve index.html'nin içeriğini gönderir. 15. satırdaki rota kurulumu, yalnızca istekler / URL'sine gittiğinde web uygulamasını sunar. Sunucu, oluşturduğumuz diğer URL'leri de sunmalıdır. Bunu, gelecekte başka 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öster'e, ardından Tam Ekran'a tam ekran basın.

Bağlantıları yenileyip yeni bir gizli pencerede açmak artık beklendiği gibi çalışıyor.