権限プロンプトは、ユーザーのプライバシーとセキュリティを危険にさらす可能性がある強力な機能を保護するためのウェブの主要なメカニズムです。権限プロンプトにより、ブラウザはリクエスト元のウェブサイトが対象の機能にアクセスすることを許可する意思があることを確認します。権限プロンプトは、メディア キャプチャ（カメラとマイク）、位置情報、ストレージ アクセス、MIDI、通知など、さまざまな API に使用されます（詳しくは、MDN の Permissions API のドキュメントをご覧ください）。
このガイドでは、Chrome の使用統計情報とユーザー調査に基づいて、ユーザーに権限のプロンプトを表示するためのおすすめの方法を説明します。これらのベスト プラクティスに従うことで、ユーザーに表示される不要なプロンプトが減り、デベロッパーが「ブロック」の決定を減らすことができます。最後に、権限制限のある API を使用するためのコードパターンと、ブロック状態からのユーザーの復元をサポートするためのベスト プラクティスについて説明します。
プロンプトのベスト プラクティス
ユーザーの操作後、ユーザーが質問する理由と許可するメリットをユーザーが理解できるタイミングで、権限をリクエストする必要があります。可能であれば、同じ機能を実現する別の手段をユーザーが使用できるようにする必要があります。一般的なガイドラインとして、リクエストするタイミングを慎重に選択して権限をリクエストする頻度を減らすと、ユーザーが復元が困難なブロック状態になる可能性が低くなります。以下のベスト プラクティスでは、これらの各提案について詳しく説明します。
ページの読み込み時やユーザーの操作なしで確認しない
ページの読み込み時にユーザーに許可を求めることは、ユーザーが実店舗に足を踏み入れる際に機密情報の提供を求めるのと同じことです。権限プロンプト（ニュースレターの登録や Cookie 使用の同意を求めるプロンプトなど）が表示されると、ユーザーは不快に感じます。ユーザーは、質問される理由やメリットを理解できません。
ウェブ アプリケーションが特定の機能へのアクセスがないと動作しない場合でも、その機能が必要な理由をユーザーが理解できるようにする必要があります。たとえば、権限プロンプトの前に、ニーズを説明し、ユーザーに選択肢を提供する独自のプロンプトを表示します（たとえば、可能であれば同じ機能を実現する代替手段を提供する）。ページの読み込み時よりも権限を要求するタイミングが思いつかない場合のために、このガイドの後半にいくつかの例があります。
同様に、許可を求めるのが不適切な状況は、事前のユーザー操作がない状況です（一時的なユーザー アクティベーションとも呼ばれます）。Chrome のテレメトリーによると、パソコン版 Chrome の権限プロンプトの 77% が、ユーザーの意図を示すごく基本的なシグナルなしで示されているため、そのようなプロンプトのうち 12% しか許可されません。ユーザーの操作後、レートを 30% に引き上げます。そのため、ユーザーがなんらかの形でページを操作した後にのみ権限をリクエストしてください。
質問の理由をユーザーが理解できる場合にのみ尋ねる
権限に関する判断は、多くの場合、プライバシーに関する判断となります。Google は、コンテキスト完全性フレームワークに基づき、プライバシーの判断が非常にコンテキストに依存することを理解しています。アクセスが必要な理由を理解することは、この重要な側面と見なすことができます。したがって、ユーザーに価値を提供するために必要な機能（そして実際に価値が得られるとユーザーが同意する可能性が高い）のみをリクエストするようにしてください。また、その機能が役立つ理由がユーザーに明らかな時点で、権限をリクエストする必要があります。これは、ユーザーが使用状況をできるだけ簡単に理解できるようにすることを目的としています。
Google のユーザー調査では、サイトがアクセスをリクエストする理由を理解し、メリットも認識している場合、ユーザーはアクセスを許可する可能性が大幅に高くなることがわかっています。また、アクセスを許可することで得られる価値について理解を深めるために、ユーザーは馴染みのないサイトをまずは探索したいと考えていることがわかりました。その間、多くの場合、権限のプロンプトは閉じたり無視したりします。1 回だけのアクセス許可では、最初に 1 回の訪問を許可する場合があります。アプリは、これらの動作をサポートする必要があります。
同じ機能を実現する代替手段を可能な限り提供する
機能によっては、ユーザーの役に立たない機能もあります。たとえば、GPS センサーが搭載されていないデスクトップ デバイスの位置情報は、そのユーザーが VPN に接続しているために、誤った位置情報を返すことがあります。他のユーザーは、クリップボードへのアクセスを制御し、キーの組み合わせでこれらのイベントを手動でトリガーすることを好むため、その提供を望まない場合があります。このような状況では、同じ結果を達成するための代替手段を用意することが重要です。たとえば、位置情報の利用許可をリクエストする場合は、ユーザーが自分で郵便番号や住所を入力できるテキスト フィールドを提供します。クリップボードを使用する場合は、キーの組み合わせやコンテキスト メニューでも、コピーする要素の選択とコピーが可能であることを確認してください。通知機能では プッシュ通知の代わりに メールによる通知を受け取ることができます
有効なパターンとしては、アクセスが有益である理由の説明としても代替 UI を使用する方法があります。Geolocation API をトリガーするボタンの隣に位置情報を入力するオプションが表示されている場合、ユーザーは住所を入力するだけでよいことを理解しているため、処理の主導権を握っていると感じることができます。同様に、プッシュ通知またはメールで通知を受け取るか、カメラとマイクへのアクセスを許可せずに会議に参加するかの選択肢がある場合、ユーザーはトレードオフをより自然に理解できます。
ブロック状態に陥らないでください。回復は困難です。
権限制限機能へのアクセスをユーザーが恒久的に許可しないことを決定した場合、ブラウザはその決定を尊重します。アクセスのプロンプトを今後も出せるのであれば、悪質なサイトがユーザーにプロンプトを大量に送り続けることになります。そのため、機能のブロック状態から意図的に復元するには、少し手間がかかります。したがって、多くのユーザーがアクセスを許可しない可能性が高い場合は、ユーザーに権限をリクエストしないでください。
これを行う方法として、いわゆる事前プロンプトを使用するのが一般的です。事前プロンプトでは、何が起こるのか、なぜリクエストしようとしている機能がアプリケーションに必要なのかをユーザーに説明します。ブラウザの権限プロンプトをトリガーするのは、このような事前プロンプトに対してユーザーが肯定的な反応を示した場合のみです。ユーザーがその状態からの復旧を正当に必要とする場合もあります。詳しくは、ユーザーがブロック状態から復元できるようサポートするをご覧ください。
第三者のコンテンツに注意する
注意が必要な、予期しない権限プロンプトのソースがあります。サイトにサードパーティのスクリプトを含めると、表示するつもりがない許可を求めるメッセージが表示されることがあります。これは特に、すでに概説されているベスト プラクティスに沿っていないプロンプトを表示すると、ウェブサイトのユーザー エクスペリエンスに影響を与える可能性があります。ユーザー エクスペリエンスを常に管理するには、独自のコードに追加するサードパーティのライブラリやスクリプトのドキュメントをよくお読みください。
権限をリクエストする場合
すでに説明したベスト プラクティスに沿って、権限をリクエストするタイミングの例を以下に示します。
- ユーザーが住所を手動で入力するためのフォーム項目の横にある [現在地を使用] ボタンをクリックした後。
- ユーザーが動画チャンネルまたは投稿に登録し、アップデートがメールや通知としてスマートフォンやデスクトップに配信可能であることを説明するダイアログで、肯定的なボタンをクリックした後。
- ユーザーが、ビデオ通話に参加する準備をするページにアクセスし、事前プロンプトで自分の映像と音声を受け取りたいという肯定的な応答を行うと（こちらの Google Meet のケーススタディをご覧ください）。
権限を要求するコードパターン
API の使用権限を取得する方法は、API によって異なります。一部の API（通常は古いもの）では、API を初めて使用する際にブラウザが自動的に権限をリクエストするモデルが使用されています。たとえば、navigator.geolocation.getCurrentPosition() を呼び出すときの Geolocation API です。
try {
navigator.geolocation.getCurrentPosition((pos) => console.log(pos));
} catch (error) {
console.error(error);
}
他の API では、最初に静的メソッドを使用して権限を明示的にリクエストする必要があるモデルを使用します。その良い例は、通知を許可する Notification.requestPermission() や、あまり一般的でない DeviceOrientationEvent.requestPermission() です。これは Device Orientation Events API の一部です。一部のブラウザでは、特定の API に権限が自動的に付与される場合があります。たとえば、Chrome ではデバイスの向きへのアクセスが常に許可されますが、Safari ではプロンプトが表示されます。
const result = await DeviceOrientationEvent.requestPermission();
console.log(`The user's decision when prompted to use the Device Orientation
Events API was: ${result}.`);
if (result === 'granted') {
/* Use the API. */
}
権限の状態を確認する方法
特定の API を使用できるかどうかを確認するには、Permissions API の navigator.permissions.query() メソッドを使用します。
const result = await navigator.permissions.query({ name: 'geolocation' });
console.log(`The result of querying for the Geolocation API is:
${result.state}.`);
if (result.state === 'granted') {
// Use the API.
}
ブロック状態からのユーザーの復元をサポートする
ユーザーがアクセスに関する問題のトラブルシューティングを行えるようにするには、Permissions API を使用してアクセスのブロックを検出し、設定の変更方法に関するガイドをユーザーに提供します。たとえば、権限制限機能に関連付けられている UI 要素をユーザーが操作する場合は、前のセクションで説明したパターンを使用して、トラブルシューティング ダイアログを開きます。権限の状態を変更する正確な手順はブラウザによって異なるため、ユーザー エージェント文字列に基づいて、またプロダクトで最も一般的に使用されているブラウザで、一致する説明を提供することをおすすめします。
Chrome の場合は、アドレスバーの左側にある調整アイコンをクリックして [サイト管理] に移動する必要があります。ここでそれぞれの権限を オンに切り替えることができます場合によっては、機能を使用する前にページを再読み込みする必要があります。その場合、ウィンドウの上部にメッセージバーが表示され、それぞれのボタンをクリックすると再読み込みを行うことができます。
他のブラウザにも、権限を制御するための同様の UI があります（たとえば、Firefox での動作をご覧ください）。