このページは Cloud Translation API によって翻訳されました。

Chrome 79 の新機能

Pete LePage

Chrome 79 のリリースが開始されました

Android にインストールされたプログレッシブウェブアプリが、マスク可能なアイコンをサポートするようになりました。
WebXR Device API を使用して没入型エクスペリエンスを作成できるようになりました。
Wake Lock API はオリジントライアルとして利用できます。
rendersubtree 属性は、オリジントライアルとして使用できます。
Chrome DevSummit の動画がオンラインで公開されました。
その他にも多数の機能があります。

Pete LePage と申します。Chrome 79 のデベロッパー向け新機能について、詳しく説明します。

マスク可能なアイコン

Android O 以降を搭載したデバイスでプログレッシブウェブアプリをインストールしている場合、アイコンの周囲に白い円が表示されていると思います。

幸い、Chrome 79 では、インストール済みのプログレッシブウェブアプリ用のマスク可能なアイコンがサポートされるようになりました。アイコンはセーフゾーン（基本的にはキャンバスの 80% を占める直径の円）内に収まるようにデザインする必要があります。

次に、ウェブアプリマニフェストでアイコンに新しい purpose プロパティを追加し、値を maskable に設定します。

{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

Tiger Oakes が CSS Tricks で公開している記事「Maskable Icons: Android Adaptive Icons for Your PWA」には、詳細がすべて記載されています。また、アイコンが適切に表示されることをテストするための優れたツールも紹介されています。

ウェブ XR

WebXR Device API を使用して、スマートフォンやヘッドマウントディスプレイ向けの没入型エクスペリエンスを作成できるようになりました。

WebXR では、さまざまな没入型エクスペリエンスを実現できます。拡張現実を使用して、新しいソファが購入前に自宅の雰囲気にどのように見えるかを確認できます。バーチャルリアリティゲームや 360° 映画など、さまざまな機能が揃っています。

新しい API の使用を開始するには、ウェブにバーチャルリアリティが登場をご覧ください。

新しいオリジントライアル

オリジントライアルでは、試験運用版の機能と API を検証する機会が Google に提供され、広範なデプロイにおけるユーザビリティと有効性についてフィードバックを送信できます。

通常、試験運用版の機能を利用するにはフラグが必要ですが、機能に対してオリジントライアルを提供する場合は、そのオリジントライアルに登録して、オリジンのすべてのユーザーに対してこの機能を有効にできます。

オリジントライアルを有効にすると、デモやプロトタイプを構築して、ベータ版テストのユーザーが Chrome で特別なフラグを切り替えることなく、トライアル期間中に試すことができます。

オリジントライアルについて詳しくは、ウェブデベロッパー向けのオリジントライアルガイドをご覧ください。アクティブなオリジントライアルのリストと、トライアルへの登録は、Chrome オリジントライアルページで確認できます。

Wake Lock

Google スライドで私が特に気に入っているのは、1 枚のスライドで資料を長時間開いたままにしていると、スクリーンセーバーが起動してしまうことです。続行する前に、パソコンのロックを解除する必要があります。全然

しかし、新しい Wake Lock API を使用すると、ページでロックをリクエストして、画面が暗くなったりスクリーンセーバーが起動したりするのを防ぐことができます。スライドだけでなく、レシピサイトなどで画面をオンのままにして、指示に従う場合にも役立ちます。

ウェイクロックをリクエストするには、navigator.wakeLock.request() を呼び出して、返された WakeLockSentinel オブジェクトを保存する必要があります。

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

ロックは、ユーザーがページから移動するか、前に保存した WakeLockSentinel オブジェクトで release を呼び出すまで維持されます。

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

詳しくは、web.dev/wakelock をご覧ください。

`rendersubtree` 属性

DOM の一部をすぐにレンダリングしたくない場合があります。たとえば、大量のコンテンツを含むスクロールバーや、特定の時点で表示されるコンテンツが一部のみのタブ式 UI などです。

新しい rendersubtree 属性は、そのサブツリーのレンダリングをスキップできることをブラウザに伝えます。これにより、ブラウザがページの残りの部分を処理する時間を増やせるため、パフォーマンスが向上します。

rendersubtree が invisible に設定されている場合、要素のコンテンツは描画もヒットテストも行われないため、レンダリングを最適化できます。

rendersubtree を activatable に変更すると、invisible 属性が削除され、コンテンツがレンダリングされてコンテンツが表示されます。

Chrome Dev Summit 2019

Chrome Dev Summit に参加できなかった方のために、すべてのセッションは YouTube チャンネルで公開されています。

Jake の Twitter スレッドには、Google のチームの最新のメンバーである Surjiko をはじめ、トーク中に盛り込まれたさまざまな興味深い情報が掲載されています。