Chrome 85 の新機能

ピート ルページ

現在、Chrome 85 の安定版のリリースが開始されます。

フォーマットの詳細については次をご覧ください。

私は Pete LePage です。自宅で撮影を担当しています。では、Chrome 85 で導入されたデベロッパー向けの新機能を見てみましょう。

コンテンツの公開設定

ブラウザのレンダリング プロセス

HTML をユーザーに表示されるものにするには、ブラウザで最初のピクセルを描画する前に、いくつかの手順を踏む必要があります。これは、ビューポートに表示されていないコンテンツも含め、ページ全体に対して行われます。

要素に content-visibility: auto を適用すると、その要素のレンダリング作業はビューポートまでスクロールするまでスキップできることがブラウザに通知され、最初のレンダリングが高速化されます。


.my-class {
  content-visibility: auto;
}

content-visibility を最大限に活用するには、より複雑なレイアウト アルゴリズム（flexbox や grid など）を持つ親セクションや、独自のレイアウトを含む子がある親セクションに適用します。

コンテンツをチャンク化して content-visibility: auto; を追加することで、このページのレンダリング時間が 232 ミリ秒からわずか 30 ミリ秒に短縮されました。

これを使用してレンダリング パフォーマンスを改善する方法については、コンテンツの公開設定をご覧ください。

@property 変数と CSS 変数

技術的にはカスタム プロパティと呼ばれる CSS 変数が便利です。Houdini CSS Properties and Values API を使用すると、カスタム プロパティのタイプとデフォルトのフォールバック値を定義できます。以前の Chrome 78 の新機能では、JavaScript での定義のサポートを追加した際に説明しました。

Chrome 85 以降では、CSS で直接 CSS プロパティを定義して設定することもできます。CSS プロパティで気に入っているのは、プロパティにセマンティックな意味や代替値を与え、さらに CSS テストも行えるという点です。

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una は、@property: CSS 変数の優れた機能を提供するという優れた投稿で、その使用方法を紹介しています。

関連するインストール済みアプリを入手する

getInstalledRelatedApps() API を使用すると、ユーザーはアプリがインストールされているかどうかを確認し、ユーザー エクスペリエンスをカスタマイズできます。

たとえば、アプリがすでにインストールされている場合は、ランディング ページに異なるコンテンツを表示します。混乱を防ぐために、重複する機能を 1 つのアプリに一元化します。また、ネイティブ アプリがすでにインストールされている場合は、PWA のインストールを促進しないでください。

Chrome 80 で最初にリリースされたときは、Android アプリでのみ機能していました。Android では、PWA がインストールされているかどうかを確認できるようになりました。また、Windows では、Windows UWP アプリがインストールされているかどうかを確認できます。

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

ヘルプセンター記事「アプリはインストール済みですか？getInstalledRelatedApps() が通知します。

アプリアイコンのショートカット

Windows のアプリアイコンのショートカット

Chrome 84 では、アプリアイコンのショートカットのサポートが追加されました。「どこでも利用可能だが、Android でのみ利用できる」とうっかり言っていました。 Chrome 85 では、Android と Windows に加えて、Chrome と Edge の両方で利用できます。


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

詳細については、web.dev のアプリアイコンのショートカットの記事をご覧ください。混乱を招いてしまい申し訳ございません。

オリジン トライアル: fetch() を使用したストリーミング リクエスト

Chrome 85 以降では、オリジン トライアルとして fetch アップロード ストリーミングを利用できます。これにより、リクエストの本文の準備が整う前にフェッチを開始できます。以前は、全身の準備が整ってからリクエストを開始できましたが、今後はコンテンツを生成している間でも送信を開始できます。

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

たとえば、サーバーのウォームアップや、マイクやカメラから取得した音声や動画のストリーミングに使用できます。

Jake は、web.dev の fetch API を使用したストリーミング リクエストで詳しく説明されています。また、最新の HTTP203 - Streaming requests with fetch の動画でも説明しています。

その他

もちろんそれだけではありません。

Promise.any は、履行されるまたは拒否された最初の Promise によって履行される Promise を返します。

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

.replaceAll() を使用すると、正規表現ではなく、文字列内のすべてのインスタンスをより簡単に置換できます。

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85 では、AVIF のデコードのサポートが追加されています。AVIF は、AV1 でエンコードされ、Alliance for Open Media によって標準化された画像形式です。AVIF は JPEG および WebP に比べて圧縮率が著しく高く、最近の Netflix の調査では、標準の JPEG と比べて 50% の節約、4:4:4 のコンテンツと比べて 60% の節約が報告されています。

AppCache の削除が開始されました。

参考資料

ここでは、主なハイライトの一部のみを取り上げています。Chrome 85 で追加された変更点については、以下のリンクをご覧ください。

チャンネル登録

最新の動画をご覧になりたい場合は、ぜひ Chrome Developers YouTube チャンネルにご登録ください。新しい動画が公開されるたびにメール通知が届きます。

ピート ルページです。ついに髪をカットしました。

Chrome 86 がリリースされ次第 Chrome の新機能をお知らせします