ファイルを処理できるプログレッシブ Web アプリ (PWA) は、ユーザーに対するネイティブな感じがし、オペレーティング システムへの統合が向上します。
Web サイトでは、<input type="file">またはドラッグ アンド ドロップを使用してファイルをアップロードできますが、PWA はさらに 1 ステップ進み、オペレーティング システムでファイル ハンドラーとして登録できます。
PWA が特定のファイルの種類のファイル ハンドラーとして登録されている場合、オペレーティング システムは、Microsoft Wordが.docx ファイルを処理する方法と同様に、ユーザーがファイルを開いたときにアプリを自動的に起動できます。
アプリが処理するファイルを定義する
最初に、アプリが処理するファイルの種類を宣言します。 これは、 file_handlers 配列メンバーを使用して、アプリ マニフェスト ファイルで行われます。
file_handlers配列の各エントリには、次の 2 つのプロパティが必要です。
-
action: PWA を起動するときにオペレーティング システムが移動する URL。 -
accept: 受け入れられるファイルの種類のオブジェクト。 キーは MIME 型 (ワイルドカード記号を使用する部分型*受け入れられます)、値は受け入れられたファイル拡張子の配列です。
次の例について考えます。
{
"file_handlers": [
{
"action": "/openFile",
"accept": {
"text/*": [
".txt"
]
}
}
]
}
この例では、アプリはテキスト ファイルを受け入れる 1 つのファイル ハンドラーを登録します。 たとえば、デスクトップでアイコンをダブルクリックするなどして .txt ファイルを開くと、オペレーティング システムは、 /openFile URL を使用してアプリを起動します。
関連項目:
- MDN > References >プログレッシブ Web アプリでファイルを PWA に関連付けます。
- MDN > 参照> Web アプリ マニフェストでfile_handlersします。
ファイル処理 API が使用可能かどうかを検出する
ファイルを処理する前に、アプリがデバイスとブラウザーでファイル処理 API を使用できるかどうかをチェックする必要があります。
ファイル処理 API が使用可能かどうかをチェックするには、次のように、launchQueue オブジェクトが存在するかどうかをテストします。
if ('launchQueue' in window) {
console.log('File Handling API is supported!');
} else {
console.error('File Handling API is not supported!');
}
起動時にファイルを処理する
ファイルを開いた後に OS によってアプリが起動されると、 launchQueue オブジェクトを使用してファイル コンテンツにアクセスできます。
テキスト コンテンツを処理するには、次の JavaScript コードを使用します。
if ('launchQueue' in window) {
console.log('File Handling API is supported!');
launchQueue.setConsumer(launchParams => {
handleFiles(launchParams.files);
});
} else {
console.error('File Handling API is not supported!');
}
async function handleFiles(files) {
for (const file of files) {
const blob = await file.getFile();
blob.handle = file;
const text = await blob.text();
console.log(`${file.name} handled, content: ${text}`);
}
}
launchQueue オブジェクトは、コンシューマーが setConsumer で設定されるまで、起動されたすべてのファイルをキューに入れます。
launchQueueオブジェクトとlaunchParams オブジェクトの詳細については、ファイル処理の説明に関するページを参照してください。
PWA ファイル ハンドラーのデモ アプリ
PWA ファイル ハンドラーのデモ アプリ:
- /pwa-file-handlers/ - Readme とソース コード。
- PWA ファイル ハンドラーのデモ - ライブ デモ。
デモを使用するには:
新しいウィンドウまたはタブで PWA ファイル ハンドラーのデモ に移動します。
デモ アプリをインストールします。
[アドレス] バーで、[使用可能なアプリ] をクリックします 。PWA ファイル ハンドラーのデモ (
) ボタンをインストールします。Edge で [ PWA ファイル ハンドラーのインストール] デモ アプリ ダイアログが開きます。
[ インストール ] ボタンをクリックします。
PWA ファイル ハンドラーのデモ アプリ ウィンドウが開きます。 [ アプリがインストールされました ] ダイアログが開きます。
[ 許可 ] ボタンをクリックします。
[Windows アプリ] ダイアログで、デモをタスク バーにピン留めするかどうかを確認するメッセージが表示されます。
[はい] ボタンをクリックします。
PWA ファイル ハンドラーのデモ アプリを閉じます。
テキスト ファイルを作成します。
既存のテキスト ファイルがある場合は、それを使用できます。 次の手順では、Visual Studio Code を使用して、
Documentsフォルダーにtest.txtという名前のテキスト ファイルを作成します。Visual Studio Code を開きます。
[ ファイル ] メニューをクリックし、[ 新しいテキスト ファイル] をクリックします。
次のようなテキストをファイルに追加します。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. * Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. * Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[ ファイル ] メニューをクリックし、[ 保存] をクリックします。
[名前を付けて保存] ダイアログが開きます。
C:\Users\localAccount\Documents\などのディレクトリに移動します。[ ファイル名 ] コンボ ボックスに「
test」と入力します。[ 型として保存 ] コンボ ボックスで、[ プレーン テキスト (* .txt)] を選択します。
[ 保存 ] ボタンをクリックします。
ダイアログが閉じます。
[ test.txt ] タブで、[ 閉じる ] (
) ボタンをクリックします。テキスト ファイルを開き、Open With アプリを指定します。
Windows タスク バーで、[スタート] ボタンをクリックし、「エクスプローラー」と入力し、[開く] をクリックします。
エクスプローラーが開きます。
C:\Users\localAccount\Documents\など、テキスト ファイルを含むディレクトリに移動します。テキスト ファイル (
test.txtなど) を右クリックし、[ Open with>PWA ファイル ハンドラーデモ] を選択します。または、テキスト ファイルをダブルクリックします。
Microsoft Edge ダイアログが開き、この Web アプリでテキスト ファイルを開いて編集するかどうかを確認するメッセージが表示されます。
[ 開く ] ボタンをクリックします。
PWA ファイル ハンドラーのデモ アプリが開き、
.txtファイル名とファイルのテキスト コンテンツが表示されます。