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, sonradan 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 kaydedildikten ve kaydırma konumları gibi şeyler yakalandıktan sonra her zaman çalışır. Böylece transitionWhile() ile ilgili sorunlardan kaçınılı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 tarafı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 işlenir. Ancak başka bir "sayfadaki" sabit sayfaya gitmek (/a - /b#id), tek sayfalık uygulamalar için 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.