Permissions APIで特定機能へのアクセス権限を確認する

Permissions APIについて調べる機会があったので、この記事にまとめます。

1 Permissions APIとは

Webアプリケーションが、ユーザー端末のカメラやマイクなどを使用するには、ユーザーがその機能へのアクセスを許可しなければなりません。

Permissions APIを使用すると、Webアプリケーションから特定機能へのアクセス権限を確認できます。アクセス権限が確認できれば、その状態に応じた適切な処理を実装できますね。

2 アクセス権限を確認する

Permissions.query()に対して、アクセス権限を知りたい機能を{ name : "hoge" }のように引数として渡すと確認できます。各ブラウザにおいてアクセス権限を確認できる機能のnameは、以下をご参照ください。

https://developer.mozilla.org/ja/docs/Web/API/Permissions/query#name

Permissions.query()では、PromiseとしてPermissionStatusオブジェクトが返ります。PermissionStatusオブジェクトには、stateプロパティが存在し以下3つの状態を返します。このstateプロパティの値がアクセス権限の状態を表します。

• granted
  • 特定機能へのアクセスが許可されている状態
  • この状態の機能はPermission APIの呼び出すコードから利用できます
• denied
  • 特定機能へのアクセスが拒否されている状態
  • この状態の機能はPermission APIの呼び出すコードから利用できません
• prompt
  • 特定機能へのアクセス許可または拒否が明示的に選択されていない状態（デフォルトの状態）
  • この状態の機能はPermission APIの呼び出しすコードから利用しようとした時、ブラウザなどはユーザに対して、アクセス許可または拒否を確認します。
  • 例えば、chromeでpromptの状態のカメラへアクセスしようとした時、以下のようなモーダル表示されます。「ブロック」を選択するとdeniedに切り替わり、「許可する」を選択するとgrantedに状態が切り替わります
    

例えば、カメラへのアクセス権限は、以下のようなコードで確認できます。

const confirmMyPermission = async (name) => {
  await navigator.permissions.query({ name }).then(permission => {
    console.log(name,'へのアクセス権限：', permission.state)
  })
}

confirmMyPermission('camera')　// 「camera へのアクセス権限: prompt」など、アクセス権限の状態が出力される

アクセス権限に応じてユーザーへの適切なアクションを分岐させることができます。例えば、deniedされている場合の処理を仕込めば、ユーザーに権限の再確認を求めることができます。

const confirmMyPermission = async (name) => {
  await navigator.permissions.query({ name }).then(permission => {
    console.log(name,'へのアクセス権限：', permission.state)
    if (permission.state === 'denied') {
      window.alert('アクセス権限が拒否されています。アクセス権限を確認してください。')
    }
  })
}

3 その他メソッド

Permissions APIには、Permissions.query()の他にも以下のようなメソットがありますが、2024年4月の段階でブラウザ未対応または非推奨の状態です。

• Permissions.request()
  • ブラウザ未対応。特定の機能の使用権限を要求する。
• Permissions.requestAll()
  • ブラウザ未対応。指定された複数機能の使用権限を要求する。
• Permissions.revoke()
  • 非推奨。設定されている特定の機能へのアクセス権限をpromptに戻す。

最新のブラウザサポート状況は以下をご参照ください。

https://developer.mozilla.org/ja/docs/Web/API/Permissions_API#ブラウザーの互換性

4 参考

https://w3c.github.io/permissions/

https://developer.mozilla.org/ja/docs/Web/API/Permissions