Site Ziyaretcilerinin Alet ve Tarayicilarini Tespit Etme Yontemi

Benim gibi bir web sitesini işletirken (www.danyelkoca.com) sitenizi ziyaret eden insanlar hakkında bilgi edinmek son derece önemlidir.

Kullanıcılarınızla ilgili önemli bir bilgi, sitenizi ziyaret ettikleri sırada kullandıkları cihaz ve tarayıcıdır.

Neden? Bu bilgi, aşağıdaki gibi örnek eylemlerle sitenizi geliştirmenize yardımcı olabilir:

1. En yaygın olarak kullanılan cihaz ve tarayıcılar hakkında bilgi edinin ve sitenizi buna göre uyarlayın
2. Topluluğun yarar sağlamayacak azınlık cihaz ve tarayıcılara (örneğin, Tablet cihaz, Opera tarayıcısı) öncelik vermekten kaçının
3. Belirli cihazlar ve tarayıcılara özgü desenleri belirleyin (Örneğin, Safari'de belirli bir fonksiyonun kullanılmaması)

Şimdi kodumuza derinlemesine bakalım!

1. Cihaz Tespiti

Cihazı tanımlamak için JavaScript'te window.navigator.userAgent işlevini kullanırız. Bu işlev aşağıdaki gibi bir dize döndürür:

console.log(window.navigator.userAgent);
// >> Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Sonuç, bilgisayarımda gördüğüm şeydir, yani Chrome Tarayıcısı ile kullanılan bir MacBook Pro.

Sonucu analiz edelim:

Bu işlevin sadece cihazı çıkarmadığını görüyoruz

ancak diğer bilgileri de döndürür

Şimdilik, cihazı ifade eden çıktının bir kısmına odaklanıyoruz

Bu, bu web sitesine bir MacBook üzerinden eriştiğimi doğru bir şekilde anlar, ancak bu MacBook'un modeli hakkında bilgi yoktur (Örneğin, Air, Pro)

Ayrıca, birden fazla şeyi yanlış alır. MacBook'um Intel çipi kullanmıyor (M1) ve macOS 10.15.7 kullanmıyor.

Dolayısıyla, cihazı belirlemek için bu işlevi kullanırken, yalnızca cihazı çıkarın, çünkü cihazın modeli ve cihazda çalışan işletim sistemi yanıltıcı olabilir.

userAgent dizesini kullanarak, kullanıcının cihazını, bu StackOverflow yanıtı tarafından verilen koşullara dayanarak mobil veya masaüstü olarak sınıflandırmak için bir regex yazabiliriz.

let userAgentString = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36';
	
function deviceDetection(userAgentString) {
	let device = 'Masaüstü';

	if (
		/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
			userAgentString
		)
	) {
		device = 'Mobil';
	}

	return device;
}

console.log(browserDetection(userAgentString));
// >> Masaüstü

2. Tarayıcı Tespiti

Sadece tarayıcıyı ifade eden çıktıya odaklanalım

userAgent üzerinden tarayıcı tespiti son derece karmaşıktır, çünkü bu çıktı kendisi 3 tarayıcıyı içerir:

1. Mozilla/5.0 (Firefox?)
2. Chrome/120.0.0.0
3. Safari/537.36

MDN Web Dokümantasyonları'na göre, UserAgent dizesini kullanarak tarayıcı hakkında çıkarımda bulunmak için aşağıdaki tablo kullanılabilir:

MDN tarafından belirtilen koşullara dayanarak tarayıcıyı tanımlamak için bir regex yazalım.

let userAgentString = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36';

function browserDetection(userAgentString) {
	let browser = 'bilinmeyen';

	if (/Firefox/.*/.test(userAgentString) && !/Seamonkey/.*/.test(userAgentString))
		browser = 'Firefox';
	else if (/Seamonkey/.*/.test(userAgentString)) browser = 'Seamonkey';
	else if (
		/Chrome/.*/.test(userAgentString) &&
		!/Chromium/.*/.test(userAgentString) &&
		!/Edg.*/.*/.test(userAgentString)
	)
		browser = 'Chrome';
	else if (/Chromium/.*/.test(userAgentString)) browser = 'Chromium';
	else if (
		/Safari/.*/.test(userAgentString) &&
		!/Chromium/.*/.test(userAgentString) &&
		!/Edg.*/.*/.test(userAgentString)
	)
		browser = 'Safari';
	else if (/OPR/.*/.test(userAgentString)) browser = 'Opera 15+ (Blink tabanlı motor)';
	else if (/Opera/.*/.test(userAgentString)) browser = 'Opera 15+ (Presto tabanlı motor)';

	return browser;
}

console.log(browserDetection(userAgentString));
// >> Chrome

Tarayıcıyı başarıyla sınıflandırdık, ki bu gerçekten de Chrome idi. Ancak dikkatli gözler, userAgent dizesimin Safari'nin koşullarını da karşıladığını fark edecektir. Chrome koşulu, Safari'den önce test edildiği için tarayıcı Chrome olarak sınıflandırılır, ancak Chrome'dan önce Safari'yi test etmek her zaman beklenen sonuçları verir mi, bunun için daha fazla test yapılması gerekmektedir.

3. Sonuç

Yukarıdaki 2 işlevi kullanarak - deviceDetection, browserDetection - artık kullanıcılarınızın cihazını ve tarayıcısını başarılı bir şekilde sınıflandırabilirsiniz. window.navigator.userAgent tüm modern tarayıcılarla uyumlu olduğundan, bunu güvenle kullanabilirsiniz. Herhangi bir sorunuz varsa, aşağıdaki yorum bölümünde bana bildirebilirsiniz.

Mutlu kodlamalar!