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

Chrome 97 の新機能

Pete LePage

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

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

ハッピーニューイヤーピートルページです。Chrome 97 のデベロッパー向け新機能を見ていきましょう

ウェブトランスポート

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

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

ストリーム API を使用した信頼性の高いデータ送信と、データグラム 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 をエミュレートする

あと数か月で Chrome 100（3 桁のバージョン番号）に到達します。バージョン番号をチェックするコードや UA 文字列を解析するコードは、3 桁の数字を処理できるようにチェックする必要があります。

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

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

など多数

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

フォームのエントリ内の新しい行が Gecko や WebKit と同じ方法で正規化され、ブラウザ間の相互運用性が改善されました。

Client Hints の名前には接頭辞 sec-ch を付加して標準化しています。たとえば、dpr は sec-ch-dpr になります。これらのヒントの既存のバージョンは引き続きサポートされますが、最終的な非推奨と削除を計画する必要があります。

クローズされた <details> 要素が検索可能になり、リンクできるようになりました。これらの隠し要素は、「ページ内検索」、ScrollToTextFragment、要素フラグメントナビゲーションを使用すると自動的に展開されます。

Chrome 97 の新機能

ウェブ トランスポート

スクリプト タイプの機能検出

新しい配列プロトタイプ

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

など多数

関連情報

登録

ウェブトランスポート

スクリプトタイプの機能検出