このページは 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 に 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 を使用すると、ビーコンを送信するタイミングをブラウザが制御できます。

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

アプリケーションでは多くの場合、ユーザーのアクセス終了時にこれらのビーコンを送信する必要がありますが、「send」呼び出しを行う余裕はありません。この API は送信をブラウザ自体に委任するため、デベロッパーが正確なタイミングで送信呼び出しを実装しなくても、page unload または page hide でビーコンをサポートできます。

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

その他

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

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

Chrome 107 の新機能

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

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

PendingBeacon API オリジン トライアル

その他

関連情報

登録

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

PendingBeacon API オリジントライアル