Chrome 88 の新機能

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 のその他の変更については、下記のリンクをご覧ください。

登録

最新の動画情報を受け取るには、Chrome デベロッパーの YouTube チャンネルチャンネル登録してください。新しい動画が公開されるとメール通知が届きます。

担当の Pete LePage です。Chrome 89 がリリースされ次第、Chrome の新機能についてお知らせします。