Gizli 404 hatalarını düzeltme

Martin Splitt

Tek sayfalı uygulamalar, yeni bir sayfa yüklemeden farklı içerikler gösterebilir. Bunu yapmak için bağlantılarda tıklama işleyicileri ve Geçmiş API'sini kullanırlar. Geçmiş API'si, tarayıcı oturum geçmişini değiştirmenize olanak tanır. Bu sayede, farklı bir sayfa (tek sayfalı uygulamalarda genellikle "görünüm" olarak adlandırılır) gösterilirken URL'yi güncelleyebiliriz. 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, ardından Tam Ekran'a tam ekran basın.
  • Köpekler 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. Web uygulamasında yalnızca içindeki bağlantıları tıkladığınızda sorunsuz çalıştığından bu durum "gizli" olarak kabul edilir. 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 kod, sunucunun istenen URL için hiçbir şey bulamadığını gösterir.

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.js dosyası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. Gelecekte ek URL'lerle de çalışabilmesi için bunu tüm URL'leri yayınlayacak şekilde değiştirelim.

Bunun için 15. satırdan itibaren kodu şu ş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 herhangi 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 tam ekran basın.

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