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

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

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

すでに本番環境に PWA があり、マニフェストに id を追加する場合は、ブラウザによって割り当てられた ID を使用する必要があります。id は、デベロッパー ツールの [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"
    }
  ]
}

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

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

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

Priority Hints は試験運用版の機能であり、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 Dev Summit のサイトをご覧ください。基調講演やライブ配信を見逃した場合は、Chrome Developers YouTube チャンネルの CDS 再生リストをご覧ください。

など多数

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

• バックフォワード キャッシュ（bfcache）が安定版で利用可能になり、Chrome は Firefox と Safari の両方に対応するようになりました。

関連情報

ここでは、重要なハイライトの一部についてのみ説明します。Chrome 96 で追加される変更点については、以下のリンクをご覧ください。

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

登録

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

Chrome 97 のリリースと同時に Chrome の最新情報をお伝えします