Chrome 84 の新機能

Chrome 84 の Stable 版へのリリースが開始します。

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

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

アプリアイコンのショートカット

Twitter PWA のアプリアイコンのショートカット

アプリアイコンのショートカットを使用すると、新しいツイートの作成、メッセージの送信、通知の確認など、アプリ内の一般的なタスクを簡単に開始できます。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.readyanimation.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

Betty Crocker ウェブサイトでのウェイクロックの実装。

料理が好きだけど、レシピを頼むとイライラします。 スクリーン セーバーが起動して、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 Developers YouTube チャンネルご登録ください。新しい動画が公開されるたびに、メール通知が届きます。

ピート・ル・ペイジです。Chrome 85 のリリースが来たら、Chrome の新機能についてお知らせします。