Chrome 107'deki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Ben Adriana Jara. Chrome 107'de geliştiriciler için sunulan yeniliklere göz atalım.

Screen Capture API'deki yeni özellikler

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

DisplayMediaStreamOptions, selfBrowserSurface özelliğini ekledi. Bu ipucu sayesinde uygulama, tarayıcıya getDisplayMedia() çağrı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ü yakalamanız ve video konferanslarda gördüğümüz "aynalar salonu" efekti önlenir.

DisplayMediaStreamOptions artı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() öğesine 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 web uygulamasının bu davranışı işlememesi durumunda 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 ekran yüzeyleri (sekmeler, pencereler veya monitörler) arasından seçim yapma imkanı sunar. Web uygulaması, displaySurface kısıtlamasını kullanarak artık tarayıcıya yüzey türlerinden birinin daha belirgin şekilde sunulmasını tercih ettiğini belirtebilir.

Örneğin, tek bir sekmenin paylaşılması varsayılan ayar olabileceğinden yanlışlıkla aşırı paylaşım yapılmasını önlemeye yardımcı olabilir. Eski ve yeni medya seçme aracı istemlerinin ekran görüntüleri.

Oluşturmayı engelleyen kaynakları belirleme

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

Performance API artık renderBlockingStatus özelliğini içeriyor. Bu özellik, tarayıcıdan doğrudan bir sinyal sağlayarak sayfanızın indirilene kadar gösterilmesini engelleyen kaynakları tanımlıyor.

Buradaki kod snippet'i, tüm kaynaklarınızın listesini nasıl alacağınızı ve oluşturmayı engelleyen tüm kaynakları listelemek için yeni renderBlockingStatus ö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, Core Web Vitals'a ve daha iyi bir kullanıcı deneyimi sunmaya yardımcı olur. Performance API hakkında daha fazla bilgi edinmek için MDN belgelerine göz atın, oluşturmayı engelleyen kaynakları bulun ve optimize edin.

PendingBeacon API kaynak denemesi

Bildirim temelli PendingBeacon API, işaretçilerin ne zaman gönderileceğini tarayıcının kontrol etmesine olanak tanır.

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

Uygulamalar genellikle bu işaretçileri kullanıcının 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 işlemini tarayıcıya devrettiğinden, geliştiricinin tam olarak doğru zamanlarda gönderme çağrıları uygulamasına gerek kalmadan 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 lütfen bize geri bildirim gönderin.

Diğer özellikler

Elbette daha fazlası da var.

  • expect-ct http üstbilgisinin desteği sonlandırıldı.
  • rel özelliği artık <form> öğelerinde destekleniyor.
  • Geçen sefer grid-template enterpolasyonundan bahsetmiştim, bu sefer dahil edilmeli.

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.

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.

Ben Adriana Jara. Chrome 108 yayınlanır yayınlanmaz Chrome'daki yenilikleri anlatmak için burada olacağım.