权限请求模拟器 - 测试各种 API 权限提示

浏览器权限 API 是一组允许网页请求访问用户设备敏感功能（如地理位置、摄像头、麦克风、通知等）的接口。为了保护用户隐私和安全，浏览器会在网页首次请求这些功能时弹出权限提示，用户可以选择授予或拒绝。常见的权限 API 包括 Geolocation API、Notifications API、Media Capture API（摄像头/麦克风）、Clipboard API 等。Permissions API 则允许开发者查询某个权限的当前状态（granted / denied / prompt），而无需实际触发权限请求。

出于安全考虑，浏览器将许多权限 API 归类为"仅限安全上下文"的功能。安全上下文指的是通过 HTTPS 加载的页面或 localhost 环境。这是因为权限 API 涉及用户隐私数据（如位置、音视频流），在非加密的 HTTP 连接上，中间人攻击者可能拦截或篡改这些数据。使用 HTTPS 确保了数据传输的机密性和完整性。自 Chrome 50+ 和 Firefox 55+ 起，Geolocation、getUserMedia、Clipboard 等 API 在非安全上下文中将直接拒绝或抛出错误。建议所有生产环境都使用 HTTPS 部署。

浏览器通常会在用户做出权限决定后持久记住该选择。如果用户之前拒绝了某个权限，再次调用 API 时浏览器不会再次弹出提示，而是直接返回拒绝结果。要重置权限，用户需要手动操作：
Chrome：点击地址栏左侧的锁定图标 → 找到对应权限 → 重置为"询问"
Firefox：点击地址栏左侧图标 → "权限"部分 → 修改设置
Safari：偏好设置 → 网站 → 找到对应权限类型
Edge：与 Chrome 类似，通过地址栏锁定图标管理
开发者无法通过代码强制重置权限，这是浏览器的安全设计。

Permissions API（navigator.permissions.query()）用于查询权限状态，它不会触发权限提示，只是返回当前状态（granted/denied/prompt）。而实际的权限 API（如 navigator.geolocation.getCurrentPosition()）会触发权限请求流程。最佳实践是：先用 Permissions API 检查状态，如果状态为 prompt 再引导用户触发实际请求；如果已授予则直接使用；如果已拒绝则友好提示用户去浏览器设置中修改。不过要注意，Permissions API 本身在 Safari 中的支持较为有限。

移动端浏览器在权限处理上有一些特殊之处：
iOS Safari：对 DeviceOrientation / DeviceMotion 需要显式调用 DeviceOrientationEvent.requestPermission()（iOS 13+）。全屏 API 在 iOS 上行为受限。通知权限在 iOS 上通过 Web Push 需要添加到主屏幕。
Android Chrome：权限提示通常以底部弹窗形式出现。部分权限（如存储访问）在移动端的处理方式不同。
通用差异：移动端通常有更严格的电池和隐私策略，后台权限（如后台位置）受限更多。触摸事件可以满足"用户手势"要求，但编程式触发仍被限制。

用户手势（User Gesture）是指用户通过点击、触摸、按键等方式主动与页面交互的行为。许多权限 API 要求必须在用户手势的上下文中调用，否则会被浏览器静默拒绝。例如：
• 全屏 API（requestFullscreen）必须在用户点击事件处理函数中调用
• 剪贴板写入（navigator.clipboard.writeText）通常需要用户手势
• 通知请求（Notification.requestPermission）在部分浏览器中也需要用户手势
• 支付请求（PaymentRequest.show()）需要用户手势
这个限制防止网站在用户不知情的情况下自动触发权限提示或执行敏感操作。本模拟器的每个按钮点击都是有效的用户手势。

当权限被拒绝时，良好的用户体验设计包括：
1. 不要反复请求：如果用户已拒绝，短时间内不要再次弹出权限提示（会被浏览器自动拦截）
2. 提供替代方案：如无法获取地理位置，允许用户手动输入地址
3. 清晰说明原因：解释为什么需要该权限，以及用户能获得什么价值
4. 引导至设置：提供跳转到浏览器权限设置的指引（但无法直接打开浏览器设置页面）
5. 渐进式降级：确保核心功能在权限缺失时仍可有限使用
6. 使用 Permissions API 监听变化：通过 onchange 事件检测用户是否在浏览器设置中更改了权限，及时更新 UI。