Chrome 105, pratikte sorun yaşadığı yöntemleri iyileştirmek için Navigation API'nin NavigateEvent özelliğinde (102 yılında kullanıma sunuldu) iki yeni yöntem sunar. Geliştiricilerin gezinme sonrasında durumu kontrol etmesine olanak tanıyan intercept(), kullanımı zor olan transitionWhile() ürününün yerini aldı. URL'de belirtilen bir bağlayıcıya giden scroll() yöntemi, tüm gezinme türlerinde çalışmayan restoreScroll() öğesinin yerini alır.
Bu makalede, her ikisiyle ilgili sorunları ve yeni yöntemlerin bu sorunları nasıl çözdüğünü açıklayacağım.
NavigateEvent.transitionWhile()
Chrome 102'de Navigation API ile kullanıma sunulan NavigateEvent.trasitionWhile() yöntemi, tek sayfalık uygulamalarda istemci tarafı geçişlerde gezinmeye müdahale eder. İ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 pratikte işe yaramadı. Şu yaygın kodlama kalıbını göz önünde bulundurun:
event.transitionWhile((async () => {
doSyncStuff();
await doAsyncStuff();
})());
Bu, işlevsel olarak aşağıdaki koda eşdeğerdir. API, geliştiricinin gezinmeye müdahale etmek istediğini anlamadan önce gezinmenin bir kısmının çalışmasına neden olur.
doSyncStuff();
event.transitionWhile((async () => {
await doAsyncStuff();
})());
Bu durumun bir uygulamayı bozabileceği durumlara örnek olarak kaydırma geri yükleme mantığı verilebilir.
Neler değişti?
transitionWhile() öğesinin yerini almak için mevcut spesifikasyonda NavigateEvent.intercept() kullanıma sunuldu. Yeni yöntem, transitionWhile() tarafından desteklenen focusReset ve scrollRestoration özelliklerine ek olarak bir işleyici alır. Yeni işleyici, gezinme kaydedildikten sonra her zaman çalışır ve kaydırma konumları gibi öğeler yakalanarak transitionWhile() ile ilgili sorunların önüne geçer.
transitionWhile() yöntemi hâlâ kullanılabilir, ancak kullanımdan kaldırılmıştır ve Chrome 108'de kaldırılacaktır.
Intercept() kullanma
NavigateEvent.intercept() öğesi tüm gezinme etkinliklerinde çağrılamayacağından transitionWhile() ile aynı kısıtlamalara sahiptir. Kaynaklar arası gezinmeler ve dokümanlar arası geçişler müdahale edilemez. Bunu yaparsanız "SecurityError" türünde bir DOMException döndürülür.
intercept() kullanmak için özel işleyicinizi çağırırken iletmeniz yeterlidir.
navigation.addEventListener("navigate", event => {
event.intercept({
async handler() {
doSyncStuff();
await doAsyncStuff();
}
});
});
NavigateEvent.scroll()
Sayfanın üst kısmından sabit öğeye gitme gibi bir gezinme (ör. /a konumundan /a#id konumuna geçiş olsun), tek sayfalık bir uygulamada bile tarayıcı tarafından tamamen işlenir. Ancak çok sayfalı uygulamalarda basit bir işlem olan başka bir "sayfada" (/a-/b#id) sabitlenmiş bir sayfaya gitmek tek sayfalık uygulamalar için daha karmaşıktır. Uygulama, NavigateEvent.transitionWhile() kullanarak /b#id gezinmesine müdahale etmeli, ardından anchor'ı görünüme getirmek için NavigateEvent.restoreScroll() yöntemini çağırmalıdır. Yukarıda belirtildiği gibi, bunu yapmak şu anda zor.
Neler değişti?
Tek sayfalık uygulamalarda, artık tarayıcının bir bağlayıcıya kaydırma yapıp yapmayacağını veya kodunuzun kod yazma işini yapıp yapmayacağını kontrol edebilirsiniz.
Scroll() kullanma
Varsayılan olarak, tarayıcı, müdahale işleyici yerine getirildikten sonra kaydırmayı otomatik olarak işlemeye çalışır. Kaydırma işlemini kendiniz yapmak istiyorsanız scroll öğesini "manual" değerine ayarlayın ve tarayıcının kaydırma konumunu ayarlamaya çalışması gerektiğinde 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 kullanımdan kaldırılmıştır ve Chrome 108'de kaldırılacaktır.
Sonuç
Yakında Gezinme API'sı ile ilgili makalemizi güncellemeyi umuyoruz. Bu sırada, bu API'nin spesifikasyonu web geliştiricileri için özel olarak hazırlanmış çok fazla bilgi içermektedir.