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 で追加される変更については、以下のリンクをご覧ください。
- Chrome DevTools の新機能(88)
- Chrome 88 のサポート終了と削除
- ChromeStatus.com の更新(Chrome 88)
- JavaScript の新機能(Chrome 88)
- Chromium ソース リポジトリの変更リスト
登録
最新の動画をご覧になりたい場合は、Chrome Developers YouTube チャンネルにご登録ください。新しい動画が公開されるたびに、メール通知が届きます。
Chrome 89 のリリースと同時に Chrome の新機能をお知らせします