User-Agent เทียบกับ Feature Detection: อะไรควรใช้เมื่อไรและอย่างไร?

ภาพรวม

เมื่อจำเป็นต้องให้ฟังก์ชันการทำงานแตกต่างกันตามสภาพแวดล้อมของเบราว์เซอร์หรืออุปกรณ์ แนวทางหลักที่นิยมใช้คือ User-Agent Sniffing และ Feature Detection
ในช่วงหลังมานี้ มีการแนะนำให้ให้ความสำคัญกับ Feature Detection ในด้านการบำรุงรักษาและความปลอดภัย เป็นลำดับแรก

---

1. User-Agent Sniffing

เป็นวิธีวิเคราะห์สตริง User-Agent เพื่อระบุอุปกรณ์หรือเบราว์เซอร์
มีประโยชน์ในการระบุรุ่นอุปกรณ์ แต่ไวต่อการอัปเดต และกำลังถูกจำกัดการใช้งานมากขึ้นจากการเข้มงวดด้านนโยบายความเป็นส่วนตัว

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

---

2. Feature Detection

เป็นวิธีตรวจสอบว่าฟีเจอร์นั้นรองรับหรือไม่ แล้วจึงแยกเงื่อนไขการทำงาน
สามารถนำไปใช้ได้อย่างปลอดภัยและยืดหยุ่น โดยไม่ขึ้นกับชนิดของเบราว์เซอร์หรืออุปกรณ์

if ('fetch' in window) {  
  // ใช้ fetch API  
}  

---

3. ไลบรารี: Modernizr & Sniffr

Modernizr เป็นไลบรารีที่ช่วยให้ทำ Feature Detection ได้สะดวก โดยสามารถบิลด์ให้รวมเฉพาะฟีเจอร์ที่ต้องการได้
Sniffr เป็นไลบรารีที่ช่วยพาร์สข้อมูลบนพื้นฐาน User-Agent ได้อย่างง่ายดาย

---

4. ความเป็นไปได้ในการตรวจจับแยกตามแพลตฟอร์ม

• Android สามารถดึงได้ถึงชื่อรุ่น (เช่น SM-xxxx)
• iOS แยกได้ว่าเป็น iPhone/iPad แต่การระบุรุ่นมีข้อจำกัด
• Mac/Windows ตรวจสอบได้ถึงเวอร์ชัน OS แต่ระบุอุปกรณ์ได้ยาก

---

5. ข้อมูลอื่นที่ตรวจจับได้

• จำนวนคอร์ CPU: navigator.hardwareConcurrency
• ปริมาณหน่วยความจำ: navigator.deviceMemory
• ความเร็วเครือข่าย: navigator.connection.effectiveType

---

6. ตัวอย่างแนวทางแบบผสม

สามารถผสาน User-Agent และ Feature Detection เพื่อให้ตรวจจับสภาพแวดล้อมได้ละเอียดขึ้น
ตัวอย่าง: ตรวจจับรุ่นที่มีรอยบาก, การเป็น Apple Silicon และการรองรับฟีเจอร์ไปพร้อมกัน

environment.supportsServiceWorker = 'serviceWorker' in navigator;  

---

7. การรับมืออนาคต: Privacy Sandbox และ User-Agent Reduction

Google กำลังลดรายละเอียดของสตริง User-Agent และเพื่อรองรับการเปลี่ยนแปลงนี้ จึงมีการแนะนำให้ใช้ User-Agent Client Hints API
API นี้ให้ข้อมูลผู้ใช้ในรูปแบบที่มีโครงสร้างมากกว่าและเป็นมิตรต่อความเป็นส่วนตัวมากกว่า

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

---

สรุป

• โดยพื้นฐานควรให้ Feature Detection มาก่อน
• ลดการตรวจจับบนพื้นฐาน User-Agent ให้เหลือน้อยที่สุด และหากจำเป็นให้ใช้เทคโนโลยีล่าสุด (API)
• เพื่อรองรับมาตรฐานในอนาคต ควรเตรียมแนวทางใหม่อย่าง Client Hints ไว้ด้วย