Chrome 85 の新機能

Pete LePage

Chrome 85 の安定版へのロールアウトが開始されました。

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

• content-visibility: auto を使用すると、レンダリングのパフォーマンスを改善できます。
• CSS プロパティを CSS で設定できるようになりました。
• Windows アプリまたは PWA が getInstalledRelatedApps() でインストールされているかどうかを確認できるようになりました。
• アプリアイコンのショートカットが Windows でも動作するようになりました（今回は本当に）。
• fetch アップロード ストリーミングのオリジン トライアルが開始されました。
• その他

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 を使用すると、カスタム プロパティの型とデフォルトのフォールバック値を定義できます。これらについては、JavaScript での定義のサポートを追加した際の Chrome 78 の新機能で説明しました。

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() をご覧ください。 アプリの署名方法と、アプリが自分のものだと証明する方法について説明しています。

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

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 - 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 では、Alliance for Open Media によって標準化された AV1 でエンコードされた画像形式である AVIF のデコード サポートが追加されます。AVIF は JPEG や WebP と比較して圧縮率が大幅に向上します。最近の Netflix の調査では、標準の JPEG と比較して 50% の節約、4:4:4 コンテンツでは 60% 以上の節約が示されています。

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

関連情報

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

• Chrome DevTools の新機能（85）
• Chrome 85 の非推奨と削除
• Chrome 85 の ChromeStatus.com の更新
• Chrome 85 の JavaScript の新機能
• Chromium ソース リポジトリの変更リスト

登録

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

Pete LePage です。ついに髪を切りました。

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