Chrome 107 の新機能

Adriana Jara

次の説明をお読みください。

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 に renderBlockingStatus プロパティが追加されました。このプロパティは、ダウンロードされるまでページの表示を妨げるリソースを識別する直接的なシグナルをブラウザから提供します。

このコード スニペットは、すべてのリソースのリストを取得し、新しい 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 の改善とユーザー エクスペリエンスの向上につながります。Performance API の詳細については、MDN のドキュメントをご覧ください。レンダリングを妨げるリソースを探して最適化しましょう。

PendingBeacon API のオリジン トライアル

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

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

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

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

その他

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

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

関連情報

ここでは、主なハイライトのみを説明します。Chrome 107 のその他の変更点については、以下のリンクをご覧ください。

登録

最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびにメール通知が届きます。

Adriana Jara です。Chrome 108 がリリースされたら、Chrome の新機能についてお知らせします。