Baru di Chrome 107

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Saya Adriana Jara. Mari selami dan lihat apa yang baru untuk pengembang di Chrome 107.

Properti baru di Screen Capture API

Pada versi ini, Screen Capture API menambahkan properti baru untuk meningkatkan pengalaman berbagi layar.

DisplayMediaStreamOptions menambahkan properti selfBrowserSurface. Dengan petunjuk ini, aplikasi dapat memberi tahu browser bahwa saat memanggil getDisplayMedia(), tab saat ini harus dikecualikan.

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

Fitur ini membantu mencegah pengambilan gambar diri yang tidak disengaja dan menghindari efek "Aula Cermin" yang telah kita lihat di konferensi video.

DisplayMediaStreamOptionskini juga memiliki properti surfaceSwitching. Properti ini menambahkan opsi untuk mengontrol secara terprogram apakah Chrome menampilkan tombol untuk beralih tab saat berbagi layar. Opsi ini akan diteruskan ke getDisplayMedia(). Tombol Share this tab instead memungkinkan pengguna beralih ke tab baru tanpa kembali ke tab konferensi video atau memilih dari daftar tab yang panjang, tetapi perilakunya akan diekspos secara bersyarat jika aplikasi web tidak menanganinya.

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

Selain itu, MediaTrackConstraintSet juga menambahkan properti displaySurface. Saat getDisplayMedia() dipanggil, browser akan menawarkan pilihan platform tampilan: tab, jendela, atau monitor kepada pengguna. Dengan menggunakan batasan displaySurface, aplikasi web kini dapat memberikan petunjuk ke browser jika lebih memilih salah satu jenis platform untuk ditawarkan dengan lebih jelas.

Misalnya, setelan ini dapat membantu mencegah pembagian berlebihan secara tidak sengaja karena membagikan satu tab dapat menjadi setelan default. Screenshot perintah pemilih media lama dan baru.

Mengidentifikasi sumber daya yang memblokir render

Insight yang andal tentang performa halaman sangat penting bagi developer untuk membangun pengalaman pengguna yang cepat. Sejauh ini, developer mengandalkan heuristik yang kompleks untuk menentukan apakah resource merupakan pemblokiran render atau tidak.

Sekarang Performance API menyertakan properti renderBlockingStatus yang memberikan sinyal langsung dari browser yang mengidentifikasi resource yang mencegah halaman ditampilkan, hingga didownload.

Cuplikan kode di sini menunjukkan cara mendapatkan daftar semua sumber daya Anda dan menggunakan properti renderBlockingStatus yang baru untuk mencantumkan semua sumber daya yang memblokir perenderan.

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

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

Mengoptimalkan cara Anda memuat resource akan membantu Data Web Inti dan dalam memberikan pengalaman pengguna yang lebih baik, lihat dokumentasi MDN untuk mempelajari Performance API lebih lanjut, cari resource yang memblokir rendering tersebut, dan optimalkan.

Uji coba origin PendingBeacon API

PendingBeacon API deklaratif memungkinkan browser mengontrol kapan beacon dikirim.

Suar adalah paket data yang dikirim ke server backend, tanpa mengharapkan respons tertentu.

Aplikasi sering kali ingin mengirim beacon ini di akhir kunjungan pengguna, tetapi tidak ada waktu yang tepat untuk melakukan panggilan "kirim" tersebut. API ini mendelegasikan pengiriman ke browser itu sendiri, sehingga dapat mendukung beacon pada page unload atau page hide, tanpa harus menerapkan panggilan kirim pada waktu yang tepat.

Daftar ke uji coba origin, cobalah API, dan kirimkan masukan kepada kami untuk meningkatkan kualitas kasus penggunaan.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Header http expect-ct tidak digunakan lagi.
  • Atribut rel kini didukung pada elemen <form>.
  • Terakhir kali saya menyebutkan grid-template interpolasi, kali ini harus disertakan.

Bacaan lebih lanjut

Bagian ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan di Chrome 107.

Langganan

Untuk terus mengikuti info terbaru, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Adriana Jara, dan segera setelah Chrome 108 dirilis, saya akan ada di sini untuk memberi tahu Anda apa yang baru di Chrome!