必知事項は次のとおりです。
- 画面共有のエクスペリエンスを向上させるため、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 で追加される変更については、以下のリンクをご覧ください。
- Chrome DevTools の新機能(107)
- Chrome 107 のサポート終了と削除
- ChromeStatus.com の更新(Chrome 107)
- Chromium ソース リポジトリの変更リスト
- Chrome リリース カレンダー
登録
最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびに、メール通知が届きます。
Chrome 108 のリリースと同時に Chrome の最新情報をお伝えします