發布日期：2025 年 6 月 6 日
瞭解 Chrome 新提案的 <permission> 元素如何打造更簡化、值得信賴且符合情境的權限體驗。
Chrome 團隊設計了 <permission> 元素提案，讓使用者掌控強大的功能。開發人員可透過這個元素打造流暢的端對端體驗，讓使用者在特定情境中允許使用這些功能，同時避免不必要的干擾。這組案例研究說明新元素在實務上的運作方式。
要求權限的問題
如要使用裝置功能 (例如位置資訊、相機或麥克風)，使用者通常需要處理多項權限要求，過程可能令人感到困擾。對開發人員來說，呼叫 API 來使用功能很簡單，結果不是成功就是失敗。但對使用者來說，這通常會導致系統在不適當的時機顯示提示，以及做出令人困惑的最終決策，進而造成挫敗感和認知負荷。
目前，權限提示經常會讓使用者感到疑惑：「為什麼這個網站需要這項權限 (現在)？」如果使用者不清楚要求權限的原因，通常會選擇拒絕。為避免日後干擾使用者，Chrome 會禁止進一步提示，但如果使用者之後改變心意，就必須反向解決這些拒絕要求。這可能導致使用者放棄使用功能或完全離開網站。
提供情境控制選項給使用者
提議的 <permission> 元素代表網頁權限人體工學的重大演進。這個提議的 HTML 元素可讓您在網站設計中，無縫整合可設定樣式但由瀏覽器控制的進入點，以使用強大的功能 (例如視訊通訊中的「使用相機」按鈕)。您可享有樣式彈性，瀏覽器則會控管核心文字和圖示、確保安全性、一致性和無障礙功能。也就是說，與這個元素互動可做為使用者意圖的明確信號，讓瀏覽器引導使用者做出必要決定及採取其他步驟。這與以程式輔助觸發的提示形成對比，因為瀏覽器缺少使用者意圖的直接信號，因此必須一律在提供協助與避免干擾之間取得平衡。
<permission> 元素範例實作方式。
這項功能如何提升體驗：
- 使用者啟動：元素會確保使用者選擇何時要使用相關功能，而不是由網站啟動提示。
- 情境內要求：由於建議的
<permission>元素是網站流程的一部分，使用者會瞭解為何需要這項權限。他們點選按鈕 (例如尋找附近的商店)，因此要求提供位置資訊是合理的。 - 全面疑難排解：由於瀏覽器會直接收到使用者意圖的信號，因此可以主動引導使用者完成存取功能所需的所有平台專屬步驟。舉例來說，網站可以深層連結至系統設定，協助使用者變更裝置層級的相機設定，不必提供平台專屬的疑難排解步驟。
- 簡化權限復原程序：建議的
<permission>元素可讓使用者直接在網頁上變更先前拒絕的權限，不必前往瀏覽器設定。點選元素會觸發特殊版本的權限提示，大幅提升復原率。
<permission> 元素快速變更權限設定，不必前往網站設定。
這項做法可讓互動模式更直覺、值得信賴，且以使用者為中心。
個案研究
Zoom 運用 <permission> 元素，將瀏覽器中的攝影機和麥克風擷取錯誤減少 46.9%，協助使用者解決問題
難題
會議網站面臨的最大挑戰之一，就是協助先前拒絕攝影機或麥克風存取權的使用者，在加入視訊通話時重新啟用權限。標準流程需要離開會議網站介面，前往瀏覽器設定。
方法
Zoom 測試 <permission> 元素影響的方式是進行前後比較，讓所有透過桌機 Chrome 網頁瀏覽器加入 Zoom 會議的 Zoom 使用者，都能看到 <permission> 元素。
結果
Zoom 的重要指標之一是攝影機和麥克風擷取率，這項指標會評估使用者在瀏覽器中加入 Zoom 會議時，是否成功啟用攝影機和麥克風。Zoom 元素<permission>
大幅改善了效能。瀏覽器體驗失敗次數 (例如系統層級或瀏覽器層級未啟用麥克風和攝影機，或使用者關閉瀏覽器的麥克風和攝影機權限提示) 減少了 46.9%。
<permission> 元素不僅有助於減少錯誤，也協助最初遇到問題或誤拒存取權的使用者復原及設定麥克風和攝影機，讓使用者專心參與對話和會議，確保每個人都能清楚看到和聽到彼此的聲音。
Immobiliare.it 如何使用 <permission> 元素，協助使用者在先前拒絕權限後使用地圖位置資訊功能
難題
如果使用者先前在 Immobiliare.it 網站上拒絕共用位置資訊的網站權限，必須存取瀏覽器的「網站設定」，手動解除鎖定權限，才能視需要再次授予位置資訊權限。
方法
Immobiliare.it 使用 Permissions API JavaScript 方法，偵測使用者是否已授予網站位置存取權，藉此改善位置存取權要求流程。如果他們已分享權限，這會導致系統像先前一樣要求存取地理位置 getCurrentPosition() 方法。如果 Permission API 回報使用者封鎖了位置資訊權限，網站會顯示提示，說明「地理位置」按鈕無法運作的原因，並使用 <permission> 元素做為號召性動作。
使用者只要點選「使用位置資訊」<permission>元素，即可順暢地分享位置資訊權限 (如果需要)，即使先前已封鎖權限，也不必存取瀏覽器設定。
<permission> 元素的訊息 UX。<permission> 元素觸發了瀏覽器權限提示。成果
使用 <permission> 元素後，地理位置權限使用者流程的成功率提高了 20%，這表示使用 Permissions API 和 <permission> 元素的新權限流程，可協助更多使用者在需要時再次允許權限，即使他們過去封鎖了這類權限要求也一樣
ZapImóveis (OLX BR) 透過 <permission> 元素，強化預期用途的地區搜尋功能
ZapImóveis 是巴西首屈一指的房地產平台，深知尋找完美房產通常從地點開始。ZapImoveis 是知名 Grupo OLX 集團的一員，為數百萬名使用者提供全國各地待售和待租的房屋、公寓、土地和其他房地產。ZapImóveis 瞭解位置資訊搜尋在這項程序中扮演的重要角色，因此發現有機會解決與瀏覽器權限提示相關的常見問題，進而提升使用者體驗。
難題
ZapImóveis 發現位置搜尋功能有重大可用性問題，特別是與標準瀏覽器權限提示相關。使用者在首次授予位置存取權時遇到困難，而更嚴重的是，他們在先前拒絕授權後，嘗試重新啟用權限時也遇到困難。這對整體使用者體驗造成負面影響，且可能阻礙網站上位置資訊搜尋功能的效用。
方法
為解決這些可用性問題，ZapImóveis 進行了 A/B 測試。在這項測試中，<permission> 元素會向部分使用者顯示。目標是在 ZapImóveis 介面中提供專用的網頁內控制項，方便管理位置資訊權限，進而簡化權限工作流程，讓使用者操作起來更直覺。
成果
導入 ZapImóveis 的 <permission> 元素後，地點搜尋的可用性顯著提升，尤其對主動使用適地性功能的使用者而言更是如此。對於一開始無法順利回應標準瀏覽器權限提示的使用者，<permission> 元素提供的網頁內控管機制，可讓 4.3% 的使用者成功授予位置存取權。此外，這項功能大幅提升了權限復原率，先前拒絕授權的使用者中，有 54.4% 在之後嘗試使用需要位置資訊的功能時，成功重新授予權限。雖然一開始授予權限的平均時間略有增加，但對於意圖明確的使用者來說，功能成功率大幅提升，因此這項取捨是值得的。
查看更多 <permission> 元素實際運作的範例
- 使用 Chrome 瀏覽器在 Google Meet 發起視訊會議通話。
- 在 Google 搜尋上搜尋附近的餐廳 (逐步推出)
- 在 https://permission.site/pepc (Chrome 137 以上版本) 測試
<permission>元素的所有可用功能
整合 <permission> 元素
<permission> 元素的設計宗旨是讓開發團隊輕鬆採用。這個元素是常見的 HTML 元素，因此可以像其他按鈕一樣整合，並根據網站的外觀和風格設定樣式 (在瀏覽器控制的限制內)。對於尚未支援 <permission> 元素的瀏覽器，開發人員可以使用現有的權限要求方法提供備用體驗。詳情請參閱「<permission> 元素強化功能」。
讓網路更實用且直覺易用
Google 一直致力於提升 Chrome 和網路平台的安全性、速度和實用性。<permission> 元素代表網頁權限的直覺式人體工學模型邁出重要一步。<permission> 元素可為使用者提供清楚的背景資訊和控制權，有助於彌合強大的網路功能與使用者信任感之間的差距，在網路上提供更豐富、更引人入勝的體驗。我們建議產品擁有者和開發團隊探索如何運用 <permission> 元素提升使用者歷程，並充分發揮網頁應用程式的潛力。