このページは Cloud Translation API によって翻訳されました。

Chrome 124 の新機能

Pete LePage

Chrome 124 の主な機能は次のとおりです。

宣言型 Shadow DOM を JavaScript から使用できるようにする 2 つの新しい API があります。
Web ソケットでストリームを使用できます。
ビューの遷移が少し改善されました。
他にも多数の機能があります。

詳細については、Chrome 124 リリースノートをご覧ください。

JavaScript で宣言型 Shadow DOM を使用する

JavaScript から宣言型 Shadow DOM を使用できるようにする 2 つの新しい API があります。

setHTMLUnsafe() は innerHTML に似ており、要素の内部 HTML を指定された文字列に設定できます。これは、次のような宣言型 Shadow DOM を含む HTML がある場合に便利です。

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

innerHTML のみを使用すると、ブラウザはそれを正しく解析せず、Shadow DOM も存在しません。ただし、setHTMLUnsafe() を使用すると、Shadow DOM が作成され、要素が想定どおりに解析されます。

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

もう一方の API は parseHTMLUnsafe() で、DOMParser.parseFromString() と同様に機能します。

これらの API はどちらも安全ではありません。つまり、入力のサニタイズは行われません。そのため、与える食べ物が安全であることを確認する必要があります。今後のリリースでは、入力の消毒を行うバージョンが提供される予定です。

なお、これらの API は、最新バージョンの Firefox と Safari ですでにサポートされています。

WebSocket Stream API

WebSocket は、ポーリングに依存することなく、ユーザーのブラウザとサーバーの間でデータをやり取りするのに適しています。これは、情報が届き次第処理する必要があるチャットアプリなどに適しています。

ただし、処理できるよりも速くデータが到着した場合はどうすればよいでしょうか。

これはバックプレッシャーと呼ばれ、深刻な問題を引き起こす可能性があります。残念ながら、WebSocket API にはバックプレッシャーに対処する適切な方法がありません。

WebSocket Stream API を使用すると、ストリームとウェブソケットの機能を利用できます。つまり、追加費用なしでバックプレッシャーを適用できます。

まず、新しい WebSocketStream を作成して、WebSocket サーバー URL を渡します。

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);
}

次に、接続が開くのを待ちます。これにより、ReadableStream と WritableStream が生成されます。ReadableStream.getReader() メソッドを呼び出すと ReadableStreamDefaultReader が取得され、ストリームが完了するまでそこからデータを read() できます。

データを書き込むには、WritableStream.getWriter() メソッドを呼び出します。これにより WritableStreamDefaultWriter が取得され、write() データに書き込むことができます。

ビューの遷移の改善

ビューの遷移機能は非常に便利です。Chrome 124 には、ビューの遷移を簡単に行うための 2 つの新機能が追加されています。

ナビゲーションによってドキュメントが新しいドキュメントに置き換えられるときに、ドキュメントのウィンドウオブジェクトで pageswap イベントがトリガーされます。

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

ドキュメントのレンダリングブロッキング: 重要なコンテンツが解析されるまでドキュメントのレンダリングをブロックし、すべてのブラウザで First Paint を一定に保つことができます。

その他

もちろん、他にもたくさんあります。

disallowReturnToOpener ユーザーが開いたタブに戻れるようにするボタンをピクチャーインピクチャーウィンドウに表示しないことをブラウザにヒントします。
キーボードでフォーカス可能なスクロールコンテナ: シーケンシャルフォーカスナビゲーションを使ってスクロールコンテナをフォーカス可能にすることで、アクセシビリティが向上します。
また、ユニバーサルインストールでは、現在の PWA の基準を満たしていないページでも、ユーザーが任意のページをインストールできます。

Chrome 124 の新機能

JavaScript で宣言型 Shadow DOM を使用する

WebSocket Stream API

ビューの遷移の改善

その他

関連情報

登録