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

Chrome 102 の新機能

Pete LePage

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

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

Pete LePage と申します。Chrome 102 のデベロッパー向けの新機能について詳しく見てみましょう。

File Handling API

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

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

"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 を使用していますが、この 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` プロパティ