Chrome 96 の新機能

Pete LePage

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

• マニフェストの id プロパティを使用すると、PWA の一意の ID を指定できます。
• protocol_handlers プロパティを使用すると、インストール時に PWA をプロトコル ハンドラとして自動的に登録できます。
• 優先度ヒント オリジン トライアルでは、リソースのダウンロードの取得優先度を指定できます。
• Chrome のバージョンを強制的に 100 に設定して、3 桁のバージョン番号に対するコードの動作をテストできます。
• Chrome Dev Summit の動画はすべてオンラインで公開されています。
• 他にも多数の機能があります。

Pete LePage と申します。ようやくスタジオで撮影できました。Chrome 96 のデベロッパー向けの新機能について詳しく見ていきましょう。

PWA のマニフェスト id

ユーザーが PWA をインストールすると、ブラウザは PWA を一意に識別する方法が必要になります。しかし、最近まで、ウェブアプリ マニフェストの仕様では PWA を識別する方法が指定されていなかったため、ブラウザが判断し、実装が異なる結果になっていました。ブラウザによっては start_url が使用され、他のブラウザではマニフェスト ファイルのパスが使用されます。

そのため、インストール エクスペリエンスを損なうことなく、これらのフィールドのいずれかを変更することはできません。オプションの新しい id プロパティが追加され、PWA に使用する ID を明示的に定義できるようになりました。

マニフェストに id プロパティを追加すると、start_url またはマニフェストの場所への依存関係が解除され、これらのフィールドを更新できるようになります。

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

id プロパティのサポートは、Chrome 96 以降のパソコン版 Chromium ベースのブラウザで提供されます。現在、一意の ID としてマニフェスト URL を使用しているモバイルのサポートは、2022 年前半にリリースされる予定です。

本番環境ですでに PWA があり、マニフェストに id を追加する場合は、ブラウザによって割り当てられた ID を使用する必要があります。id は、DevTools の [Application] パネルの [Manifest] ペインで確認できます。

まったく新しい PWA の場合は、id を任意の文字列値に設定できますが、後で変更することはできないため、慎重に選択してください。

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

詳しくは、ウェブアプリ マニフェスト ID プロパティで PWA を一意に識別するをご覧ください。

PWA の URL プロトコル ハンドラ

ウェブアプリは navigator.registerProtocolHandler() を使用してプロトコル ハンドラとして登録できます。たとえば、Gmail は mailto プロトコルを登録できます。ユーザーが mailto: 接頭辞のリンクをクリックすると、Gmail が開き、ユーザーは簡単にメールを送信できます。

Chrome 96 以降では、PWA をインストールする際にプロトコル ハンドラとして登録できるようになりました。PWA でこれを行うには、ウェブアプリ マニフェストに protocol_handlers プロパティを追加し、処理する protocol と、クリックされたときに開く url を指定します。

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

ただし、いくつかの制限があり、任意のプロトコルを登録することはできません。詳しくは、PWA の URL プロトコル ハンドラの登録をご覧ください。また、web+ 構文を使用して独自のプロトコルを作成する方法もご確認ください。

優先度ヒント（オリジン トライアル）

ブラウザがウェブページを解析し、画像、スクリプト、CSS などのリソースの検出とダウンロードを開始すると、ページの読み込みを最適化するために、それらのリソースに取得優先度が割り当てられます。ブラウザは優先度を割り当てるのが得意ですが、すべてのケースで最適であるとは限りません。

優先度ヒントは試験運用版の機能で、Chrome 96 以降のオリジン トライアルとして利用できます。Core Web Vitals の最適化に役立ちます。importance 属性を使用すると、CSS、フォント、スクリプト、画像、iframe などのリソースタイプの優先度を指定できます。

警告: importance 属性の名前が fetchpriority に変更されました。この機能の最新情報については、Fetch Priority API によるリソース読み込みの最適化をご覧ください。

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

たとえば、Google フライトのページは次のようになります。この背景画像が Largest Contentful Paint（LCP）です。

優先ヒントありと優先ヒントなしで読み込みを比較してみましょう。背景画像の優先度を high に設定すると、LCP は 2.6 秒から 1.9 秒に短縮されます。

詳細、オリジン トライアルへの登録方法、レンダリング パフォーマンスの向上に役立つ優れた例については、Fetch Priority API によるリソース読み込みの最適化をご覧ください。

UA 文字列で Chrome 100 をエミュレートする

来年初めには、Chrome 100 に達し、バージョン番号が 3 桁になります。バージョン番号を確認するコードや UA 文字列を解析するコードは、3 桁を処理していることを確認する必要があります。

Chrome 96 以降では、現在のバージョン番号を 100 に変更する新しいフラグ #force-major-version-to-100 が導入されるため、すべてが想定どおりに動作することを確認できます。

詳しくは、ユーザー エージェント文字列で Chrome のメジャー バージョンを 100 に強制するをご覧ください。

Chrome Dev Summit

Chrome Dev Summit は終了しました。すべての動画とコンテンツはオンラインで利用できます。Chrome デベロッパー サミットのサイトをご覧ください。キーノートやライブ配信を見逃した場合は、Chrome デベロッパーの YouTube チャンネルの CDS 再生リストをご覧ください。

その他

もちろん、他にもたくさんあります。

• 前後キャッシュ（bfcache）が安定版で利用可能になり、Chrome は Firefox と Safari の両方と連携するようになりました。

関連情報

以下に、主なハイライトをいくつかご紹介します。Chrome 96 のその他の変更については、下記のリンクをご覧ください。

• Chrome DevTools の新機能（96）
• Chrome 96 の非推奨と削除
• Chrome 96 の ChromeStatus.com の更新
• Chrome 96 の JavaScript の新機能
• Chromium ソース リポジトリの変更リスト
• Chrome のリリース カレンダー

登録

最新情報を入手するには、Chrome Developers の YouTube チャンネルにチャンネル登録してください。新しい動画が公開されると、メール通知が届きます。

Pete LePage と申します。Chrome 97 がリリースされ次第、Chrome の新機能についてお知らせします。