このページは Cloud Translation API によって翻訳されました。

Chrome 85 の新機能

Pete LePage

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

必知事項は次のとおりです。

content-visibility: auto を使用すると、レンダリングのパフォーマンスを改善できます。
CSS プロパティを CSS で設定できるようになりました。
これで、getInstalledRelatedApps() を使用して Windows アプリまたは PWA がインストールされているかどうかを確認できるようになりました。
アプリアイコンのショートカットが 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: giving superpowers to CSS variables では、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 では、AV1 でエンコードされ、Alliance for Open Media によって標準化された画像形式である AVIF のデコードサポートが追加されました。AVIF は JPEG や WebP と比較して大幅な圧縮率の向上を実現します。最近の Netflix の調査では、標準の JPEG と比較して 50% の削減、4:4:4 コンテンツでは 60% を超える削減が示されています。

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

Chrome 85 の新機能

コンテンツの公開設定

@property と CSS 変数

インストールされている関連アプリを取得する

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

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

その他

関連情報

登録

`@property` と CSS 変数

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

送信元トライアル: `fetch()` を使用したストリーミングリクエスト