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

Chrome 107 の新機能

Adriana Jara

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

画面共有のエクスペリエンスを向上させるため、Screen Capture API に新しいプロパティが追加されました。
ページ上のリソースがレンダリングブロックかどうかを正確に特定できるようになりました。
オリジントライアルで宣言型 PendingBeacon API を使用してバックエンドサーバーにデータを送信する新しい方法があります。他にもたくさんの機能があります。
他にもたくさんあります。

Adriana Jara です。Chrome 107 のデベロッパー向け新機能を見ていきましょう

Screen Capture API の新しいプロパティ

このバージョンでは、画面共有のエクスペリエンスを向上させる新しいプロパティが Screen Capture API に追加されました。

DisplayMediaStreamOptions が selfBrowserSurface プロパティを追加しました。このヒントにより、アプリケーションは getDisplayMedia() を呼び出すときに現在のタブを除外する必要があることをブラウザに伝えることができます。

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

これにより、偶発的なセルフキャプチャを防ぎ、ビデオ会議で見られた「鏡のホール」効果も回避できます。

DisplayMediaStreamOptions にも surfaceSwitching プロパティが追加されました。このプロパティを使用すると、画面共有中にタブを切り替えるボタンを Chrome に表示するかどうかをプログラムで制御するオプションが追加されます。これらのオプションは getDisplayMedia() に渡されます。Share this tab instead ボタンを使用すると、ユーザーはビデオ会議のタブに戻ったり、長いタブリストから選択したりすることなく、新しいタブに切り替えられますが、ウェブアプリケーションで処理できない場合の動作は条件付きで公開されます。

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

また、MediaTrackConstraintSet はプロパティ displaySurface を追加します。getDisplayMedia() が呼び出されると、ブラウザはユーザーにディスプレイサーフェス（タブ、ウィンドウ、モニター）の選択肢を提供します。displaySurface 制約を使用することで、ウェブアプリは、サーフェスタイプのいずれかを目立つように表示するかどうかをブラウザに伝えることができます。

たとえば、デフォルトで 1 つのタブを共有することになるため、誤って必要以上の共有を防止できます。新旧のメディア選択ツールのプロンプトのスクリーンショット。

レンダリングブロックリソースを特定する

ページのパフォーマンスに関する信頼性の高い分析情報は、デベロッパーにとって高速なユーザーエクスペリエンスを構築するうえで不可欠です。これまでのところ、リソースがレンダリングブロックかどうかを判断するのに複雑なヒューリスティックに依存してきました。

Performance API に renderblockStatus プロパティが追加されました。このプロパティは、ページがダウンロードされるまでページの表示を妨げているリソースを特定する、ブラウザからのダイレクトシグナルを提供します。

以下のコードスニペットは、すべてのリソースのリストを取得し、新しい renderBlockingStatus プロパティを使用して、レンダリングブロックとなっているリソースをすべて一覧表示する方法を示しています。

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

リソースの読み込み方法を最適化すると、Core Web Vitals が改善し、ユーザーエクスペリエンスが向上します。MDN のドキュメントを参照して、Performance API の詳細、レンダリングブロックリソースの確認、最適化を行ってください。

PendingBeacon API オリジントライアル

宣言型の PendingBeacon API を使用すると、ブラウザでビーコンを送信するタイミングを制御できます。

ビーコンとは、特定のレスポンスを期待せずにバックエンドサーバーに送信されるデータのバンドルです。

アプリケーションでは、ユーザーの訪問の最後にこれらのビーコンを送信したいことがよくありますが、そのような「send」呼び出しを行うタイミングはありません。この API は送信をブラウザ自体に委任するため、デベロッパーが適切なタイミングで送信呼び出しを実装しなくても、page unload または page hide のビーコンをサポートできます。

オリジントライアルに登録して API をお試しいただき、ユースケースを改善するためのフィードバックをお送りください。

など多数

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

expect-ct http ヘッダーは非推奨になりました。
rel 属性が <form> 要素でサポートされるようになりました。
前回 grid-template 補間について触れましたが、今回は含める必要があります。

Chrome 107 の新機能

Screen Capture API の新しいプロパティ

レンダリング ブロック リソースを特定する

PendingBeacon API オリジン トライアル

など多数

関連情報

登録

レンダリングブロックリソースを特定する

PendingBeacon API オリジントライアル