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

Chrome 88 の新機能

Pete LePage

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

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

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 ウェブストアの審査担当者は、拡張機能がもたらすリスクをよりよく把握できます。拡張機能の更新をより迅速に行うことができます。

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

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

詳細と、現在の拡張機能を 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` プロパティ