Các điểm cải tiến đối với phần tử <permission> được đề xuất

Thomas Steiner

Xuất bản: Ngày 12 tháng 5 năm 2025

Phần tử <permission> HTML được đề xuất vẫn đang trong giai đoạn dùng thử theo nguyên gốc, vì nhóm Chrome đang tinh chỉnh phần tử này, dựa trên nền tảng được đặt ra trong bản dùng thử theo nguyên gốc ban đầu. Bài đăng này chia sẻ những điểm cải tiến nhằm mang đến cho bạn sự linh hoạt và khả năng kiểm soát cao hơn khi yêu cầu cấp quyền trong các ứng dụng web. Để biết thông tin tổng quan toàn diện về phần giới thiệu phần tử <permission> và các chức năng ban đầu của phần tử này, hãy tham khảo bài viết trước đây của chúng tôi Thử nghiệm ban đầu cho một phần tử <permission> HTML mới.

Hỗ trợ nội dung cho UX dự phòng

Phần tử <permission> ban đầu được xác định là một phần tử trống không có nội dung cho đến Chrome 136. Từ Chrome 137, API này hỗ trợ nội dung, tức là giờ đây bạn bắt buộc phải đánh dấu nội dung bằng thẻ mở và thẻ đóng:

<permission>
  <!-- optional content -->
</permission>

Thay đổi này cho phép bạn đưa giao diện người dùng dự phòng vào nội dung của phần tử. Các nội dung dự phòng này sẽ xuất hiện trong những trình duyệt không hỗ trợ phần tử <permission> hoặc khi bạn chỉ định một thuộc tính type không được hỗ trợ. Điều này giúp đảm bảo quá trình giảm cấp mượt mà hơn và cải thiện trải nghiệm người dùng trên nhiều môi trường trình duyệt.

<!-- Invalid `type` attribute value -->
<permission type="not-supported">
  <p>Your browser does not support the specified <code>type</code>.</p>
</permission>

Phát hiện tính năng có lập trình chi tiết hơn

Để giúp bạn xác định khả năng hỗ trợ cho các loại quyền cụ thể, chúng tôi đã giới thiệu một phương thức tĩnh, isTypeSupported():

HTMLPermissionElement.isTypeSupported('geolocation');

Phương thức này trả về một giá trị boolean cho biết liệu loại quyền đã chỉ định có được hỗ trợ hay không. Kết hợp với tính năng phát hiện hiện có, typeof HTMLPermissionElement !== 'undefined', giờ đây, bạn có thể lập trình để đảm bảo cả hỗ trợ cho phần tử <permission> và hỗ trợ cho các loại quyền cụ thể.

Xin lưu ý rằng bạn cũng có thể truyền nhiều loại quyền được phân tách bằng khoảng trắng (ví dụ: "camera microphone") và hệ thống sẽ trả về liệu chuỗi tổng thể có phải là giá trị "type" hợp lệ hay không. Ví dụ: việc gọi isTypeSupported() bằng các tham số sau sẽ trả về những kết quả này:

  • "camera" → true
  • "geolocation" → true
  • "camera geolocation" → false (Mặc dù từng loại được hỗ trợ riêng lẻ, nhưng tổ hợp này thì không.)

Tên sự kiện đã cập nhật

Trong Chrome 136, chúng tôi đã giới thiệu 2 sự kiện mới để thay thế các sự kiện trước đó:

  • onpromptdismiss (thay thế ondismiss)
  • onpromptaction (thay thế onresolve)

Những sự kiện mới này cung cấp ngữ nghĩa rõ ràng hơn và phù hợp hơn với hành vi của phần tử. Các sự kiện cũ sẽ bị loại bỏ trong Chrome 138, vì vậy, bạn nên cập nhật trình xử lý sự kiện cho phù hợp.

Hỗ trợ biểu tượng

Chúng tôi đang nỗ lực để bật tính năng hỗ trợ biểu tượng trong phần tử <permission>, dự kiến cho Chrome 138. Tính năng này sẽ cho phép bạn hiển thị các biểu tượng được xác định trước tương ứng với loại quyền, với các lựa chọn hạn chế về kiểu dáng như điều chỉnh màu sắc và kích thước. Thông tin chi tiết chính xác về API vẫn đang được hoàn thiện. 

Các ví dụ sau đây cho thấy màu mặc định, màu nền khác và không có màu nền nhưng có đường viền màu đen.

Kiểu mặc định

Kết xuất biểu tượng mặc định.

Màu mặc định của biểu tượng giống với màu văn bản của phần tử quyền.

Đã sửa đổi kiểu

Các ví dụ sau đây minh hoạ những điểm sửa đổi mẫu đối với kiểu mặc định.

Thay đổi màu biểu tượng

::permission-icon {
  fill: black;
}

Sửa đổi quá trình kết xuất bằng biểu tượng màu đen đồng nhất.

Thay đổi đường viền biểu tượng

::permission-icon {
  fill: white;
  stroke: black;
  stroke-width: 20px;
}

Hình ảnh kết xuất đã được sửa đổi có biểu tượng đường viền màu đen.

Tắt biểu tượng

Sau khi được khởi chạy, biểu tượng này sẽ được bật theo mặc định. Nếu muốn vô hiệu hoá biểu tượng, bạn có thể thực hiện bằng cách sử dụng CSS sau

::permission-icon {
  display: none;
}

Nguyên tắc kiểu

Để biết hướng dẫn toàn diện về cách định kiểu cho phần tử <permission>, bao gồm cả các phương pháp hay nhất và hạn chế, hãy tham khảo hướng dẫn định kiểu <permission>. Tài nguyên này cung cấp hướng dẫn chi tiết để giúp bạn tạo kiểu hiệu quả cho phần tử trong các ứng dụng của mình.

Hỗ trợ mở rộng cho nền tảng và chức năng

Phần tử <permission> hiện hỗ trợ các nền tảng và chức năng bổ sung:

  • Hỗ trợ Android: Phần tử này hiện hoạt động trên các thiết bị Android, mở rộng khả năng áp dụng trên nhiều nền tảng người dùng.
  • Hỗ trợ định vị địa lý: Giờ đây, bạn có thể yêu cầu quyền type="geolocation" bằng cách sử dụng phần tử <permission> với một thuộc tính boolean preciselocation bổ sung. Mặc dù thuộc tính preciselocation chỉ ảnh hưởng đến từ ngữ của câu lệnh, nhưng chúng tôi đang tích cực nỗ lực để phân biệt giữa quyền truy cập vị trí tương đối và chính xác trong các bản cập nhật sau này.

Kết luận

Những điểm cải tiến này đối với phần tử <permission> là một phần trong nỗ lực không ngừng của chúng tôi nhằm đơn giản hoá các yêu cầu cấp quyền và cải thiện trải nghiệm người dùng trên web. Bạn nên thử nghiệm các tính năng mới này và gửi ý kiến phản hồi để giúp chúng tôi tinh chỉnh và phát triển khả năng này.