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

Chrome 102 の新機能

Pete LePage

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

インストール済みの PWA をファイルハンドラとして登録できるため、ユーザーはディスクから直接ファイルを簡単に開くことができます。
inert 属性を使用すると、DOM の一部を不活性としてマークできます。
Navigation API を使用すると、シングルページアプリで URL のナビゲーションと更新を簡単に処理できます。
他にもたくさんあります。

ピートルページです。Chrome 102 のデベロッパー向け新機能を見ていきましょう

File Handling API

File Handling API を使用すると、インストールされた PWA をファイルハンドラとして OS に登録できます。登録が完了すると、ユーザーはファイルをクリックして、インストールされた PWA で開くことができます。これは、画像エディタ、IDE、テキストエディタなど、ファイルを操作する PWA に最適です。

PWA にファイル処理機能を追加するには、ウェブアプリマニフェストを更新し、PWA が処理できるファイルの種類に関する詳細情報を含む file_handlers 配列を追加する必要があります。開く URL、MIME タイプ、ファイル形式のアイコン、起動タイプを指定する必要があります。起動タイプは、複数のファイルを単一のクライアントで開くか、複数のクライアントで開くかを定義します。

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

PWA の起動時にこれらのファイルにアクセスするには、launchQueue オブジェクトのコンシューマを指定する必要があります。起動は、コンシューマーが処理するまでキューに入れられます。

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

詳しくは、インストールされたウェブアプリケーションをファイルハンドラにするをご覧ください。

`inert` プロパティ

inert プロパティは、フォーカスイベントや支援技術のイベントなど、要素のユーザー入力イベントを無視するようにブラウザに伝えるグローバル HTML 属性です。

これは UI を作成する際に便利です。たとえば、モーダルダイアログでは、表示されたときにフォーカスをモーダル内に「トラップ」する必要があります。また、常にユーザーに表示されるとは限らないドロワーの場合は、inert を追加することで、ドロワーが画面外にあっても、キーボードユーザーが誤って操作できないようにします。

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

ここでは、inert が 2 番目の <div> 要素で宣言されているため、<button> や <label> など、その中に含まれているすべてのコンテンツはフォーカスを受け取ることも、クリックすることもできません。

inert は Chrome 102 でサポートされており、Firefox と Safari の両方でサポートされる予定です。

詳細については、Inert の概要をご覧ください。

多くのウェブアプリは、ページナビゲーションなしで URL を更新する機能に依存しています。現在、History API を使用していますが、これは扱いづらく、必ずしも期待どおりに動作するとは限りません。Navigation API では、History API のラフな部分にパッチを当てるのではなく、この領域を完全に見直しています。

Navigation API を使用するには、グローバル navigation オブジェクトに navigate リスナーを追加します。

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

このイベントは基本的に集中型であり、ユーザーがリンクのクリック、フォームの送信、前後に移動するなどのアクションを行ったかどうかにかかわらず、あらゆるタイプのナビゲーションで呼び出されます。これはナビゲーションがプログラムでトリガーされた場合でも発生します。ほとんどの場合、そのアクションに対してブラウザのデフォルトの動作をコードでオーバーライドできます。

詳細とお試しいただけるデモについては、最新のクライアントサイドルーティング: Navigation API をご覧ください。

など多数

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

新しい Sanitizer API は、任意の文字列をページに安全に挿入できる堅牢なプロセッサを構築することを目的としています。
hidden=until-found 属性を使用すると、ブラウザは非表示の領域にあるテキストを検索し、一致するものがあればそのセクションを表示できます。

Chrome 102 の新機能

File Handling API

inert プロパティ

Navigation API

など多数

関連情報

登録

`inert` プロパティ