Navigation API'de Ustalaşmak: Tek Sayfa Uygulamaları için Yönlendirme ve Geçmiş Yönetimi

Navigation API, Tek Sayfa Uygulamaları (SPA'lar) içinde yönlendirme ve geçmiş yönetimini ele alma biçimimizde önemli bir ilerlemeyi temsil eder. Geleneksel yöntemler genellikle `window.location` nesnesini manipüle etmeye veya üçüncü taraf kütüphaneleri kullanmaya dayanır. Bu yaklaşımlar bize iyi hizmet etmiş olsa da, Navigation API daha akıcı, performanslı ve zengin özellikli bir çözüm sunarak geliştiricilere kullanıcının gezinme deneyimi üzerinde daha fazla kontrol sağlar.

Navigation API Nedir?

Navigation API, SPA'ların gezinme, yönlendirme ve geçmişi yönetme şeklini basitleştirmek ve geliştirmek için tasarlanmış modern bir tarayıcı API'sidir. Geliştiricilerin gezinme olaylarını yakalamasına ve kontrol etmesine, URL'yi güncellemesine ve tam sayfa yeniden yüklemeleri olmadan tutarlı bir tarama geçmişi sürdürmesine olanak tanıyan yöntemler ve olaylar sağlayan yeni bir `navigation` nesnesi sunar. Bu, daha hızlı, daha akıcı ve daha duyarlı bir kullanıcı deneyimi sağlar.

Navigation API Kullanmanın Faydaları

• Geliştirilmiş Performans: Tam sayfa yeniden yüklemelerini ortadan kaldırarak, Navigation API, SPA'ların performansını önemli ölçüde artırır. Farklı görünümler arasındaki geçişler daha hızlı ve akıcı hale gelir, bu da daha ilgi çekici bir kullanıcı deneyimine yol açar.
• Gelişmiş Kontrol: API, gezinme olayları üzerinde ayrıntılı kontrol sağlayarak geliştiricilerin gezinme davranışını gerektiği gibi yakalamasına ve değiştirmesine olanak tanır. Bu, gezinmeyi önlemeyi, kullanıcıları yönlendirmeyi ve gezinme öncesinde veya sonrasında özel mantık yürütmeyi içerir.
• Basitleştirilmiş Geçmiş Yönetimi: Tarayıcının geçmiş yığınını yönetmek, Navigation API ile daha kolay hale gelir. Geliştiriciler programatik olarak geçmiş girdileri ekleyebilir, değiştirebilir ve bunlar arasında gezinebilir, böylece tutarlı ve öngörülebilir bir tarama deneyimi sağlanır.
• Bildirimsel Gezinme: Navigation API, yönlendirmeye daha bildirimsel bir yaklaşımı teşvik ederek geliştiricilerin gezinme kurallarını ve davranışlarını açık ve öz bir şekilde tanımlamasına olanak tanır. Bu, kodun okunabilirliğini ve sürdürülebilirliğini artırır.
• Modern Framework'lerle Entegrasyon: Navigation API, React, Angular ve Vue.js gibi modern JavaScript framework'leri ve kütüphaneleriyle sorunsuz bir şekilde entegre olacak şekilde tasarlanmıştır. Bu, geliştiricilerin API'nin özelliklerini mevcut geliştirme iş akışlarında kullanmalarına olanak tanır.

Temel Kavramlar ve Özellikler

1. `navigation` Nesnesi

Navigation API'nin kalbi, global `window` nesnesi üzerinden erişilebilen (yani, `window.navigation`) `navigation` nesnesidir. Bu nesne, gezinmeyle ilgili çeşitli özelliklere ve yöntemlere erişim sağlar, bunlar arasında:

• `currentEntry`: Gezinme geçmişindeki mevcut girdiyi temsil eden bir `NavigationHistoryEntry` nesnesi döndürür.
• `entries()`: Gezinme geçmişindeki tüm girdileri temsil eden bir `NavigationHistoryEntry` nesneleri dizisi döndürür.
• `navigate(url, { state, info, replace })`: Yeni bir URL'ye gider.
• `back()`: Önceki geçmiş girdisine geri döner.
• `forward()`: Sonraki geçmiş girdisine ileri gider.
• `reload()`: Mevcut sayfayı yeniden yükler.
• `addEventListener(event, listener)`: Gezinmeyle ilgili olaylar için bir olay dinleyicisi ekler.

2. `NavigationHistoryEntry`

`NavigationHistoryEntry` arayüzü, gezinme geçmişindeki tek bir girdiyi temsil eder. Girdinin URL'si, durumu ve benzersiz kimliği gibi bilgiler sağlar.

• `url`: Geçmiş girdisinin URL'si.
• `key`: Geçmiş girdisi için benzersiz bir tanımlayıcı.
• `id`: Özellikle bir gezinme olayının yaşam döngüsünü izlemek için kullanışlı olan başka bir benzersiz tanımlayıcı.
• `sameDocument`: Gezinmenin aynı belge içinde bir gezinme ile sonuçlanıp sonuçlanmadığını belirten bir boole değeri.
• `getState()`: Geçmiş girdisiyle ilişkili durumu döndürür (gezinme sırasında ayarlanır).

3. Gezinme Olayları

Navigation API, geliştiricilerin gezinme davranışını izlemesine ve kontrol etmesine olanak tanıyan birkaç olay tetikler. Bu olaylar şunları içerir:

• `navigate`: Bir gezinme başlatıldığında (örneğin, bir bağlantıya tıklandığında, bir form gönderildiğinde veya `navigation.navigate()` çağrıldığında) tetiklenir. Bu, gezinme isteklerini yakalamak ve işlemek için birincil olaydır.
• `navigatesuccess`: Bir gezinme başarıyla tamamlandığında tetiklenir.
• `navigateerror`: Bir gezinme başarısız olduğunda (örneğin, bir ağ hatası veya işlenmemiş bir istisna nedeniyle) tetiklenir.
• `currentchange`: Mevcut geçmiş girdisi değiştiğinde (örneğin, ileri veya geri gidildiğinde) tetiklenir.
• `dispose`: Bir `NavigationHistoryEntry` artık ulaşılamaz olduğunda, örneğin bir `replaceState` işlemi sırasında geçmişten kaldırıldığında tetiklenir.

Navigation API ile Yönlendirme Uygulaması: Pratik Bir Örnek

Basit bir SPA'da temel yönlendirmeyi uygulamak için Navigation API'nin nasıl kullanılacağını gösterelim. Ana Sayfa, Hakkında ve İletişim olmak üzere üç görünüme sahip bir uygulama düşünün.

İlk olarak, rota değişikliklerini işlemek için bir fonksiyon oluşturun:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Ana Sayfa
Ana sayfaya hoş geldiniz!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
Hakkında
Bizimle ilgili daha fazla bilgi edinin.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
İletişim
Bizimle iletişime geçin.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Bulunamadı
Sayfa bulunamadı.
';
  }
}

Ardından, `navigate` olayına bir olay dinleyicisi ekleyin:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Varsayılan tarayıcı gezinmesini önle

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Rota işlendikten sonra promise'i çöz
  });

  event.transition = promise;
});

Bu kod, `navigate` olayını yakalar, URL'yi `event.destination` nesnesinden çıkarır, varsayılan tarayıcı gezinmesini önler, içeriği güncellemek için `handleRouteChange` fonksiyonunu çağırır ve `event.transition` promise'ini ayarlar. `event.transition`'ı ayarlamak, tarayıcının sayfayı görsel olarak güncellemeden önce içerik güncellemesinin tamamlanmasını beklemesini sağlar.

Son olarak, gezinmeyi tetikleyen bağlantılar oluşturabilirsiniz:

Ana Sayfa | Hakkında | İletişim

Ve bu bağlantılara bir tıklama dinleyicisi ekleyin:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

Bu, Navigation API kullanarak temel istemci tarafı yönlendirmesini kurar. Artık bağlantılara tıklamak, `content` div'inin içeriğini tam sayfa yeniden yüklemesi olmadan güncelleyen bir gezinme olayını tetikleyecektir.

Durum Yönetimi Ekleme

Navigation API ayrıca her geçmiş girdisiyle durum ilişkilendirmenize olanak tanır. Bu, gezinme olayları arasında verileri korumak için kullanışlıdır. Bir durum nesnesi eklemek için önceki örneği değiştirelim.

`navigation.navigate()` fonksiyonunu çağırırken bir `state` nesnesi geçirebilirsiniz:

window.navigation.navigate('/about', { state: { pageTitle: 'Hakkımızda' } });

`navigate` olay dinleyicisinin içinde, duruma `event.destination.getState()` kullanarak erişebilirsiniz:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'Uygulamam'; // Varsayılan başlık

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Ana Sayfa
Ana sayfaya hoş geldiniz!
';
      title = 'Ana Sayfa';
      break;
    case '/about':
      contentDiv.innerHTML = '
Hakkında
Bizimle ilgili daha fazla bilgi edinin.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
İletişim
Bizimle iletişime geçin.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Bulunamadı
Sayfa bulunamadı.
';
      title = '404 Bulunamadı';
  }
  document.title = title;
}

Bu değiştirilmiş örnekte, `handleRouteChange` fonksiyonu artık bir `state` parametresi kabul eder ve bunu belge başlığını güncellemek için kullanır. Herhangi bir durum geçirilmezse, varsayılan olarak 'Uygulamam' olur.

`navigation.updateCurrentEntry()` Kullanımı

Bazen yeni bir gezinme tetiklemeden mevcut geçmiş girdisinin durumunu güncellemek isteyebilirsiniz. `navigation.updateCurrentEntry()` yöntemi bunu yapmanıza olanak tanır. Örneğin, bir kullanıcı mevcut sayfada bir ayarı değiştirirse, bu değişikliği yansıtmak için durumu güncelleyebilirsiniz:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Ayar güncellendi:', setting, 'değeri:', value);
}

// Örnek kullanım:
updateUserSetting('theme', 'dark');

Bu fonksiyon mevcut durumu alır, güncellenmiş ayarı birleştirir ve ardından mevcut geçmiş girdisini yeni durumla günceller.

İleri Düzey Kullanım Senaryoları ve Dikkat Edilmesi Gerekenler

1. Form Gönderimlerini Ele Alma

Navigation API, SPA'larda form gönderimlerini ele almak, tam sayfa yeniden yüklemelerini önlemek ve daha sorunsuz bir kullanıcı deneyimi sağlamak için kullanılabilir. Form gönderme olayını yakalayabilir ve URL'yi güncellemek ve sonuçları tam sayfa yeniden yüklemesi olmadan görüntülemek için `navigation.navigate()` kullanabilirsiniz.

2. Asenkron İşlemler

Gezinme olaylarını işlerken, bir API'den veri getirmek gibi asenkron işlemler yapmanız gerekebilir. `event.transition` özelliği, gezinme olayıyla bir promise ilişkilendirmenize olanak tanır, böylece tarayıcının sayfayı güncellemeden önce asenkron işlemin tamamlanmasını beklemesini sağlar. Yukarıdaki örneklere bakın.

3. Kaydırma Konumunu Geri Yükleme

Gezinme sırasında kaydırma konumunu korumak, iyi bir kullanıcı deneyimi sağlamak için çok önemlidir. Navigation API, geçmişte geri veya ileri gidildiğinde kaydırma konumunu geri yüklemek için mekanizmalar sağlar. Kaydırma konumunu saklamak ve geri yüklemek için `NavigationHistoryEntry`'nin `scroll` özelliğini kullanabilirsiniz.

4. Hata Yönetimi

Gezinme sırasında ortaya çıkabilecek ağ hataları veya işlenmemiş istisnalar gibi hataları ele almak çok önemlidir. `navigateerror` olayı, bu hataları zarif bir şekilde yakalamanıza ve işlemenize olanak tanır, böylece uygulamanın çökmesini veya kullanıcıya bir hata mesajı göstermesini önler.

5. Aşamalı Geliştirme

Navigation API ile SPA'lar oluştururken, aşamalı geliştirmeyi göz önünde bulundurmak önemlidir. Uygulamanızın, Navigation API tarayıcı tarafından desteklenmese bile doğru çalıştığından emin olun. `navigation` nesnesinin varlığını kontrol etmek için özellik tespiti kullanabilir ve gerekirse geleneksel yönlendirme yöntemlerine geri dönebilirsiniz.

Geleneksel Yönlendirme Yöntemleriyle Karşılaştırma

SPA'lardaki geleneksel yönlendirme yöntemleri genellikle `window.location` nesnesini manipüle etmeye veya `react-router` veya `vue-router` gibi üçüncü taraf kütüphaneleri kullanmaya dayanır. Bu yöntemler yaygın olarak kullanılsa ve iyi yerleşmiş olsa da, bazı sınırlamaları vardır:

• Tam Sayfa Yeniden Yüklemeleri: `window.location`'ı doğrudan manipüle etmek, yavaş olabilen ve kullanıcı deneyimini kesintiye uğratabilen tam sayfa yeniden yüklemelerini tetikleyebilir.
• Karmaşıklık: Geleneksel yöntemlerle geçmişi ve durumu yönetmek, özellikle büyük ve karmaşık uygulamalarda karmaşık ve hataya açık olabilir.
• Performans Yükü: Üçüncü taraf yönlendirme kütüphaneleri, özellikle uygulamanızın özel ihtiyaçları için optimize edilmemişlerse, önemli performans yükü ekleyebilir.

Navigation API, yönlendirme ve geçmiş yönetimi için daha akıcı, performanslı ve zengin özellikli bir çözüm sunarak bu sınırlamaları giderir. Tam sayfa yeniden yüklemelerini ortadan kaldırır, geçmiş yönetimini basitleştirir ve gezinme olayları üzerinde ayrıntılı kontrol sağlar.

Tarayıcı Uyumluluğu

2024'ün sonları itibarıyla, Navigation API, Chrome, Firefox, Safari ve Edge dahil olmak üzere modern tarayıcılarda iyi bir desteğe sahiptir. Ancak, üretim uygulamalarınızda Navigation API'yi uygulamadan önce Can I use gibi kaynaklardan en son tarayıcı uyumluluk bilgilerini kontrol etmek her zaman iyi bir uygulamadır. Eski tarayıcı desteği zorunluysa, bir polyfill veya bir geri dönüş mekanizması kullanmayı düşünün.

Sonuç

Navigation API, gelişmiş yönlendirme ve geçmiş yönetimi yeteneklerine sahip modern, performanslı SPA'lar oluşturmak için güçlü bir araçtır. API'nin özelliklerinden yararlanarak geliştiriciler daha hızlı, daha akıcı ve daha ilgi çekici kullanıcı deneyimleri oluşturabilirler. Başlangıçtaki öğrenme eğrisi daha basit, eski yöntemlere kıyasla biraz daha dik olsa da, Navigation API'nin özellikle karmaşık uygulamalardaki avantajları, onu değerli bir yatırım haline getirir. Navigation API'yi benimseyin ve SPA'larınızın tüm potansiyelini ortaya çıkarın.

Daha Fazla Bilgi İçin

• MDN Web Docs: Navigation API
• WICG Navigation API Spesifikasyonu