User-Agent vs. Feature Detection: nên dùng gì, khi nào và như thế nào?

Tổng quan

Khi cần cung cấp tính năng khác nhau tùy theo môi trường trình duyệt hoặc thiết bị, User-Agent Sniffing và Feature Detection là hai cách tiếp cận tiêu biểu.
Gần đây, việc ưu tiên Feature Detection xét về khả năng bảo trì và bảo mật được khuyến nghị hơn.

---

1. User-Agent Sniffing

Đây là phương pháp phân tích chuỗi User-Agent để nhận diện thiết bị hoặc trình duyệt.
Nó hữu ích trong việc xác định model thiết bị, nhưng nhạy cảm với các bản cập nhật và đang dần bị hạn chế sử dụng do các chính sách tăng cường bảo vệ quyền riêng tư.

navigator.userAgentData.getHighEntropyValues(['model', 'platform'])  

---

2. Feature Detection

Đây là phương pháp kiểm tra trực tiếp xem tính năng có được hỗ trợ hay không rồi phân nhánh điều kiện.
Có thể áp dụng an toàn và linh hoạt mà không phụ thuộc vào loại trình duyệt hay thiết bị.

if ('fetch' in window) {  
  // sử dụng fetch API  
}  

---

3. Thư viện: Modernizr & Sniffr

Modernizr là thư viện giúp triển khai Feature Detection thuận tiện hơn, và có thể build chỉ với những tính năng mong muốn.
Sniffr là thư viện giúp parse thông tin dựa trên User-Agent một cách dễ dàng.

---

4. Khả năng phát hiện theo từng nền tảng

• Android có thể trích xuất đến cả tên model (SM-xxxx, v.v.)
• iOS có thể phân biệt iPhone/iPad nhưng việc nhận diện model bị hạn chế
• Mac/Windows có thể kiểm tra đến phiên bản OS nhưng khó nhận diện thiết bị

---

5. Các thông tin khác có thể phát hiện

• Số lõi CPU: navigator.hardwareConcurrency
• Dung lượng bộ nhớ: navigator.deviceMemory
• Tốc độ mạng: navigator.connection.effectiveType

---

6. Ví dụ về cách tiếp cận kết hợp

Cũng có thể kết hợp User-Agent và Feature Detection để phát hiện môi trường tinh vi hơn.
Ví dụ: đồng thời xác định model có notch, có phải Apple Silicon hay không, và trạng thái hỗ trợ tính năng

environment.supportsServiceWorker = 'serviceWorker' in navigator;  

---

7. Chuẩn bị cho tương lai: Privacy Sandbox và User-Agent Reduction

Google đang thu gọn chuỗi User-Agent, và để thích ứng với điều này, việc sử dụng User-Agent Client Hints API được khuyến nghị.
API này cung cấp thông tin người dùng theo cách có cấu trúc hơn và thân thiện hơn với quyền riêng tư.

navigator.userAgentData.getHighEntropyValues(['platform', 'model']);  

---

Kết luận

• Về cơ bản, hãy ưu tiên Feature Detection
• Giảm thiểu phát hiện dựa trên User-Agent, và khi cần thì tận dụng công nghệ/API mới nhất
• Để thích ứng với các tiêu chuẩn trong tương lai, cũng nên chuẩn bị các cách tiếp cận mới như Client Hints.