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

Chrome 88 の新機能

Pete LePage

Chrome 88 が安定版としてリリースされます。

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

manifest V3 を使用して、拡張機能を Chrome ウェブストアにアップロードできるようになりました。
aspect-ratio CSS プロパティを使用すると、任意の要素のアスペクト比を簡単に設定できます。
Chrome 88 では、特定の状況において、非表示のページに対するチェーンされた JavaScript タイマーのスロットリングが大幅に制限されます。
信頼できるウェブアクティビティで Play 請求サービスを使用できるようになりました。
Chrome Dev Summit の動画がすべて公開されました。
他にも多くの機能があります。

私は Pete LePage で、自宅で撮影をしています。では Chrome 88 のデベロッパー向け新機能を見ていきましょう。

Manifest V3

Chrome 88 では、Manifest V3 で構築された拡張機能がサポートされるようになりました。これらの拡張機能は、Chrome ウェブストアにアップロードできます。Manifest V3 は新しい拡張機能プラットフォームであり、デフォルトで Chrome 拡張機能の安全性、パフォーマンス、プライバシーを尊重するようになります。

たとえば、リモートでホストされるコードを禁止することで、Chrome ウェブストアのレビュー担当者は拡張機能がもたらすリスクをより正確に把握できます。拡張機能をより迅速に更新できます

バックグラウンドページの代わりとして Service Worker が導入されています。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;
  }
}

最新の Safari テクニカルプレビューでサポートされていると指摘してくれた Jen Simmons 氏に感謝します。まもなく Safari でも対応する予定です。実際の動作については、Una のデモをご覧ください。

チェーンされた JS タイマーの高度なスロットリング

Chrome 88 では、特定の状況において、隠しページに対するチェーンされた JavaScript タイマーのスロットリングが大幅に調整されます。これにより CPU 使用率が下がり、バッテリー使用量も減少します。これにより動作が変わるエッジケースもありますが、タイマーは別の API のほうが効率的で信頼性が高い場合によく使用されます。

これは専門用語が多すぎてわかりにくいため、詳細については Jake の記事チェーン化された JS タイマーの Heavy Slottling（Chrome 88 以降）をご覧ください。

Trusted Web Activity での Play 請求サービス

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

アカウントを設定したら、信頼できるウェブアクティビティを更新して 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 の講演で詳しく説明している Play のウェブアプリの新機能、またはdocsをご覧ください。

その他

他にもたくさんの機能があります。

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` プロパティ