ใช้ navigator.userAgent String เพื่อตรวจจับ Browser แต่ ไม่แนะนำให้ใช้ใน Production (Unreliable, Spoofable) ควรใช้ Feature Detection แทน
ตัวอย่างโค้ด (Legacy Approach)
<html>
<head>
<title>Browser Detection Example</title>
</head>
<body>
<script>
var userAgent = navigator.userAgent;
var opera = (userAgent.indexOf('Opera') != -1);
var ie = (userAgent.indexOf('MSIE') != -1);
var gecko = (userAgent.indexOf('Gecko') != -1);
var netscape = (userAgent.indexOf('Mozilla') != -1);
var version = navigator.appVersion;
if (opera) {
document.write("Opera based browser");
} else if (gecko) {
document.write("Mozilla based browser");
} else if (ie) {
document.write("IE based browser");
} else if (netscape) {
document.write("Netscape based browser");
} else {
document.write("Unknown browser");
}
document.write("<br /> Browser version info : " + version );
</script>
</body>
</html>
ทำไม User Agent Sniffing ไม่ดี
- Spoofable: User เปลี่ยน UA String ได้
- Complex/Inconsistent: UA String ยาว ซับซ้อน แตกต่างทุก Version
- Maintenance Hell: Browser ใหม่ออกตลอด ต้อง Update Logic ตลอด
- Wrong Assumptions: Chrome Report "Mozilla", "WebKit", "Chrome", "Safari" ทั้งหมด
แนวทางที่ดีกว่า: Feature Detection
// ❌ Bad: Browser Detection
if (isChrome) { useChromeFeature(); }
// ✅ Good: Feature Detection
if ('serviceWorker' in navigator) { /* Support Service Worker */ }
if ('IntersectionObserver' in window) { /* Support IntersectionObserver */ }
if (document.documentElement.style.grid !== undefined) { /* Support CSS Grid */ }
// ✅ Modern: @supports (CSS) หรือ Dynamic Import
if (CSS.supports('display', 'grid')) { ... }
Navigator Properties ที่ใช้ได้
| Property | คำอธิบาย |
|---|---|
navigator.userAgent | Full UA String (Legacy Detection) |
navigator.appVersion | Version String |
navigator.platform | Platform (Win32, MacIntel, Linux x86_64) |
navigator.language | Preferred Language (th-TH, en-US) |
navigator.languages | Array of Preferred Languages |
navigator.onLine | Online/Offline Status |
navigator.cookieEnabled | Cookie Enabled? |
navigator.doNotTrack | Do Not Track Setting |
navigator.hardwareConcurrency | CPU Cores |
navigator.deviceMemory | Device Memory (GB) |
navigator.maxTouchPoints | Touch Points |
Modern Browser Detection (ถ้าจำเป็นจริงๆ)
// ใช้ Library: ua-parser-js, bowser
import UAParser from 'ua-parser-js';
const parser = new UAParser();
const result = parser.getResult();
// result.browser.name, result.browser.version, result.os.name, result.device.type
// หรือ Lightweight
function getBrowser() {
const ua = navigator.userAgent;
if (ua.includes('Edg/')) return 'Edge';
if (ua.includes('OPR/') || ua.includes('Opera')) return 'Opera';
if (ua.includes('Chrome') && !ua.includes('Edg/')) return 'Chrome';
if (ua.includes('Firefox')) return 'Firefox';
if (ua.includes('Safari') && !ua.includes('Chrome')) return 'Safari';
return 'Unknown';
}
สรุป
อย่าใช้ Browser Detection ใช้ Feature Detection แทน ถ้าจำเป็นต้องรู้ Browser ให้ใช้ Library ที่ Maintain อยู่ (ua-parser-js)
