Halaman ini diterjemahkan oleh Cloud Translation API.

Baru di Chrome 97

Pete LePage

Berikut hal yang perlu Anda ketahui:

WebTransport adalah opsi baru untuk mengirim pesan real time antara klien dan server.
Anda dapat menggunakan deteksi fitur untuk melihat jenis skrip yang didukung browser.
Menelusuri array dari akhir menjadi sedikit lebih mudah.
Dan masih banyak lagi.

Selamat Tahun Baru! Saya Pete LePage. Mari selami dan lihat apa yang baru untuk pengembang di Chrome 97.

Transportasi Web

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 berlatensi rendah, dua arah, dan server klien.

Web Transport API memiliki latensi lebih rendah daripada WebSockets. Tidak seperti RTC Data Channel API, yang dirancang untuk pengiriman pesan peer-to-peer, Web Transport API dirancang khusus untuk pengiriman pesan ke server klien.

Library ini mendukung pengiriman data, andal dengan API alirannya, dan tidak dapat diandalkan dengan API datagram-nya. Didukung dalam pekerja web. Selain itu, karena mengekspos antarmuka yang sesuai dengan Stream, juga mendukung pengoptimalan untuk mengatasi tekanan balik.

Untuk menggunakannya, Anda memerlukan server yang mendukung HTTP/3, yang umumnya lebih mudah daripada menyiapkan dan memelihara server WebRTC. Buka instance WebTransport baru, tunggu hingga terhubung, dan 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);

Lihat artikel Bereksperimen dengan WebTransport di web.dev untuk mengetahui detail selengkapnya.

Deteksi fitur jenis skrip

Sekarang, kita dapat menggunakan atribut nomodule untuk mendeteksi dukungan bagi modul JavaScript di browser. Namun, ada beberapa proposal fitur baru dalam pipeline, seperti peta impor, aturan spekulasi, dan pramuat paket. Kita memerlukan cara untuk mengetahui apa yang didukung oleh {i>browser<i}.

Masukkan HTMLScriptElement.supports(). Anda dapat menggunakannya untuk menentukan jenis skrip yang dapat digunakan, dan mengirimkan 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 suka ketika JavaScript semakin mudah. Array dan TypedArray sekarang mendukung metode statis findLast() dan findLastIndex().

Fungsi ini pada dasarnya sama dengan find() dan findIndex(), tetapi menelusuri dari akhir array, bukan dari 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 memulai.

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

Emulasikan Chrome 100 di string UA

Hanya dalam beberapa bulan, kami akan mencapai Chrome 100, nomor versi tiga digit. 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 tanda Chrome yang menandai opsi #force-major-version-to-100 baru

Dan banyak lagi!

Tentu saja masih banyak lagi.

Baris baru dalam entri formulir kini dinormalisasi 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 petunjuk ini yang sudah ada, tetapi Anda harus merencanakan penghentian dan penghapusan akhirnya.

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

Bacaan lebih lanjut

Artikel ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan pada Chrome 97.

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

Saya Pete LePage, dan segera setelah Chrome 98 dirilis, saya akan ada di sini untuk memberi tahu Anda apa yang baru di Chrome!