Chrome 84 の新機能

Pete LePage

Chrome 84 の安定版へのロールアウトが開始されました。

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

Pete LePage と申します。自宅で撮影しながら、Chrome 84 のデベロッパー向け新機能についてお話しします。

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

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

アプリアイコンのショートカットを使用すると、アプリ内の一般的なタスク（新しいツイートの作成、メッセージの送信、通知の確認など）を簡単に開始できます。Android 版 Chrome でサポートされています。

これらのショートカットは、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 Index 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 ウェブサイトでの wake lock の実装。

料理は好きだけど、レシピに従うとイライラするし、スクリーン セーバーがオンになるんだ。Chrome 84 でオリジン トライアルから卒業する wake lock API を使用すると、サイトは wake lock をリクエストして、画面の明るさを下げたりロックしたりしないようにできます。

実際、Betty Crocker のウェブサイトでは、購入意向の指標が 300% 増加したことを示す事例紹介を web.dev に公開しています。

wake lock を取得するには navigator.wakeLock.request() を呼び出すと、WakeLockSentinel オブジェクトが返されます。このオブジェクトは wake lock を「解放」するために使用されます。


// 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 デベロッパーの YouTube チャンネルにチャンネル登録してください。新しい動画が公開されるとメール通知が届きます。

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