Gizli 404 hatalarını düzeltme

Martin Splitt

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. 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 de 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.

Bu durumda arama motorları, URL'leri dizine eklemez. Çünkü kullanıcı bir arama sonucunu tıklayıp hata mesajını bulur ancak köpek resimleri gibi aradıkları içeriği bulamaz.

Sunucuyu düzeltme

Bu proje, JavaScript'te yazılmış bir express.js sunucusu kullanı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 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 basın. Ardından, Tam ekran tam ekran düğmesine basın.

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