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

Chrome 97 の新機能

Pete LePage

必知事項は次のとおりです。

WebTransport は、クライアントとサーバー間でリアルタイムメッセージを送信するための新しいオプションです。
機能検出を使用すると、ブラウザでサポートされているスクリプトの種類を確認できます。
配列の末尾からの検索が少し簡単になります。
他にも多数の機能があります。

ハッピーニューイヤーPete LePage と申します。Chrome 97 のデベロッパー向けの新機能について詳しく見てみましょう。

Web Transport

Web Sockets または WebRTC Data Channel API を使用してサーバー間とページ間でメッセージを送信している場合は、新しいオプションがあります。WebTransport は、低レイテンシの双方向クライアント / サーバーメッセージングを提供する新しい API です。

WebSocket よりもレイテンシが低く、ピアツーピアメッセージング用に設計された RTC Data Channel API とは異なり、Web Transport API はクライアントサーバーメッセージング用に特別に設計されています。

データの送信をサポートしています。streams API では信頼性の高い送信を、datagram API では信頼性の低い送信をサポートしています。これはウェブワーカーでサポートされています。また、Streams 準拠のインターフェースを公開するため、バックプレッシャーに関する最適化をサポートしています。

使用するには、HTTP/3 をサポートするサーバーが必要です。これは、通常、WebRTC サーバーの設定とメンテナンスよりも簡単です。新しい WebTransport インスタンスを開き、接続を待ってから、データの送信を開始できます。

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

詳しくは、web.dev の WebTransport の試験運用に関する記事をご覧ください。

スクリプトタイプの特徴検出

現在、nomodule 属性を使用して、ブラウザでの JavaScript モジュールのサポートを検出できます。ただし、インポートマップ、推測ルール、バンドルのプリロードなど、新機能の提案がいくつかパイプラインにあります。ブラウザがサポートしている内容を確認する方法が必要です。

「HTMLScriptElement.supports()」と入力します。これを使用して、使用できるスクリプトの種類を判断し、最適なオプションをブラウザに送信できます。

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

新しい配列プロトタイプ

JavaScript が簡単になるのは嬉しいですね。Array と TypedArray が findLast() と findLastIndex() の静的メソッドをサポートするようになりました。

これらの関数は、find() や findIndex() と実質的に同じですが、先頭ではなく配列の末尾から検索します。

たとえば、配列内の 10 より大きい最後の数値を見つけるには、値が 10 より大きいかどうかを確認するテスト関数を指定して findLast() を呼び出します。

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

UA 文字列で Chrome 100 をエミュレートする

数か月後には、バージョン番号が 3 桁の Chrome 100 に到達する予定です。バージョン番号を確認するコードや UA 文字列を解析するコードは、3 桁を処理していることを確認する必要があります。

現在のバージョン番号を 100 に変更する #force-major-version-to-100 というフラグがあるため、すべてが想定どおりに動作することを確認できます。

新しい #force-major-version-to-100 オプションがハイライト表示された Chrome フラグページ

その他

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

フォーム入力の改行が Gecko や WebKit と同様に正規化されるようになり、ブラウザ間の相互運用性が向上しました。

クライアントヒント名の先頭に sec-ch を付加して、クライアントヒント名を標準化します。たとえば、dpr は sec-ch-dpr になります。これらのヒントの既存のバージョンは引き続きサポートされますが、最終的には非推奨になり、削除される予定です。

閉じられた <details> 要素を検索してリンクできるようになりました。これらの非表示要素は、ページ内検索、ScrollToTextFragment、要素フラグメントナビゲーションを使用すると自動的に展開されます。

Chrome 97 の新機能

Web Transport

スクリプト タイプの特徴検出

新しい配列プロトタイプ

UA 文字列で Chrome 100 をエミュレートする

その他

関連情報

登録

スクリプトタイプの特徴検出