Chrome 105, pratikte sorunlu olduğu kanıtlanan yöntemleri iyileştirmek için Navigation API'nin NavigateEvent bölümünde (102'de kullanıma sunulmuştur) iki yeni yöntem sunar. Geliştiricilerin gezinme sırasında durumu kontrol etmelerine olanak tanıyan intercept(), kullanımı zor olan transitionWhile() ürününün yerini almıştır. URL'de belirtilen bir bağlayıcıya kaydıran scroll() yöntemi, tüm gezinme türlerinde çalışmayan restoreScroll() yönteminin yerini alır.
Bu makalede, her ikisinde de yaşanan 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ık uygulamalardaki istemci tarafı geçişlerde gezinmeyi engeller. İ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 vaattir.
Bu yaklaşım pratikte pek işe yaramadı. Şu yaygın kodlama kalıbına göz atın:
event.transitionWhile((async () => {
doSyncStuff();
await doAsyncStuff();
})());
Bu kod, işlevsel olarak aşağıdaki koda eşdeğerdir. Bu, gezinmenin bir kısmının, API'nin geliştiricinin gezinmeye müdahale etmeyi amaçladığının farkında olmadan çalışmasına neden olur.
doSyncStuff();
event.transitionWhile((async () => {
await doAsyncStuff();
})());
Bunun bir uygulamayı karmaşaya neden olabileceği bir örnek, kaydırma geri yükleme mantığıdır. Bu mantıkta uygulama, kaydırma konumlarını DOM değişikliğinden sonra değil, önce yakalar.
Neler değişti?
transitionWhile() yerine, mevcut spesifikasyonda NavigateEvent.intercept() kullanıma sunuluyor. Yeni yöntem, transitionWhile() tarafından desteklenen focusReset ve scrollRestoration özelliklerine ek olarak bir işleyici alır. Yeni işleyici, gezinme kaydetme işleminden ve kaydırma konumları gibi şeyler yakalandıktan sonra her zaman çalışarak transitionWhile() ile ilgili sorunlardan kaçınır.
transitionWhile() yöntemi hâlâ kullanılabilir ancak desteği sonlandırılmış olup Chrome 108 sürümünde kaldırılacaktır.
intercept() işlevini kullanma
NavigateEvent.intercept(), transitionWhile() ile aynı kısıtlamalara sahiptir çünkü tüm gezinme etkinliklerinde çağrılamaz. Kaynaklar arası gezinmelere ve belgeler arası geçişlere müdahale edilemez. Bu, "SecurityError" türünde bir DOMException oluşturur.
intercept() özelliğini kullanmak için, çağırırken özel işleyicinizi iletmeniz yeterlidir.
navigation.addEventListener("navigate", event => {
event.intercept({
async handler() {
doSyncStuff();
await doAsyncStuff();
}
});
});
NavigateEvent.scroll()
Sayfanın üst kısmından bir sabit sayfaya (/a konumundan /a#id konumuna taşınması gibi) gezinme gibi bir gezinme, tek sayfalık bir uygulamada bile tarayıcı tarafından tamamen gerçekleştirilir. Ancak çok sayfalı uygulamalar için basit olan başka bir "sayfadaki" (/a - /b#id) sabit sayfaya gitmek, tek sayfalık uygulamalarda daha karmaşıktır. Uygulamanın NavigateEvent.transitionWhile() kullanarak /b#id navigasyonuna müdahale etmesi, ardından sabiti ekrana getirmek için NavigateEvent.restoreScroll() çağrısı yapması gerekir. Yukarıda belirtildiği gibi, şu an için bunu yapmak zordur.
Neler değişti?
Tek sayfalık uygulamalarda, artık tarayıcının bir sabit sayfaya kaydırma işlemini yapıp yapmayacağını veya kodunuzun yapıp yapmayacağını kontrol edebilirsiniz.
Scroll() kullanma
Varsayılan olarak, kesme işleyicisi yerine getirildiğinde tarayıcı kaydırma işlemini otomatik olarak gerçekleştirmeye çalışır. Kaydırma işlemini kendiniz gerçekleştirmek istiyorsanız scroll öğesini "manual" olarak ayarlayın, ardından tarayıcının kaydırma konumunu ayarlamaya çalışması gerektiğinde NavigateEvent.scroll() yöntemini ç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 sürümünde kaldırılacaktır.
Sonuç
Gezinme API'si hakkındaki makalemizi yakında güncellemeyi umuyoruz. Bu arada, bu API'nin spesifikasyonu özellikle web geliştiricilere yönelik çok fazla bilgi içermektedir.