Baru di Chrome 107

Adriana Jara

Berikut 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);

Hal ini membantu mencegah pengambilan gambar diri secara tidak sengaja dan menghindari efek “Hall of Mirrors” yang 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 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 perilaku tersebut 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);

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

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

Mengidentifikasi resource yang memblokir rendering

Insight yang andal tentang performa halaman sangat penting bagi developer untuk membuat pengalaman pengguna yang cepat. Sejauh ini, developer mengandalkan heuristik yang kompleks untuk menentukan apakah resource memblokir rendering atau tidak.

Sekarang Performance API menyertakan properti renderBlockingStatus yang memberikan sinyal langsung dari browser yang mengidentifikasi sumber daya yang mencegah laman Anda ditampilkan, hingga aset tersebut didownload.

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

// 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 Performance API lebih lanjut, cari resource yang memblokir rendering, lalu 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 page hide, tanpa developer harus mengimplementasikan panggilan kirim pada waktu yang tepat.

Daftar untuk uji coba origin, cobalah API, dan kirimkan masukan 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 jenis interpolasi grid-template, kali ini interpolasi harus disertakan.

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Lihat link di bawah untuk mengetahui perubahan tambahan di Chrome 107.

Langganan

Untuk terus 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 segera setelah Chrome 108 dirilis, saya akan langsung memberi tahu Anda tentang yang baru di Chrome.