發布日期：2025 年 6 月 6 日
瞭解 Chrome 新版建議的 <permission> 元素如何打造更精簡、可信賴且符合情境的權限體驗。
Chrome 團隊設計了 <permission> 元素提案，讓使用者能控制強大的功能。這個元素可讓開發人員打造流暢的端對端體驗，讓使用者在特定情境下允許使用這些功能，同時避免不必要的干擾。這組案例研究說明新元素在實際應用中的運作方式。
要求權限的問題
如要使用位置資訊、相機或麥克風等裝置功能，使用者通常必須面對可能出現多個權限要求的情況，這可能會讓使用者感到不便。對於開發人員而言，呼叫 API 以使用功能非常簡單，結果會是成功或失敗。不過，這對使用者來說，往往會導致干擾性和不合時宜的提示，以及看似最終決定的行為，造成挫折感和認知負擔。
如今的權限提示經常讓使用者想著：「為什麼這個網站需要 (現在) 這項權限？」這種不清楚的情況通常會導致使用者選擇拒絕權限要求。為避免日後打斷使用者操作，Chrome 會在之後禁止進一步提示，但這會導致相反的難題，也就是如果使用者日後改變心意，就必須撤銷這些拒絕。這可能導致使用者完全放棄功能或網站。
為使用者提供情境控制
建議的 <permission> 元素代表網站權限的使用者體驗有重大進展。這個建議的 HTML 元素可讓您直接在網站設計中，無縫整合可設定樣式的瀏覽器控制入口，以便使用強大的功能 (例如在視訊通話中使用清楚的「使用相機」按鈕)。您可以自由調整樣式，瀏覽器則會控管核心文字和圖示，確保安全性、一致性和無障礙性。也就是說，與這個元素的互動可清楚傳達使用者的意圖，讓瀏覽器能有助於引導使用者做出必要的決定，並完成其他步驟。這與以程式輔助觸發的提示不同，因為瀏覽器缺乏使用者意圖的直接信號，因此必須隨時在提供實用資訊和避免中斷之間取得平衡。
<permission> 元素示例實作。
以下是這項功能可帶來的使用體驗轉變：
- 使用者啟動：這類元素的設計目的，是讓使用者選擇相關功能時，由他們自行啟動提示，而非由網站啟動。
- 相關情境要求：由於建議的
<permission>元素是網站流程的一部分，使用者會瞭解需要哪些權限。例如，他們點按按鈕尋找附近的商店，因此定位要求是合理的。 - 全面的疑難排解：由於瀏覽器會直接取得使用者意圖的信號，因此可以主動引導使用者完成所有平台特定步驟，以便存取功能。舉例來說，如果網站可以透過深層連結存取系統設定，協助使用者變更裝置層級的相機設定，就不需要提供平台專屬的疑難排解步驟。
- 簡化權限復原程序：建議的
<permission>元素可讓使用者直接在頁面中變更先前遭拒絕的權限，無須前往瀏覽器設定。點選元素會觸發特殊版本的權限提示，進而大幅改善復原功能。
<permission> 元素可讓使用者快速變更權限設定，不必前往網站設定。
這種做法可實現更直覺、可信且由使用者主導的互動模式。
個案研究
Zoom 使用 <permission> 元素，在瀏覽器中將攝影機和麥克風擷取錯誤率降低 46.9%，為使用者提供協助
難題
會議網站面臨的最大挑戰之一，就是協助先前拒絕攝影機或麥克風存取權的使用者，在加入視訊通話時重新啟用權限。標準流程需要在會議網站介面外瀏覽瀏覽器設定。
方法
Zoom 針對 <permission> 元素影響的測試方法，是使用前後比較，其中 <permission> 元素會向所有透過 Chrome 桌面版網頁瀏覽器加入 Zoom 會議的 Zoom 使用者公開。
結果
攝影機和麥克風擷取率是 Zoom 的一項重要指標，用來評估使用者在瀏覽器中加入 Zoom 會議時，是否成功啟用攝影機和麥克風。縮放功能在 <permission> 元素方面有重大改善。瀏覽器體驗的失敗情形 (例如系統層級或瀏覽器層級未啟用麥克風和攝影機，或是使用者關閉瀏覽器的麥克風和攝影機權限提示) 減少了 46.9%。
<permission> 元素不僅有助於減少錯誤，也能協助最初遇到問題或誤拒存取權的使用者復原及設定麥克風和攝影機，讓使用者能專注於對話和會議，清楚看到並聽到所有人的聲音。
Immobiliare.it 使用 <permission> 元素，協助使用者在先前拒絕授權的情況下使用地圖位置功能
難題
如果使用者先前拒絕在 Immobiliare.it 網站上共用位置資訊的網站權限，就必須存取瀏覽器的網站設定，並手動解鎖權限，才能視需要再次授予位置資訊存取權。
方法
Immobiliare.it 使用 Permissions API JavaScript 方法，檢測使用者是否已授予網站位置存取權，藉此改善位置存取權要求流程。如果使用者已分享權限，這會導致要求位置資訊 getCurrentPosition() 方法，如果 Permission API 傳回使用者封鎖位置權限的訊息，網站會顯示提示，說明為何地理位置按鈕無法運作，並使用 <permission> 元素做為行動號召。
只要點選「使用位置資訊」<permission> 元素，使用者就能視需要順暢地分享位置資訊權限，即使先前已封鎖，也不需要使用者存取瀏覽器設定。
<permission> 元素 (如果先前已封鎖權限)。<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 上測試
<permission>元素的所有可用功能 (自 Chrome 137 版起)
整合 <permission> 元素
<permission> 元素的設計目的，是讓開發團隊輕鬆採用。由於這是一般 HTML 元素，因此可像其他按鈕一樣整合，並根據瀏覽器控制的限制自訂樣式，以配合網站的外觀和風格。如果瀏覽器尚未支援 <permission> 元素，開發人員可以使用現有的權限要求方法提供備用體驗。詳情請參閱「<permission> 元素的強化功能」。
打造更實用、更直覺的網路
Google 一直致力於讓 Chrome 和網路平台更安全、更快速，也更實用。<permission> 元素代表著朝向更直覺且符合人體工學的網站權限模型邁出的重要一步。<permission> 元素可為使用者提供明確的使用情境和控制權，協助彌補強大網頁功能與使用者信任之間的差距，讓使用者在網路上享有更豐富、更吸引人的體驗。我們建議產品擁有者和開發團隊探索 <permission> 元素如何提升使用者歷程，並發揮網頁應用程式的全部潛力。