Chrome 105, pratikte sorunlu olduğu kanıtlanan yöntemleri iyileştirmek için Navigation API'nin NavigateEvent (102'de kullanıma sunulmuştur) üzerinde iki yeni yöntem sunar. Geliştiricilerin gezinme sonrasında durumu kontrol etmesine olanak tanıyan intercept(), kullanımının zor olduğu kanıtlanan transitionWhile()'in yerini alıyor. URL'de belirtilen bir ankaraya ilerleyen scroll() yöntemi, tüm gezinme türleri için çalışmayan restoreScroll() yönteminin yerini alır.
Bu makalede, her iki yöntemle ilgili sorunları ve yeni yöntemlerin bu sorunları nasıl düzelttiğini açıklayacağız.
NavigateEvent.transitionWhile()
Chrome 102'de Navigation API ile kullanıma sunulan NavigateEvent.trasitionWhile() yöntemi, tek sayfalı uygulamalarda istemci tarafı geçişler için gezinmeyi durdurur. İlk bağımsız değişkeni, tarayıcıya ve web uygulamasının diğer bölümlerine işlemin tamamlandığını bildiren bir sözdür.
Bu yöntem pratikte pek işe yaramadı. Aşağıdaki yaygın kodlama kalıbını düşünün:
event.transitionWhile((async () => {
doSyncStuff();
await doAsyncStuff();
})());
Bu kod, işlevsel olarak aşağıdaki kodla aynıdır. API, geliştiricinin gezinme işlemini durdurmayı amaçladığını fark etmeden önce gezinmenin bir kısmının çalışmasına neden olur.
doSyncStuff();
event.transitionWhile((async () => {
await doAsyncStuff();
})());
Bunun bir uygulamayı bozabileceği bir örnek, kaydırma konumlarını DOM değişikliğinden önce değil, sonra yakalayan kaydırma geri yükleme mantığıdır.
Neler değişti?
Mevcut spesifikasyon, transitionWhile() yerine NavigateEvent.intercept()'ü kullanıma sunar. Yeni yöntem, transitionWhile() tarafından desteklenen focusReset ve scrollRestoration özelliklerine ek olarak bir işleyici alır. Yeni işleyici her zaman gezinme işlemi tamamlandıktan ve kaydırma konumları gibi öğeler yakalandıktan sonra çalışır. Böylece transitionWhile() ile ilgili sorunlar önlenir.
transitionWhile() yöntemi hâlâ kullanılabilir ancak desteği sonlandırılmış olup Chrome 108'de kaldırılacaktır.
intercept() işlevini kullanma
NavigateEvent.intercept(), tüm gezinme etkinliklerinde çağrılamaması nedeniyle transitionWhile() ile aynı kısıtlamalara sahiptir. Kaynaklar arası gezinmeler ve doküman içi geçişler de engellenemez. Bu işlem, "SecurityError" türündeki bir DOMException oluşturur.
intercept() işlevini kullanmak için işlevi çağırırken özel işleyicinizi iletin.
navigation.addEventListener("navigate", event => {
event.intercept({
async handler() {
doSyncStuff();
await doAsyncStuff();
}
});
});
NavigateEvent.scroll()
Sayfanın üst kısmından bir ankora geçiş gibi gezinme işlemleri (/a'ten /a#id'e geçiş olarak adlandıralım), tek sayfalık uygulamalarda bile tamamen tarayıcı tarafından yönetilir. Ancak başka bir "sayfada"ki bir ankora geçiş (/a'ten /b#id'e geçiş), çok sayfalı uygulamalarda basit olsa da tek sayfalık uygulamalarda daha karmaşıktır. Uygulamanın, NavigateEvent.transitionWhile() kullanarak /b#id'e giden gezinmeyi durdurması ve ardından sabitleyiciyi görüntüye getirmek için NavigateEvent.restoreScroll()'yi çağırması gerekir. Yukarıda belirtildiği gibi, bu işlemin şu anda yapılması zordur.
Neler değişti?
Tek sayfalı uygulamalarda artık sabit bir yere kaydırmanın tarayıcı tarafından mı yoksa kodunuz tarafından mı yapılacağını kontrol edebilirsiniz.
scroll() işlevini kullanma
Varsayılan olarak tarayıcı, müdahale işleyicisi görevini yerine getirdikten sonra kaydırma işlemini otomatik olarak gerçekleştirmeye çalışır. Kaydırma işlemini kendiniz yönetmek istiyorsanız scroll değerini "manual" olarak ayarlayın, ardından tarayıcı kaydırma konumunu ayarlamaya çalıştığında NavigateEvent.scroll() işlevini çağırın.
navigation.addEventListener("manual", event => {
scroll: "manual",
event.intercept({
async handler() {
doSyncStuff();
// Handle scrolling earlier than by default:
event.scroll();
await doAsyncStuff();
}
});
});
restoreScroll() yöntemi hâlâ kullanılabilir ancak desteği sonlandırılmış olup Chrome 108'de kaldırılacaktır.
Sonuç
Navigation API ile ilgili makalemizi yakında güncellemeyi umuyoruz. Bu sırada, bu API'nin spesifikasyonu özellikle web geliştiricileri için çok sayıda bilgi içerir.