Baru di Chrome 97

Pete LePage

Berikut hal yang perlu Anda ketahui:

Selamat Tahun Baru! Saya Pete LePage. Mari kita pelajari dan lihat yang baru untuk developer di Chrome 97.

Web Transport

Jika Anda menggunakan Web Sockets atau WebRTC Data Channel API untuk mengirim pesan antara server dan halaman, ada opsi baru untuk Anda. WebTransport adalah API baru yang menawarkan pesan klien-server dua arah dengan latensi rendah.

Web Transport API memiliki latensi yang lebih rendah daripada WebSocket, dan tidak seperti RTC Data Channel API, yang dirancang untuk pesan peer-to-peer, Web Transport API dirancang khusus untuk pesan klien-server.

API ini mendukung pengiriman data, dengan andal menggunakan API streaming, dan tidak andal menggunakan API datagram. Fitur ini didukung di pekerja web. Selain itu, karena mengekspos antarmuka yang mematuhi Streams, API ini mendukung pengoptimalan seputar backpressure.

Untuk menggunakannya, Anda memerlukan server yang mendukung HTTP/3, yang umumnya lebih mudah daripada menyiapkan dan mengelola server WebRTC. Buka instance WebTransport baru, tunggu hingga terhubung, lalu Anda dapat mulai mengirim data.

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

Baca artikel Bereksperimen dengan WebTransport di web.dev untuk mengetahui detail lengkapnya.

Deteksi fitur jenis skrip

Saat ini, kita dapat menggunakan atribut nomodule untuk mendeteksi dukungan untuk modul JavaScript di browser. Namun, ada beberapa proposal fitur baru yang sedang dalam proses, seperti peta impor, aturan spekulasi, dan pramuat paket. Kita memerlukan cara untuk mengetahui apa yang didukung browser.

Masukkan HTMLScriptElement.supports(). Anda dapat menggunakannya untuk menentukan jenis skrip yang dapat digunakan, dan mengirim opsi terbaik ke browser.

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

Prototipe array baru

Saya senang saat JavaScript menjadi lebih mudah. Array dan TypedArray kini mendukung metode statis findLast() dan findLastIndex().

Fungsi ini pada dasarnya sama dengan find() dan findIndex(), tetapi melakukan penelusuran dari akhir array, bukan awal.

Misalnya, untuk menemukan angka terakhir dalam array yang lebih besar dari sepuluh, panggil findLast() dengan fungsi pengujian yang memeriksa apakah nilainya lebih besar dari sepuluh, dan Anda siap.

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

Mengemulasi Chrome 100 di string UA

Dalam beberapa bulan, kami akan mencapai Chrome 100, tiga digit nomor versi. Setiap kode yang memeriksa nomor versi, atau mengurai string UA, harus diperiksa untuk memastikan kode tersebut menangani tiga digit.

Ada flag bernama #force-major-version-to-100 yang akan mengubah nomor versi saat ini menjadi 100, sehingga Anda dapat memastikan semuanya berfungsi seperti yang diharapkan.

Halaman laporan Chrome menandai opsi #force-major-version-to-100 baru

Dan banyak lagi!

Tentu saja masih banyak lagi.

Baris baru dalam entri formulir kini diseragamkan dengan cara yang sama seperti Gecko dan WebKit, sehingga meningkatkan interoperabilitas antar-browser.

Kami menstandarkan nama petunjuk klien dengan mengawalinya dengan sec-ch. Misalnya, dpr menjadi sec-ch-dpr. Kami akan terus mendukung versi yang ada dari petunjuk ini, tetapi Anda harus merencanakan penghentian dan penghapusan akhirnya.

Elemen <details> tertutup kini dapat ditelusuri dan dapat ditautkan. Elemen tersembunyi ini akan otomatis diperluas saat navigasi temukan di halaman, ScrollToTextFragment, dan fragmen elemen digunakan.

Bacaan lebih lanjut

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

Langganan

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

Saya Pete LePage, dan segera setelah Chrome 98 dirilis, saya akan langsung memberi tahu Anda tentang yang baru di Chrome.