Chrome 107'deki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

• Ekran paylaşımı deneyimlerini iyileştirmek için Screen Capture API'de yeni özellikler bulunmaktadır.
• Artık sayfanızdaki bir kaynağın oluşturmayı engelleyip engellemediğini tam olarak belirleyebilirsiniz.

• Kaynak deneme sürümünde, beyan niteliğinde PendingBeacon API ile arka uç sunucuya veri göndermenin yeni bir yolu vardır. Bunun gibi daha birçok özellik var.

• Bunun gibi çok daha fazla özellik var.

Adım Adriana Jara. Chrome 107'de geliştiriciler için neler yeni olduğuna göz atalım.

Screen Capture API'deki yeni mülkler

Bu sürümde Screen Capture API, ekran paylaşımı deneyimlerini iyileştirmek için yeni özellikler ekler.

DisplayMediaStreamOptions, selfBrowserSurface mülkünü ekledi. Bu ipucu sayesinde uygulama, tarayıcıya getDisplayMedia() çağrısı yapılırken mevcut sekmenin hariç tutulması gerektiğini söyleyebilir.

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

Bu sayede, yanlışlıkla kendi görüntünüzü yakalamayı ve video konferanslarda gördüğümüz "aynalı salon" efektini önleyebilirsiniz.

DisplayMediaStreamOptions artık surfaceSwitching mülküne de sahip. Bu mülk, Chrome'un ekran paylaşımı sırasında sekme değiştirme düğmesi gösterip göstermeyeceğini programatik olarak kontrol etme seçeneği ekler. Bu seçenekler getDisplayMedia()'e iletilir. Share this tab instead düğmesi, kullanıcıların video konferans sekmesine geri dönmeden veya uzun bir sekme listesinden seçim yapmadan yeni bir sekmeye geçmesine olanak tanır. Ancak bu davranış, web uygulaması tarafından işlenmemesi durumunda koşullu olarak gösterilir.

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

Ayrıca MediaTrackConstraintSet, displaySurface mülkünü de ekler. getDisplayMedia() çağrıldığında tarayıcı kullanıcıya ekran yüzeyi seçeneği sunar: sekmeler, pencereler veya monitörler. displaySurface kısıtlamasını kullanarak web uygulaması artık tarayıcıya, platform türlerinden birinin daha belirgin şekilde sunulmasını tercih edip etmediğini bildirebilir.

Örneğin, varsayılan olarak tek bir sekme paylaşılabileceğinden yanlışlıkla aşırı paylaşım yapılmasını önlemeye yardımcı olabilir.

Oluşturmayı engelleyen kaynakları belirleme

Bir sayfanın performansıyla ilgili güvenilir analizler, geliştiricilerin hızlı kullanıcı deneyimleri oluşturması için çok önemlidir. Geliştiriciler, bir kaynağın oluşturmayı engelleyip engellemediğini belirlemek için bugüne kadar karmaşık sezgisel yöntemlere güveniyordu.

Performans API artık, sayfanızı görüntülemeyi engelleyen kaynakları indirilene kadar tanımlayan, tarayıcıdan doğrudan sinyal sağlayan renderBlockingStatus mülkünü içeriyor.

Buradaki kod snippet'inde, tüm kaynaklarınızın listesinin nasıl alınacağı ve oluşturmayı engelleyen tüm kaynakları listelemek için yeni renderBlockingStatus mülkünün nasıl kullanılacağı gösterilmektedir.

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

Kaynaklarınızı yükleme şeklinizi optimize etmek, Core Web Vitals'ın iyileştirilmesine ve daha iyi bir kullanıcı deneyimi sunulmasına yardımcı olur. Performance API hakkında daha fazla bilgi edinmek için MDN dokümanlarına göz atın, oluşturmayı engelleyen kaynakları bulun ve optimize edin.

PendingBeacon API kaynak denemesi

Beyanla çalışan PendingBeacon API, tarayıcıya işaretçilerin ne zaman gönderileceğini kontrol etme olanağı tanır.

İşaretçi, belirli bir yanıt beklenmeden arka uç sunucuya gönderilen bir veri paketidir.

Uygulamalar genellikle bu işaretçileri kullanıcının ziyaretinin sonunda göndermek ister ancak bu "gönder" çağrısının yapılması için uygun bir zaman yoktur. Bu API, gönderme işlemini tarayıcıya delege eder. Böylece geliştiricinin gönderme çağrılarını tam olarak doğru zamanlarda uygulamak zorunda kalmadan page unload veya page hide'te işaretçileri destekleyebilir.

Kaynak denemesine kaydolun, API'yi deneyin ve kullanım alanlarını iyileştirmek için lütfen geri bildirim gönderin.

Diğer özellikler

Elbette daha birçok seçenek var.

• expect-ct http başlığının desteği sonlandırıldı.
• rel özelliği artık <form> öğelerinde desteklenmektedir.
• Geçen sefer grid-template ara değer hakkında bahsetmiştim. Bu sefer bu dahil edilmelidir.

Daha fazla bilgi

Bu, yalnızca bazı önemli noktaları kapsar. Chrome 107'deki diğer değişiklikler için aşağıdaki bağlantılara göz atın.

• Chrome Geliştirici Araçları'nda (107) yenilikler
• Chrome 107'de desteği sonlandırılan ve kaldırılan özellikler
• ChromeStatus.com'un Chrome 107 ile ilgili güncellemeleri
• Chromium kaynak deposu değişiklik listesi
• Chrome sürüm takvimi

Abone ol

Gelişmelerden haberdar olmak için Chrome Developers YouTube kanalına abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Adım Adriana Jara. Chrome 108 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğim.