Baru di Chrome 124

Pete LePage

Berikut beberapa fitur penting di Chrome 124:

Ingin ringkasan lengkapnya? 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 dalam elemen ke string yang disediakan. Hal ini akan membantu jika Anda memiliki 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 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 keduanya tidak melakukan sanitasi input apa pun. Jadi, pastikan bahwa apa pun yang Anda berikan kepada anak Anda aman. Dalam rilis mendatang, kami memperkirakan akan melihat versi yang menyediakan sanitasi input.

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

API Streaming WebSocket

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

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

Ini disebut tekanan punggung, dan dapat menyebabkan Anda sakit kepala. Sayangnya, WebSocket API tidak memiliki cara yang baik untuk menangani tekanan balik.

WebSocket Stream API memberikan kekuatan aliran data dan soket web, yang berarti tekanan balik dapat diterapkan tanpa biaya tambahan.

Mulailah dengan membuat WebSocketStream baru dan meneruskan URL server WebSocket ke sini.

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, tunggu koneksi terbuka, yang menghasilkan ReadableStream dan WritableStream. Dengan memanggil metode ReadableStream.getReader(), Anda akan mendapatkan ReadableStreamDefaultReader yang kemudian dapat Anda gunakan untuk melakukan read() data hingga streaming selesai.

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

Lihat peningkatan transisi

Saya sangat antusias dengan fitur View Transitions, dan ada dua fitur baru di Chrome 124 yang dirancang 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 render dokumen yang memungkinkan Anda memblokir rendering dokumen hingga konten penting telah diuraikan, memastikan paint 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 picture-in-picture yang memungkinkan pengguna kembali ke tab pembuka.

  • Penampung scroll yang dapat difokuskan keyboard meningkatkan aksesibilitas dengan membuat penampung scroll 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 mencakup beberapa sorotan utama. Periksa link berikut untuk melihat perubahan tambahan di Chrome 124.

Langganan

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

Saya Pete LePage, dan segera setelah Chrome 125 dirilis, kami akan berada di sini untuk memberi tahu Anda apa yang baru di Chrome!