Chrome 107'deki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

• Ekran paylaşım deneyimlerini iyileştirmek için Ekran Yakalama API'sinde yeni özellikler bulunmaktadır.
• Artık sayfanızdaki bir kaynağın oluşturmayı engelleyen bir durum olup olmadığını kesin olarak belirleyebilirsiniz.

• Kaynak denemesinde bildirim temelli PendingBeacon API ile bir arka uç sunucusuna veri göndermenin yeni bir yolu vardır. Ve çok daha fazlası.

• Daha fazlası da var.

Ben Adriana Jara. Şimdi Chrome 107'deki geliştiriciler için yeni özellikleri birlikte görelim.

Screen Capture API'deki yeni mülkler

Bu sürümde Ekran Yakalama API'si, ekran paylaşımı deneyimlerini iyileştirmek için yeni özellikler ekler.

DisplayMediaStreamOptions, selfBrowserSurface özelliğini ekledi. Bu ipucu sayesinde uygulama, getDisplayMedia() çağırırken geçerli sekmenin hariç tutulması gerektiğini tarayıcıya söyleyebilir.

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

Fotoğrafın yanlışlıkla çekilmesini önlemeye yardımcı olur ve video konferanslarda gördüğümüz "Hall of Mirrors" efektini önler.

DisplayMediaStreamOptionsartık surfaceSwitching özelliğine de sahip. Bu özellik, Chrome'un ekran paylaşımı sırasında sekmeler arasında geçiş yapmak için bir düğme gösterip göstermeyeceğini programatik olarak kontrol etme seçeneği ekler. Bu seçenekler getDisplayMedia() adlı kuruluşa iletilecek. Share this tab instead düğmesi, kullanıcıların video konferans sekmesine dönmeden veya uzun bir sekme listesinden seçim yapmadan yeni bir sekmeye geçmesine olanak tanır. Ancak web uygulamasının işlemediği durumlar için davranış 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 özelliğini ekler. getDisplayMedia() çağrıldığında, tarayıcı kullanıcıya görüntüleme yüzeyi seçenekleri sunar: sekmeler, pencereler veya monitörler. Web uygulaması, displaySurface kısıtlamasını kullanarak yüzey türlerinden birinin daha belirgin bir şekilde sunulmasını tercih ederse artık tarayıcıya ipucu verebilir.

Örneğin, tek bir sekmeyi paylaşmak varsayılan ayar olabileceği için bu durum yanlışlıkla aşırı paylaşımı önlemeye yardımcı olabilir.

Oluşturmayı engelleyen kaynakları belirleme

Bir sayfanın performansıyla ilgili güvenilir bilgiler, geliştiricilerin hızlı kullanıcı deneyimleri oluşturması açısından son derece önemlidir. Şimdiye kadar geliştiriciler, bir kaynağın engellenip engellenmediğini belirlemek için karmaşık buluşsal yöntemlerden yararlanıyordu.

Performans API'si artık indirilene kadar sayfanızın görüntülenmesini engelleyen kaynakları tanımlayan, tarayıcıdan gelen doğrudan bir sinyal sağlayan createblockStatus özelliğini içerir.

Buradaki kod snippet'i, tüm kaynaklarınızın listesini nasıl alacağınızı ve oluşturma engelleme özelliğinin etkin olduğu tüm kaynakları listelemek için yeni createBlockStatus özelliğini nasıl kullanacağınızı gösterir.

// 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 Önemli Web Verileri'ne yardımcı olur ve daha iyi bir kullanıcı deneyimi sağlar. Performance API hakkında daha fazla bilgi edinmek için MDN dokümanlarına göz atın, oluşturma engelleyen kaynakları arayın ve optimizasyon yapın.

PendingBeacon API kaynak denemesi

Bildirim temelli PendingBeacon API, tarayıcının işaretçilerin ne zaman gönderileceğini kontrol etmesini sağlar.

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

Uygulamalar genellikle bu işaretçileri kullanıcı ziyaretinin sonunda göndermek ister, ancak bu "gönderme" çağrısının yapılması için uygun bir zaman yoktur. Bu API, gönderme yetkisini tarayıcının kendisine verir. Böylece, geliştiricinin gönderme çağrılarını tam olarak doğru zamanlarda uygulaması gerekmeden page unload veya page hide üzerinde işaretçileri destekleyebilir.

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

Diğer ölçütler

Elbette dahası da var.

• expect-ct http başlığı kullanımdan kaldırılmıştır.
• rel özelliği artık <form> öğelerinde desteklenmektedir.
• En son grid-template interpolasyonundan bahsetmiştim. Bu seferki de dahil edilmelidir.

Daha fazla bilgi

Bu bölümde yalnızca bazı önemli noktalar ele alınmıştır. Chrome 107'deki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

• Chrome Geliştirici Araçları'ndaki yenilikler (107)
• Chrome 107 için kullanımdan kaldırma ve kaldırma işlemleri
• Chrome 107 için ChromeStatus.com güncellemeleri
• Chromium kaynak deposu değişiklik listesi
• Chrome sürüm takvimi

Abone ol

Gelişmelerden haberdar olmak için Chrome Geliştiricileri YouTube kanalına abone olun. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.

Ben Adriana Jara. Chrome 108 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım!