重新思考權限請求：<geolocation>元素讓使用者搞清楚狀況後主動允許

很多網站一打開就會跳「權限請求」的視窗，使用者第一個反應通常是：「為什麼要我的位置」、「我連內容都還沒看為何就要我訂閱」、「為什麼要我的xx存取權」，結果就是使用者直接拒絕。

Chrome 144 新增的 <geolocation>就是在處理這類問題：在使用者理解網站功能後，讓權限請求從網站方變成使用者自己主動要求。

<geolocation> 在做什麼

• 一定要使用者點擊後才會問權限
  不是 JavaScript 自己跳視窗，使用者已有心理準備。
• 請求發生在有情境的地方
  例如「找附近店家」按鈕，點了才要位置，很直覺。
• 之前拒絕過，也還有回頭路
  不用叫使用者自己跑去翻瀏覽器或系統設定。
• 開發者少寫一堆平台判斷
  權限流程、系統層級阻擋，瀏覽器幫忙處理。

它不是突然冒出來的

一開始 Chrome 是用一個比較泛用的 <permission> 元素做測試，從 Chrome 126 到 143 都在 origin trial。

後來發現，與其什麼權限都塞在同一個元素，不如拆成「用途明確」的元素比較好用，所以才有現在的 <geolocation>。

相關文章：對 <permission> 元素的再強化。

實際怎麼用

用法很單純，就是把它當成一個 HTML 控制項放在畫面上。若瀏覽器不支援，仍可用自己的button：

  <geolocation>
    onlocation="handleLocation(event)"
    autolocate
    accuracymode="precise"
    <button onclick="navigator.geolocation.getCurrentPosition(updatePosition)">
      不支援時使用這個button
    </button>
  </geolocation>

屬性設定

• autolocate：在這個geolocation元素載入時，自動嘗試擷取位置資訊。
• accuracymode："precise" 或 "approximate" （定位的程度，對應以前的enableHighAccuracy: true / false）。
• watch：持續觸發事件。
• position：在可用時會回傳 GeolocationPosition（coords、timestamp）。
• error：唯讀屬性，如果要求失敗，會回傳 GeolocationPositionError。

樣式

為避免誤導使用者，瀏覽器會對<geolocation>強制執行一些樣式：

• 顏色對比度至少為3。
• opacity:1、visibility: visible。
• 強制寬度、高度和字體大小的最小和最大界限。
• 停用負邊界或外框偏移（margin: max(0px, user-value);outline-offset: max(0px, user-value);）。
• 限制扭曲效果（transform 只允許一般的2D縮放和拉伸）。
• 支援以狀態為基礎的樣式，例如：granted (權限處於啟用狀態時)。

若你的瀏覽器已支援，你可以看到這裡有一個「使用精確位置」的按鈕，你可以試著點擊看看它的效果：

這個設計的實際回饋

之前在 <permission> 試驗階段，已經有實際網站驗證過「使用者主動點擊」這個模型，並給予回饋。

• Zoom：瀏覽器體驗失敗次數減少 46.9%。
• Immobiliare.it：位置權限流程成功率提升約 20%。
• ZapImóveis：曾拒絕的使用者，有 54.4% 願意重新授權。

雖然第一次點下去到授權的時間稍微變長，但因為都是「真的想用」的使用者，網站功能運作的成功率反而更高。

總結

<geolocation> 不是新 API，而是把「要位置權限」這件事用正確的方式說清楚。

對使用者來說比較安心，對開發者來說流程更單純，也比較符合現在對使用者信任的期待。