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

Chrome 88 の新機能

Pete LePage

Chrome 88 の Stable 版へのロールアウトが開始されました。

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

Manifest V3 を使用して拡張機能を Chrome ウェブストアにアップロードできるようになりました。
aspect-ratio CSS プロパティを使用すると、任意の要素のアスペクト比を簡単に設定できます。
Chrome 88 では、特定の条件下で非表示のページのチェーンされた JavaScript タイマーを大幅にスロットリングします。
Trusted Web Activity で Play Billing を使用できるようになりました。
Chrome Dev Summit のすべての動画が公開されています。
他にもさまざまな機能があります。

Pete LePage と申します。自宅で撮影しながら、Chrome 88 のデベロッパー向け新機能についてお話しします。

Manifest V3

Chrome 88 では、Manifest V3 でビルドされた拡張機能がサポートされるようになりました。これらの拡張機能は Chrome ウェブストアにアップロードできます。Manifest V3 は、拡張機能のセキュリティ、パフォーマンス、プライバシー保護がデフォルトで強化される新しい拡張機能プラットフォームです。

たとえば、リモートでホストされているコードは許可されません。これにより、Chrome ウェブストアの審査担当者は、拡張機能がもたらすリスクをよりよく把握できます。これにより、拡張機能をより迅速に更新できるようになります。

バックグラウンドページの代わりに、サービスワーカーが導入されます。サービスワーカーは必要な場合にのみメモリに常駐するため、拡張機能はシステムリソースをより少なく使用します。

また、拡張機能によるデータの使用と共有方法をユーザーがより明確に把握し、管理できるように、今後のリリースでは、ユーザーがインストール時に機密性の高い権限を保持できる新しいインストールフローを導入する予定です。

詳細と、現在の拡張機能を Manifest V3 に移行する方法については、developer.chrome.com をご覧ください。

CSS `aspect-ratio` プロパティ

通常、アスペクト比を持つのは、画像などの一部の要素のみです。幅または高さのみが指定されている場合、もう一方は固有のアスペクト比を使用して自動的に計算されます。

<!-- Height is auto-computed from width & aspect ratio -->
<img src="..." style="width: 800px;">

Chrome 88 では、aspect-ratio プロパティを使用してアスペクト比を明示的に指定し、同様の動作を有効にできます。

.square {
  aspect-ratio: 1 / 1;
}

プログレッシブエンハンスメントを使用して、ブラウザでサポートされているかどうかを確認し、必要に応じてフォールバックを実装することもできます。新しい CSS 4 not セレクタを使用すると、コードを少し整理できます。

.square {
  aspect-ratio: 1 / 1;
}

@supports not (aspect-ratio: 1 / 1) {
  .square {
    height: 4rem;
    width: 4rem;
  }
}

Jen Simmons が最新の Safari テクニカルプレビューでサポートされていることを指摘してくれたおかげで、まもなく Safari で利用できるようになります。Una のデモで、実際にどのように機能するかを確認できます。

連鎖された JS タイマーの過度なスロットリング

Chrome 88 では、特定の条件下で、非表示のページのチェーンされた JavaScript タイマーを大幅にスロットリングします。これにより CPU 使用率が低下し、バッテリー使用量も削減されます。動作が変化するエッジケースもありますが、タイマーは、別の API の方が効率的で信頼性が高い場合によく使用されます。

専門用語が多く、わかりにくい部分もあるため、詳しくは、Jake の記事「Chrome 88 以降のチェーンされた JS タイマーの重いスロットリング」をご覧ください。

Trusted Web Activity での Play 請求

信頼できるウェブアクティビティで Google Play 請求サービスを使用して、新しい Digital Goods API でデジタル商品や定期購入を販売できるようになりました。これは Android 版 Chrome 88 でオリジントライアルとして利用できます。次のリリースでは、オリジントライアルを ChromeOS に拡大する予定です。

アカウントを設定したら、信頼できるウェブアクティビティを更新して Google Play 請求サービスを有効にし、Google Play Console でデジタル商品を作成します。次に、PWA にオリジントライアルトークンを追加します。これで、既存の購入を確認したり、利用可能な購入をクエリしたり、新規購入を行ったりするコードを追加できるようになります。

// Get list of potential digital goods

const itemService =
  await window.getDigitalGoodsService("https://play.google.com/billing");

const details =
  await itemService.getDetails(['ripe_bananas', 'walnuts', 'pecans' ]);

Adriana と Andre が Chrome Dev Summit で行った講演「Google Play のウェブアプリの新機能」で詳細を確認するか、ドキュメントをご覧ください。

その他

もちろん、他にも多くの機能があります。

HTML 標準の変更に準拠するため、target="_blank" を含むアンカータグはデフォルトで rel="noopener" を意味するようになりました。これにより、タブナッピング攻撃を防ぐことができます。
ほとんどのオペレーティングシステムでは、マウスアクセラレーションがデフォルトで有効になっていますが、一部のゲームでは問題になることがあります。Chrome 88 では、Pointer Lock API を使用してマウスの加速を無効にできます。つまり、同じ物理的な動き（遅い動きでも速い動きでも）で同じ回転が得られるため、ゲームエクスペリエンスが向上し、精度が向上します。
また、addEventListener がオプションとして中止シグナルを受け取るようになりました。abort() を呼び出すと、そのイベントリスナーが削除されるため、不要になったイベントリスナーを簡単にシャットダウンできます。

Chrome 88 の新機能

Manifest V3

CSS aspect-ratio プロパティ

連鎖された JS タイマーの過度なスロットリング

Trusted Web Activity での Play 請求

その他

関連情報

登録

CSS `aspect-ratio` プロパティ