File System Access API の永続的な権限

権限を繰り返し付与しなくても、ファイルとフォルダへの永続的な読み取り / 書き込みアクセス権を取得できるようになりました。この投稿では、その仕組みについて説明します。詳細に入る前に、現状と解決される問題を簡単に説明します。

現在の方法の課題

File System Access API を使用すると、デベロッパーはユーザーのローカル ハードディスク上のファイルに読み取り(必要に応じて書き込み)でアクセスできます。この API を使用する一般的なアプリ(他にも多数)の 1 つが、ブラウザで直接実行される Microsoft の IDE である Visual Studio Code(VS Code)です。VS Code を開くと、[ようこそ] 画面が表示されます。ここで、新しいファイルを作成したり、既存のファイルやフォルダを開いたりできます。

Visual Studio Code のウェルカム画面。

[フォルダを開く] をクリックしてハードディスク上のフォルダを選択すると、ブラウザで、このフォルダへの VS Code の表示アクセスを許可するかどうかを尋ねられます。

ビューへのアクセスを求める Visual Studio Code。

アクセス権を付与すると、フォルダ階層を移動して、VS Code のエディタでファイルを開くことができます。いずれかのファイルを変更すると、フォルダへの編集アクセス権を付与するかどうかを尋ねるメッセージが表示されます。

Visual Studio Code で編集アクセスを求めるメッセージが表示されている。

許可すると、アドレスバーのファイル アイコンが変わり、小さな下矢印が追加されます。これは、アプリに読み取りと書き込みの権限があることを示します。権限を変更するには、アイコンをクリックして [アクセス権を削除] をクリックし、アプリがファイルを編集できなくします。

アドレスバー アイコンのプロンプトが表示された Visual Studio Code。

アクセスは、オリジンの最後のタブを閉じるまで有効です。アプリを閉じて再度開くと、VS Code では中断したところからある程度再開できます。[最近開いたファイルを開く] をクリックすると、以前に開いたフォルダが再び開きます。

最後に開いたファイルが表示された Visual Studio Code。

ただし、以前にフォルダへの書き込み権限を付与していた場合でも、再度アクセス権を付与する必要があります。すぐに疲れてしまいます。解決策(File System Access API の永続的な権限)について説明する前に、VS Code はどのようにして最近のフォルダを記憶するのでしょうか。

再読み込み後に編集アクセスを求める Visual Studio Code。

File System Access API では、ファイルとフォルダへのアクセスは FileSystemHandle オブジェクト(ファイルの FileSystemFileHandle オブジェクトとフォルダ(ディレクトリ)の FileSystemDirectoryHandle オブジェクト)によって管理されます。どちらも IndexedDB に保存できます。これはまさに VS Code が行っていることです。これは、Chrome DevTools を開き、[Application] タブで IndexedDB セクションに移動し、vscode-web-db データベースで関連するテーブル vscode-filehandles-store を選択することで確認できます。

Chrome DevTools で Visual Studio Code をデバッグしている様子。IndexedDB セクションに、保存された FileSystemHandle が表示されています。

新しい方法: 変更内容とスケジュール

Chrome では、ユーザーがファイルとフォルダへの永続的なアクセス権を付与できるようにする新しい動作をリリースします。これにより、ユーザーに繰り返しプロンプトを表示する必要がなくなります。この新しい動作は Chrome 122 以降で確認できます。早期にテストするには、Chrome 120 以降で、2 つのフラグ chrome://flags/#file-system-access-persistent-permissionchrome://flags/#one-time-permission を [有効] に切り替えます。

まず、新しい動作では、3 つの選択肢から権限を選択できる新しい権限プロンプトが表示されます。ユーザーは、必要に応じて、アクセスするファイルやフォルダをアプリにアクセス許可できます。

3 つの権限プロンプトが表示された Visual Studio Code。

この新しい 3 ウェイ メッセージには、次のオプションがあります。

  • この回のみ許可: 現在のセッションのファイルにアプリがアクセスできるようにします。(これは既存の動作に対応しています)。
  • すべてのアクセスで許可: アクセス権が取り消されない限り、アプリに無期限のアクセスを許可します。アプリに永続アクセスが許可されると、新しく開いたファイルやフォルダにも永続的にアクセスできるようになります。
  • 許可しない: アプリがファイルにアクセスすることを許可しません。(これは既存の動作に対応しています)。

2 つ目の変更点は、サイト設定に新しいセクションが追加されたことです。このセクションには、[ファイルの編集] 切り替えボタンの横にある起動アイコンからアクセスできます。

ファイル編集アイコンのある Visual Studio Code サイト設定。

この起動アイコンをクリックすると、該当するアプリの [プライバシーとセキュリティ] 設定が開き、アプリがアクセスできるすべてのファイルとフォルダのアイテムのリストが表示されます。ゴミ箱アイコンをクリックすると、アイテムごとにアクセス権を取り消すことができます。アイテムごとにアクセス権を削除しても、アプリは引き続きファイルへの一般的なアクセス権を付与できます。一般に、アクセス権を取り消すには、前述のようにアドレスバーのアイコンをクリックします。

vscode.dev サイトの Chrome のプライバシーとセキュリティの設定。

新しい動作をトリガーする方法

File System Access API にデベロッパー向けの変更はありません。永続的な権限で新しい動作をトリガーするには、異なる前提条件を満たす必要がある 3 つの方法があります。

  1. ユーザーが最後にオリジンにアクセスしたときに、ファイルまたはフォルダ(または複数のファイルまたはフォルダ)に対する権限を付与し、アプリが対応する FileSystemHandle オブジェクトを IndexedDB に保存している必要があります。次にオリジンにアクセスしたときに、アプリは IndexedDB から保存されている FileSystemHandle オブジェクトのいずれかを取得し、その FileSystemHandle.requestPermission() メソッドを呼び出す必要があります。これらの前提条件が満たされると、新しい 3 ウェイ プロンプトが表示されます。
  2. オリジンは、以前にアクセスが許可された FileSystemHandleFileSystemHandle.requestPermission() メソッドを呼び出しましたが、タブがしばらくバックグラウンドに移動されたため、アクセスが自動的に取り消されています。(権限の自動取り消しは、Chrome の一時的な権限の記事で説明されているロジックに基づいて機能します)。これらの前提条件が満たされると、新しい 3 ウェイ プロンプトが表示されます。
  3. ユーザーがアプリをインストールしている必要があります。インストール済みのアプリは、ユーザーがアクセスを許可すると、権限が自動的に保持されます。この場合、3 方向プロンプトは表示されず、代わりにアプリはデフォルトで新しい動作を取得します。

1 つ目のケースと 2 つ目のケースでは、requestPermission() メソッドが呼び出されているオブジェクトだけでなく、アプリが以前にアクセスしたすべての FileSystemHandle オブジェクトがプロンプトに一覧表示されます。1 回限りの権限での動作と同様に、ユーザーがプロンプトを 3 回以上拒否または閉じると、プロンプトはトリガーされなくなり、代わりに通常の権限プロンプトが表示されます。

新しい動作を試す

サポート対象のバージョンの Chrome を使用している場合、または必要なフラグを設定している場合は、ウェブ上の VS Code で新しい動作をテストできます。フォルダを開いてアクセス権を付与し、タブを閉じて再度開き、[最近のファイルを開く] をクリックします(プロンプトをトリガーするには、すぐに再読み込みしても機能しないため、すべてのタブを閉じる必要があります)。以前のフォルダを選択すると、新しいプロンプトが表示されます。より簡素なテストケースについては、Persistent File System Access のデモソースコードをご覧ください。

まとめ

File System Access API の永続的な権限は、この API の最もリクエストされている機能の 1 つであり、実装バグも非常に人気があり、多くのデベロッパーがスターを付けています。この機能をデベロッパー、そして何よりもユーザーに提供することで、プラットフォーム固有のアプリと比較して重要な機能のギャップが解消されました。

謝辞

この投稿は、Christine HollingsworthAustin SullivanRachel Andrew が確認しました。