Baru di Chrome 107

Adriana Jara

Berikut ini hal yang perlu Anda ketahui:

Saya Adriana Jara. Mari kita pelajari dan lihat yang baru untuk developer di Chrome 107.

Properti baru di Screen Capture API

Dalam 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 “Hall of Mirrors” yang telah kita lihat dalam konferensi video.

DisplayMediaStreamOptions kini 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 kegetDisplayMedia(). 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 perilaku ini ditampilkan 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);

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

Misalnya, fitur ini dapat membantu mencegah berbagi berlebihan secara tidak sengaja karena berbagi satu tab dapat menjadi default. Screenshot dialog pemilih media lama dan baru.

Mengidentifikasi resource yang memblokir rendering

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 suatu resource memblokir rendering atau tidak.

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

Cuplikan kode di sini menunjukkan cara mendapatkan daftar semua resource dan menggunakan properti renderBlockingStatus baru untuk mencantumkan semua resource yang memblokir rendering.

// 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 Core Web Vitals dan memberikan pengalaman pengguna yang lebih baik. Lihat dokumentasi MDN untuk mempelajari lebih lanjut Performance API, cari resource yang memblokir render, dan optimalkan.

Uji coba origin PendingBeacon API

PendingBeacon API deklaratif memungkinkan browser mengontrol kapan beacon dikirim.

Beacon 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 di page unload atau di page hide, tanpa developer harus menerapkan panggilan kirim pada waktu yang tepat.

Daftar untuk uji coba origin, coba 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 di elemen <form>.
  • Terakhir kali saya menyebutkan interpolasi grid-template, kali ini interpolasi tersebut harus disertakan.

Bacaan lebih lanjut

Ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk mengetahui perubahan tambahan di Chrome 107.

Langganan

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

Saya Adriana Jara, dan begitu Chrome 108 dirilis, saya akan segera memberi tahu Anda apa saja yang baru di Chrome.