Chrome 84 の Stable 版へのリリースが開始します。
必知事項は次のとおりです。
- ユーザーは、アプリアイコン ショートカットを使用して、アプリ内で一般的なタスクを開始できます。
- Web Animations API で、これまでサポートされていなかった多くの機能に対するサポートが追加されました。
- wake lock を使用すると、画面が暗くなったりロックされたりするのを防ぐことができます。
- Content Indexing API を使用すると、オフラインで使用できるコンテンツを表示できます。
- アイドル状態の検出と Web Assembly SIMD の新しいオリジン トライアルがあります。
- 同一サイト Cookie ポリシーの変更が再び段階的に適用されます。
- その他
私は Pete LePage で、自宅で仕事をしています。では Chrome 84 のデベロッパー向け新機能を見ていきましょう。
アプリアイコンのショートカット
アプリアイコンのショートカットを使用すると、新しいツイートの作成、メッセージの送信、通知の確認など、アプリ内の一般的なタスクを簡単に開始できます。Chrome for Android でサポートされています。
これらのショートカットは、Android のアプリアイコンを長押しすると起動します。PWA にショートカットを追加するのは簡単です。ウェブアプリ マニフェストに新しい shortcuts
プロパティを作成し、ショートカットを記述して、アイコンを追加します。
"shortcuts": [
{
"name": "Open Play Later",
"short_name": "Play Later",
"description": "View the list you saved for later",
"url": "/play-later",
"icons": [
{ "src": "//play-later.png", "sizes": "192x192" }
]
},
]
詳しくは、アプリのショートカットで作業を効率化するをご覧ください。
ウェブ アニメーション API
Chrome 84 では、これまでサポートされていなかった多くの機能が Web Animations API に追加されました。
animation.ready
とanimation.finished
が約束されています。- ブラウザで古いアニメーションをクリーンアップして削除できるようになり、メモリを節約してパフォーマンスを向上できるようになりました。
- また、複合モード(
add
オプションとaccumulate
オプション)を使用してアニメーションを組み合わせることができるようになりました。
ここでは、すべての改善点について正当に説明したり、良い例を提示したりすることはできません。詳しくは、Chromium 84 での Web Animations API の改善をご覧ください。
Content Indexing API
ネットワークに接続せずにコンテンツを利用できるかどうか。ユーザーが認識していないからです本当に利用できますか?見つけやすさの問題があります。
元のトライアルを終了したばかりの Content Indexing API を使用すると、オフラインで利用できるコンテンツの URL とメタデータを追加できます。このメタデータを使用してコンテンツがユーザーに表示され、見つけやすさが向上します。
インデックスにコンテンツを追加するには、Service Worker の登録に対して index.add()
を呼び出し、コンテンツに関する必要なメタデータを指定します。
const registration = await navigator.serviceWorker.ready;
await registration.index.add({
id: 'article-123',
url: '/articles/123',
launchUrl: '/articles/123',
title: 'Article title',
description: 'Amazing article about things!',
icons: [{
src: '/img/article-123.png',
sizes: '64x64',
type: 'image/png',
}],
});
すでにインデックスに登録されているものを確認するには、Service Worker の登録時に index.getAll()
を呼び出します。
const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
// entry.id, entry.launchUrl, etc. are all exposed.
}
詳しくは、Content Indexing API を使用してオフライン対応ページをインデックス登録するをご覧ください。
wake lock API
料理が好きだけど、レシピを頼むとイライラします。 スクリーン セーバーが起動して、Chrome 84 のオリジン トライアルからも卒業した wake lock API を使用すると、サイトは画面が暗くなったりロックされたりしないように wake lock をリクエストできます。
実際、Betty Crocker のウェブサイトは現在これを使用しており、購入意向インジケーターが 300% 増加したことを示すケーススタディを web.dev で公開しています。
wake lock を取得するには、navigator.wakeLock.request()
を呼び出します。これにより、wake lock の「解放」に使用される WakeLockSentinel
オブジェクトが返されます。
// Request the wake lock
const wl = await navigator.wakeLock.request('screen');
// Release the wake lock
wl.release();
他にも機能がいくつかあるので、Screen Wake Lock API を使用してスリープ状態から復帰しないをご覧ください。ただし、少なくとも私の画面が小麦粉で覆われることはありません。
オリジン トライアル
新しいオリジン トライアルが 2 つあります。オリジン トライアルを初めて使用する場合は、Chrome のオリジン トライアルのスタートガイドをご覧ください。
アイドル検出
Idle Detection API は、ユーザーがアイドル状態である(コンピュータから離れる可能性があることを示す)ことを通知します。これは、チャットアプリやソーシャル ネットワーク サイトなどで、連絡先が使用可能かどうかをユーザーに知らせるために最適です。
// Create the idle detector
const idleDetector = new IdleDetector();
// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
const uState = idleDetector.userState;
const sState = idleDetector.screenState;
console.log(`Idle change: ${uState}, ${sState}.`);
});
// Start the idle detector.
await idleDetector.start({
threshold: 60000,
signal,
});
API の詳細とテストをすぐに開始する方法については、Idle Detection API で非アクティブ ユーザーを検出するをご覧ください。
ウェブ アセンブリ SIMD
Web Assembly SIMD はオリジン トライアルを開始します。ハードウェアで一般的に利用可能な SIMD 命令にマッピングされる演算を紹介します。SIMD 演算は、特にマルチメディア アプリでパフォーマンスを向上させるために使用されます。
WebAssembly SIMD の詳細については、WebAssembly SIMD を使用した高速並列アプリケーションをご覧ください。
その他
Chrome 84 は大規模ですが、注目すべき重要な更新が他にもいくつかあります。
- SameSite Cookie の変更の段階的なロールアウトが再開されます。
- 不正な権限のリクエストや不正な通知を行うサイトは、停止通知 UI に自動的に登録されます。
- QuicTransport の新しいオリジン トライアルを利用できます。
関連情報
ここでは、重要なハイライトの一部についてのみ説明します。Chrome 84 で追加される変更点については、以下のリンクをご覧ください。
- Chrome DevTools の新機能(84)
- Chrome 84 のサポート終了と削除
- ChromeStatus.com の更新(Chrome 84)
- JavaScript の新機能(Chrome 84)
- Chromium ソース リポジトリの変更リスト
登録
最新の動画をご覧になりたい場合は、Chrome Developers YouTube チャンネルにご登録ください。新しい動画が公開されるたびに、メール通知が届きます。
ピート・ル・ペイジです。Chrome 85 のリリースが来たら、Chrome の新機能についてお知らせします。