インストール済みのウェブ アプリケーションをファイル ハンドラとして指定する

オペレーティング システムで、アプリをファイル ハンドラとして登録します。

Thomas Steiner

ウェブアプリでファイルの読み取りと書き込みを行えるようになった今、 1 つ目のステップとして、ウェブアプリをアプリで使用できるファイルのファイル ハンドラとして、デベロッパーが宣言できるようにします。 作成、処理します。File Handling API を使用すると、まさにこれを行うことができます。テキストの登録後 エディタアプリをファイル ハンドラとして使用し、インストール後に macOS で .txt ファイルを右クリックします。 [情報を見る]を選択.txt ファイルを常にこのアプリで開くよう OS に指示します あります。

File Handling API に推奨されるユースケース

この API を使用するサイトには、たとえば次のようなものがあります。

  • テキスト エディタ、スプレッドシート アプリ、スライドショー作成ツールなどの Office アプリケーション。
  • グラフィック エディタと描画ツール。
  • ビデオゲームのレベル エディタ ツール。

File Handling API の使用方法

プログレッシブ エンハンスメント

File Handling API 自体はポリフィルできません。ウェブ版の Google Chat でファイルを開く というのも、次の 2 つの方法で実現できます。

  • Web Share Target API を使用すると、デベロッパーは自分のアプリを共有ターゲットとして指定できます オペレーティング システムの共有シートからファイルを開くことができます。
  • File System Access API をファイルのドラッグ&ドロップと統合できるため、 デベロッパーは、すでに開いているアプリでドロップされたファイルを処理できます。

ブラウザ サポート

対応ブラウザ

  • Chrome: 102。 <ph type="x-smartling-placeholder">
  • Edge: 102。 <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。 <ph type="x-smartling-placeholder">
  • Safari: サポートされていません。 <ph type="x-smartling-placeholder">

ソース

機能検出

File Handling API がサポートされているかどうかを確認するには、次のコマンドを使用します。

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  // The File Handling API is supported.
}

File Handling API の宣言部分

最初のステップとして、ウェブアプリはウェブアプリ マニフェストで宣言的に記述する必要があります。 ファイルの種類を指定できますFile Handling API は、ウェブアプリ マニフェストを "file_handlers" というプロパティを使用します。このプロパティは、ファイル ハンドラの配列を受け取ります。ファイル ハンドラは、 次のプロパティを持つオブジェクトを返します。

  • "action" プロパティ。値としてアプリのスコープ内の URL を指します。
  • MIME タイプのオブジェクトをキーとして、ファイル拡張子のリストを持つ "accept" プロパティ。 使用できます。
  • ImageResource の配列を持つ "icons" プロパティ 追加できます。一部のオペレーティング システムでは、ファイル形式の関連付けによって、ファイル以外のアイコンを 関連するアプリケーション アイコンではなく、そのファイル形式の使用に関連する特別なアイコン。 必要があります。
  • "launch_type" プロパティ。1 つのウィンドウに複数のファイルを開くかどうかを定義します。 複数のクライアントで管理できます。デフォルトは "single-client" です。ユーザーが 複数のファイルを開き、ファイル ハンドラに "multiple-clients" アノテーションが付いている場合は、 "launch_type" にすると、アプリが複数回起動され、起動のたびに LaunchParams.files 配列（詳細を参照） 要素は 1 つだけです

以下の例では、ウェブアプリ マニフェストの関連する抜粋のみが表示されていますが、 Clearer:

{
  "file_handlers": [
    {
      "action": "/open-csv",
      "accept": {
        "text/csv": [".csv"]
      },
      "icons": [
        {
          "src": "csv-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-svg",
      "accept": {
        "image/svg+xml": ".svg"
      },
      "icons": [
        {
          "src": "svg-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-graf",
      "accept": {
        "application/vnd.grafr.graph": [".grafr", ".graf"],
        "application/vnd.alternative-graph-app.graph": ".graph"
      },
      "icons": [
        {
          "src": "graf-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "multiple-clients"
    }
  ]
}

これは、次の場所でカンマ区切り値（.csv）ファイルを処理する架空のアプリケーション用です。 /open-csv、/open-svg のスケーラブル ベクター グラフィック（.svg）ファイル、独自の Grafr ファイル形式 /open-graf の拡張子として .grafr、.graf、.graph のいずれかを指定できます。最初の 2 つのウィンドウが開き、 （複数のファイルが処理される場合は最後のクライアント）。

File Handling API の必須部分は、

アプリは、理論上どの対象 URL で処理できるファイルを宣言したので、 実際に受信ファイルに対してなんらかの処理を行います。そこで役立つのが launchQueue です。 説明します。起動されたファイルにアクセスするには、サイトで window.launchQueue のコンシューマを指定する必要があります 渡されます。起動は、指定されたコンシューマによって処理されるまでキューに入れられ、 呼び出す必要がありますこのようにして、起動のタイミングに関係なく、すべての起動が処理されます。 指定されました。

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  launchQueue.setConsumer((launchParams) => {
    // Nothing to do when the queue is empty.
    if (!launchParams.files.length) {
      return;
    }
    for (const fileHandle of launchParams.files) {
      // Handle the file.
    }
  });
}

DevTools のサポート

このドキュメントの執筆時点では DevTools のサポートはありませんが、 機能リクエスト 追加されました。

デモ

マンガ風の描画アプリである Excalidraw にファイル操作のサポートを追加しました。これをテストするには Excalidraw をインストールする必要があります。このファイルを使ってファイルを作成し、 ダブルクリックするか右クリックして [ファイルを表示] を選択し、 「Excalidraw」を選択します。ソースの実装をご確認ください。 できます。

<ph type="x-smartling-placeholder">
</ph> Excalidraw ファイルが表示された macOS のファインダー ウィンドウ。 <ph type="x-smartling-placeholder">
</ph> オペレーティング システムのファイル エクスプローラで、ファイルをダブルクリックするか右クリックします。
で確認できます。
<ph type="x-smartling-placeholder">
</ph> Excalidraw の項目がハイライト表示された状態でファイルを右クリックすると表示されるコンテキスト メニュー。 <ph type="x-smartling-placeholder">
</ph> Excalidraw は、.excalidraw ファイルのデフォルトのファイル ハンドラです。

セキュリティ

Chrome チームは、定義された基本原則に従って File Handling API を設計、実装しました。 強力なウェブ プラットフォーム機能へのアクセスの制御をご覧ください。これには、ユーザー コントロール、 人間工学の観点から見ていきます

権限、権限の永続性、ファイル ハンドラの更新

ユーザーの信頼とユーザーの安全をFile Handling API がファイルを開くと、 PWA がファイルを表示する前に権限プロンプトが表示されます。この権限プロンプトが表示されます ユーザーがファイルを開くために PWA を選択した直後に、権限と ユーザーがファイルを開く操作を簡単に行えるようにし、内容をわかりやすく、関連性のあるものにします。

この権限は、ユーザーが [許可] または [ブロック] をクリックするまで毎回表示されます。 3 回無視するか（3 回目以降は、Chromium で閲覧制限とブロックを行います） 権限など）。選択した設定は、PWA を閉じてから再度開くまで維持されます。

マニフェストの更新と "file_handlers" セクションの変更が検出されると、権限は リセットされます。

Web サイトにファイルへのアクセスを許可することで開かれる攻撃ベクトルには、大きなカテゴリがあります。 これらについては、 File System Access API に関する記事をご覧ください。「 File Handling API は、ファイル システムに対して追加のセキュリティ関連機能を提供します。 Access API は、オペレーティング システムの組み込み機能を通じて、 （ウェブ アプリケーションで表示されるファイル選択ツールとは異なります）

それでも、ユーザーが意図せずにウェブ アプリケーションにファイルへのアクセスを許可してしまうリスクは 開きます。しかし一般的には、ファイルを開くとそのアプリケーションが そのファイルの読み取りや操作に使用できます。そのため、ユーザーがファイルを開くことを明示的に （「アプリケーションで開く」など）コンテキスト メニューがあり、 信頼のシグナルになります。

デフォルト ハンドラのチャレンジ

例外は、特定のファイル形式についてホストシステムにアプリケーションがない場合です。イン この場合、一部のホスト オペレーティング システムでは、新しく登録されたハンドラを自動的に そのファイル形式のデフォルト ハンドラが自動的に実行されます。この場合、 ユーザーがその形式のファイルをダブルクリックすると、 できます。このようなホスト オペレーティング システムでは、ユーザー エージェントが、既存の 明示的に指定するのではなく、明示的に許可するためのプロンプトが必要です。 ユーザーの同意なしに、ファイルの内容を誤ってウェブ アプリケーションに送信すること。

ユーザー コントロール

この仕様では、ファイルを処理できるすべてのサイトをブラウザとして登録すべきではないと規定されています。 使用します。代わりに、ファイル処理の登録はインストールの背後で制限し、決して発生しないようにする 特にサイトをデフォルト ハンドラにする場合は、ユーザーによる明示的な確認なしで処理できます。代わりに ユーザーがすでにデフォルト ハンドラを持っている可能性がある .json などの既存の拡張機能をハイジャックするよりも サイトで独自の拡張機能を作成することを検討する必要があります。

透明性

すべてのオペレーティング システムで、ユーザーが現在のファイルの関連付けを変更できます。サポート範囲外 アクセスできます。

フィードバック

Chrome チームで File Handling API の使用経験についてお聞かせください。

API 設計について教えてください

API で想定どおりに機能していないものはありますか？あるいは不足しているメソッドがあるか アイデアを実現するために必要なものやプロパティは？セキュリティに関する質問またはコメント どうすればよいでしょうか。

  • 対応する GitHub リポジトリで仕様に関する問題を報告するか、既存の あります。

実装に関する問題を報告する

Chrome の実装にバグは見つかりましたか？または、実装が仕様と異なっていますか？

  • new.crbug.com でバグを報告します。できるだけ多くの詳細を 簡単な再現手順を実行して、UI>Browser>WebAppInstalls>FileHandling を入力します。 [コンポーネント] ボックスで次の操作を行います。Glitch の機能は、すばやく簡単に共有できる機能です 再現できます。

API のサポートを表示する

File Handling API を使用する予定はありますか？皆様の公開サポートは、Chrome チームが次のことを実現できるように支援します。 他のブラウザ ベンダーがそれらの機能をサポートすることの重要性を説明します。

  • どのように使用する予定なのかを WICG の談話スレッドで共有してください。
  • ハッシュタグを使用して @ChromiumDev にツイートしてください #FileHandling にアクセスして、 どこでどのように使用しているのか把握することです。

関連情報

謝辞

File Handling API は、Eric Willigers が Jay Harris Raymes Khoury。この記事をレビューしたユーザー: Joe Medley。