ウェブの発展に伴い、ブラウザにも様々な機能へアクセスするAPIが整備されてきました。現在では、位置情報や加速度センサーなど、従来ならネイティブアプリでしか利用できなかった機能も、ブラウザ上から使用できるようになっています。
そして、それらの機能を使用するには、当然パーミッション（アクセス権限）が必要になります。しかしパーミッションの確認・要求の方法はAPIによって異なっており、開発者を大きく混乱させてきました。
そこで現在策定中なのがPermissions APIです。Permissions APIを使うことで、簡単にパーミッションを得ることができるようになります。
Permissions APIについて
Permissions APIは、ブラウザのパーミッションを統一的に扱うことができるAPIです。従来ではAPIごとに異なる方法でのパーミッションの取得が必要でしたが、Permissions APIを使うことで、一貫性をもってパーミッションを管理することができます。
最新の仕様は以下になります：
実装状況
Permissions APIは現在策定中のAPIで、ブラウザ側の実装はまだ出揃っていません。
Permissions APIの各機能の実装状況は以下のようになります：
- パーミッションを確認する
- Chrome
- Firefox
- パーミッションを要求する
- なし
- パーミッションを取り消す
- Firefox（フラグ付き）
パーミッションを確認する – query
Permissions APIの最も基本的な使い方は、現在のパーミッションを確認することです。この機能はChromeとFirefoxが既に実装済みです。
パーミッションを確認するには、navigator.permissions.queryを呼び出します。例えば位置情報のパーミッションを確認するには以下のようにします：
navigator.permissions.query({name:'geolocation'});ここでqueryはPromiseを返します。このPromiseはPermissionStatusオブジェクトとして解決されます。
navigator.permissions.query({name:'geolocation'})
.then((result) => {
// なんらかの処理。
});PermissionStatusオブジェクトにはstateプロパティとonchangeプロパティがあります。
stateプロパティは’granted’、’prompt’、’denied’のいずれかの値になります。これらの値の意味は以下の通りです：
- ‘granted’ – パーミッションを得ており、使用可能です。
- ‘prompt’ – ユーザーの確認が必要です。
- ‘denied’ – パーミッションがなく、使用不可能です。
これらの値によって処理を変えることで、パーミッションに応じた処理が可能になります。例えば以下のようにします：
navigator.permissions.query({name:'geolocation'})
.then((result) => {
if(result.state == 'granted') {
console.log('使用できます。')
} else if(result.state == 'prompt') {
console.log('確認が必要です。')
} else if (result.state == 'denied') {
console.log('許可されていません。')
}
result.onchange = () => {
console.log('パーミッションが変更されました。');
}
});問い合わせできるパーミッションの種類
位置情報だけではなく、以下のパーミッションを確認することができます。各パーミッションの詳細は省きます。
- geolocation
- notifications
- push
- midi
- camera
- microphone
- speaker
- device-info
- background-sync
- bluetooth
- persistent-storage
- ambient-light-sensor
- accelerometer
- gyroscope
- magnetometer
- clipboard
より詳しいパーミッションを確認する
パーミッションによっては、単に名前だけでなく、より詳しい情報が必要になることがあります。
例えばWebMIDI APIでは、sysex機能が重要になることがあります。このとき、sysex有りでのパーミッションを確認するには以下のようにします：
navigator.permissions.query({name: 'midi', sysex: true});このようにしてname以外のオプションを付与することによって、詳細なパーミッションを問い合わせることができます。
複数のパーミッションを同時に確認する
複数のパーミッションを同時に確認したい場合、Promise.allを使用してください。
Promise.all([
navigator.permissions.query({ name: 'geolocation' }),
navigator.permissions.query({ name: 'notifications' })
])
.then(([geolocationStatus, notificationStatus]) => {
console.log(geolocationStatus.state);
console.log(notificationStatus.state);
});パーミッションを要求する – request
パーミッションを要求するには、navigator.permissions.requestを使用します。requestを実行すると、確認ダイアログが表示されます。これを実装しているブラウザは、まだありません。
使用方法はqueryと同じです。
navigator.permissions.request({name: 'geolocation'})
.then((result) => {
console.log(result.state);
});queryのときと同様に、より詳しいパーミッションを得るためには、name以外の値も指定します。
パーミッションを取り消す – revoke
パーミッションを取り消してデフォルトの値に戻すには、navigator.permissions.revokeを使用します。これはFirefoxがフラグ付きで実装済みです。
navigator.permissions.revoke({name: 'geolocation'})
.then((result) => {
console.log(result.state);
});使用方法はqueryやrequestと同じです。取り消されたパーミッションは一般的には’prompt’に戻ります。