Baru di Chrome 124

Pete LePage

Berikut adalah sorotan di Chrome 124:

Ingin mendapatkan hasil maksimal? Lihat Catatan Rilis Chrome 124.

Menggunakan shadow DOM deklaratif di JavaScript

Ada dua API baru yang memungkinkan shadow DOM deklaratif digunakan dari JavaScript.

setHTMLUnsafe() mirip dengan innerHTML, dan memungkinkan Anda menetapkan HTML bagian dalam elemen ke string yang disediakan. Hal ini membantu jika Anda memiliki beberapa HTML yang menyertakan shadow DOM deklaratif, seperti ini.

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

Jika Anda hanya menggunakan innerHTML, browser tidak akan mengurainya dengan benar, dan tidak ada shadow DOM. Namun, dengan setHTMLUnsafe(), shadow DOM Anda akan dibuat, dan elemen diurai seperti yang Anda harapkan.

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

API lainnya adalah parseHTMLUnsafe(), dan berfungsi mirip dengan DOMParser.parseFromString().

Kedua API ini tidak aman, yang berarti API tersebut tidak melakukan pembersihan input. Jadi, Anda harus memastikan bahwa apa pun yang Anda berikan kepada mereka aman. Dalam rilis mendatang, kami memperkirakan akan ada versi yang menyediakan sanitasi input.

Terakhir, kedua API ini sudah didukung di Firefox dan Safari versi terbaru.

WebSocket Stream API

WebSocket adalah cara yang bagus untuk mengirim data bolak-balik antara browser pengguna dan server tanpa harus mengandalkan polling. Hal ini sangat cocok untuk hal-hal seperti aplikasi chat, tempat Anda ingin menangani informasi segera setelah datang.

Namun, bagaimana jika data tiba lebih cepat dari yang dapat Anda tangani?

Hal ini disebut tekanan balik, dan dapat menyebabkan beberapa masalah serius bagi Anda. Sayangnya, WebSocket API tidak memiliki cara yang baik untuk menangani tekanan balik.

WebSocket Stream API memberi Anda kemampuan streaming dan web socket, yang berarti tekanan balik dapat diterapkan tanpa biaya tambahan.

Mulai dengan membuat WebSocketStream baru dan meneruskan URL server WebSocket.

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

Selanjutnya, Anda menunggu koneksi dibuka, yang menghasilkan ReadableStream dan WritableStream. Dengan memanggil metode ReadableStream.getReader(), Anda akan mendapatkan ReadableStreamDefaultReader yang datanya dapat Anda read() hingga streaming selesai.

Untuk menulis data, panggil metode WritableStream.getWriter(), yang memberi Anda WritableStreamDefaultWriter, yang kemudian dapat Anda write() data.

Melihat peningkatan transisi

Saya sangat menyukai fitur View Transitions, dan ada dua fitur baru di Chrome 124 yang didesain untuk mempermudah transisi tampilan.

Peristiwa pageswap diaktifkan pada objek jendela dokumen saat navigasi akan mengganti dokumen dengan dokumen baru.

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

Dan pemblokiran rendering dokumen yang memungkinkan Anda memblokir rendering dokumen hingga konten penting telah diuraikan, sehingga memastikan proses rendering pertama yang konsisten di semua browser.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • disallowReturnToOpener memberi petunjuk kepada browser bahwa browser tidak boleh menampilkan tombol di jendela gambar dalam gambar yang memungkinkan pengguna kembali ke tab pembuka.

  • Penampung scroll yang dapat difokuskan keyboard meningkatkan aksesibilitas dengan membuat penampung scroll yang dapat difokuskan menggunakan navigasi fokus berurutan.

  • Selain itu, penginstalan universal memungkinkan pengguna menginstal halaman apa pun, bahkan halaman yang tidak memenuhi kriteria PWA saat ini.

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Periksa link berikut untuk mengetahui perubahan tambahan di Chrome 124.

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 125 dirilis, kami akan ada di sini untuk memberi tahu Anda apa yang baru di Chrome!