Baru di Chrome 124

Pete LePage

Berikut ini beberapa perubahan terpenting di Chrome 124:

Ingin mendapatkan hasil maksimal? Lihat Catatan Rilis Chrome 124.

Menggunakan shadow DOM deklaratif di JavaScript

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

setHTMLUnsafe() mirip dengan innerHTML, dan memungkinkan Anda menyetel HTML bagian dalam elemen ke {i>string <i}yang disediakan. Ini membantu ketika 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 ada tidak ada shadow DOM. Namun dengan setHTMLUnsafe(), shadow DOM Anda akan dibuat, dan diuraikan seperti yang Anda harapkan.

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

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

Kedua API ini tidak aman, yang berarti keduanya tidak melakukan input apa pun sanitasi. Jadi, Anda harus memastikan bahwa apa pun yang Anda beri makan mereka, aman. Dalam rilis mendatang, kami memperkirakan akan ada versi yang menyediakan layanan sanitasi input.

Akhirnya, kedua API ini sudah didukung dalam versi terbaru Firefox dan Safari!

WebSocket Stream API

WebSockets adalah cara yang bagus untuk mengirim data bolak-balik antara {i>browser<i} dan server tanpa harus mengandalkan polling. Ini bagus untuk hal-hal seperti aplikasi chat, tempat Anda ingin menangani informasi segera akan diperlukan.

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

Itu disebut tekanan balik, dan bisa menyebabkan Anda sakit kepala. Sayangnya, WebSocket API tidak memiliki cara yang baik untuk menangani tekanan tinggi.

WebSocket Stream API memberikan kekuatan {i>stream<i}, dan soket web, yang berarti tekanan balik dapat dapat diterapkan tanpa biaya tambahan.

Mulai dengan membuat WebSocketStream baru dan meneruskan URL elemen 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 di ReadableStream dan WritableStream. Dengan memanggil metode Metode ReadableStream.getReader(), Anda akan mendapatkan ReadableStreamDefaultReader tempat Anda dapat melakukan read() data hingga streaming selesai.

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

Melihat peningkatan transisi

Saya sangat senang dengan fitur View Transitions, dan ada dua fitur baru di Chrome 124 yang didesain untuk membuat transisi tampilan lebih mudah.

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 sampai konten kritis telah diuraikan, memastikan gambaran awal yang konsisten di semua browser.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • disallowReturnToOpener petunjuk ke browser bahwa browser tidak seharusnya menampilkan tombol di picture-in-picture yang memungkinkan pengguna untuk kembali ke tab pembuka.

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

  • Dan instal universal memungkinkan pengguna untuk menginstal laman apa pun, bahkan yang tidak memenuhi kriteria PWA saat ini.

Bacaan lebih lanjut

Artikel ini hanya mencakup beberapa sorotan utama. Periksa tautan berikut untuk perubahan tambahan di Chrome 124.

Langganan

Untuk mendapatkan info terbaru, berlangganan 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 segera memberi tahu Anda apa yang baru di Chrome!