このページは 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 を検証する機会が提供され、広範なデプロイでのユーザビリティと有効性についてフィードバックを提供できます。

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

オリジントライアルを有効にすると、デモやプロトタイプを構築して、ベータ版テストのユーザーが 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 スレッドでは、チームの最新メンバーである Surjiko など、講演の合間に行われた楽しい出来事もすべて紹介されています。

Chrome 79 の新機能 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。