file_handlers

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

file_handlers メンバーは、インストールされたプログレッシブウェブアプリ (PWA) が処理できるファイルの型を表すオブジェクトの配列を指定します。

file_handlers メンバーは、PWA がインストールされ使用される際にブラウザーによって読み取られ、オペレーティングシステムレベルで指定された一連のファイル形式とアプリケーションが関連付けられた際に使用されます。

例えば、ある PWA を text/plain の MIME タイプと一致するファイルを処理させることができます。この PWA がインストールされると、オペレーティングシステムはこれを使用してテキストファイルを処理できるようになり、ユーザーがこの形式のファイルをオープンすると、PWA が開きます。なお、他にもテキストファイルのハンドラーとして登録されているアプリケーションがある可能性があり、オペレーティングシステムがファイル形式とアプリケーションの関連付けを管理する方法、および指定されたファイルを処理するアプリケーションをユーザーに選択させる方法は、端末によって異なる場合があります。

メモ: file_handlers メンバーは、指定されたファイル形式を設定して PWA を登録するために使用されますが、これによって一致するファイルがオープンされたときにのみ、オペレーティングシステムが PWA を起動する結果となります。その後、PWA は実際に JavaScript コードを使用してファイルを処理する必要があります。詳しくはファイルの処理を参照してください。

値

オブジェクトの配列。配列内の各オブジェクトには、次の値が含まれている必要があります（action と acceptは必須です）。

action

ファイルを処理する際の移動先の URL が入っている文字列。 この URL は、 PWA が移動できる URL のセットである PWA のナビゲーションスコープ内に設定する必要があります。 PWA のナビゲーションスコープは、 start_url メンバーが既定値ですが、 scope メンバーを使用して設定することもできます。

accept

オブジェクトです。このオブジェクトのそれぞれのキーは次のようなものです。

  • プロパティのキーは MIME タイプです。
  • プロパティ値は、その MIME タイプに関連付けられたファイル拡張子を表す文字列の配列です。

例

この例では、ウェブアプリマニフェストで、音声ファイルを処理するアプリを登録するファイルハンドラーを 1 つ宣言しています。この例では、簡潔にするために、 name や icons などの他のマニフェストメンバーは記載していません。

json
{
  "file_handlers": [
    {
      "action": "/handle-audio-file",
      "accept": {
        "audio/wav": [".wav"],
        "audio/x-wav": [".wav"],
        "audio/mpeg": [".mp3"],
        "audio/mp4": [".mp4"],
        "audio/aac": [".adts"],
        "audio/ogg": [".ogg"],
        "application/ogg": [".ogg"],
        "audio/webm": [".webm"],
        "audio/flac": [".flac"],
        "audio/mid": [".rmi", ".mid"]
      }
    }
  ]
}

ファイルの処理

実際に PWA でファイル処理を実装するには、ウェブ開発者は Window.launchQueue を使用して、アプリケーションの JavaScript コードで受信したファイルを処理する必要があります。

ファイルの処理は、メインスレッドで動作するアプリケーションコードで行われ、アプリケーションのサービスワーカーでは行われません。

次の例では、 window.launchQueue.setConsumer() を使用して、入力した音声ファイル群を受け取り、最初のものを Audio 要素で再生するためのコールバック関数を指定します。

js
async function playSong(handledFile) {
  const blob = await handledFile.getFile();
  const url = window.URL.createObjectURL(blob);
  const audio = new Audio(url);
  audio.play();
}

if ("launchQueue" in window) {
  window.launchQueue.setConsumer((launchParams) => {
    if (launchParams.files && launchParams.files.length) {
      playSong(launchParams.files[0]);
    }
  });
}

仕様書

Specification
Manifest Incubations
# file_handlers-member

ブラウザーの互換性

BCD tables only load in the browser

関連情報