Geolocation API, kullanıcının izniyle konumunu öğrenmenize olanak tanır.
Geolocation API, kullanıcının izniyle kullanıcının konumunu öğrenmenize olanak tanır. Bu işlevi, kullanıcıyı hedefine yönlendirme ve kullanıcının ürettiği içeriği coğrafi olarak etiketleme (ör. bir fotoğrafın nerede çekildiğini işaretleme) gibi işlemler için kullanabilirsiniz.
Geolocation API, kullanıcının nerede olduğunu görmenize ve hareket ederken onu takip etmenize de olanak tanır. Bu işlem her zaman kullanıcının izniyle (ve yalnızca sayfa açıkken) yapılır. Bu sayede, kullanıcı yakındaysa siparişi teslim almaya hazırlamak için arka uç sistemleriyle entegrasyon gibi birçok ilginç kullanım alanı ortaya çıkar.
Geolocation API'yi kullanırken dikkat etmeniz gereken birçok nokta vardır. Bu kılavuzda, yaygın kullanım alanları ve çözümler açıklanmaktadır.
Özet
- Coğrafi konumu kullanıcıya fayda sağladığında kullanın.
- Kullanıcı hareketine net bir yanıt olarak izin isteyin.
- Kullanıcının tarayıcısı coğrafi konumu desteklemiyorsa özellik algılamayı kullanın.
- Yalnızca coğrafi konumun nasıl uygulanacağını değil, en iyi şekilde nasıl kullanılacağını da öğrenin.
- Sitenizde coğrafi konumu test edin.
Coğrafi konum ne zaman kullanılır?
- Kullanıcı deneyimini özelleştirmek için kullanıcının belirli bir fiziksel konuma en yakın olduğu yeri bulma
- Bilgileri (ör. haberler) kullanıcının konumuna göre uyarlama.
- Kullanıcının konumunu haritada gösterme
- Uygulamanızda oluşturulan verileri kullanıcının konumuyla etiketleme (ör. bir resmi coğrafi olarak etiketleme)
İzin isterken sorumlu davranma
Son kullanıcı araştırmaları, kullanıcıların sayfa yükleme sırasında konumlarını vermelerini isteyen sitelere güvenmediğini gösterdi. Peki en iyi uygulamalar nelerdir?
Kullanıcıların konumlarını sizinle paylaşmayacağını varsayın
Kullanıcılarınızın çoğu konumlarını sizinle paylaşmak istemeyecektir. Bu nedenle, savunmacı bir geliştirme tarzı benimsemeniz gerekir.
- Sitenizi bu duruma uyarlayabilmek için coğrafi konum API'sindeki tüm hataları ele alın.
- Konum bilgisine neden ihtiyaç duyduğunuzu açık ve net bir şekilde belirtin.
- Gerekirse yedek bir çözüm kullanın.
Coğrafi konum gerekiyorsa yedek kullanma
Sitenizin veya uygulamanızın, kullanıcının mevcut konumuna erişim gerektirmemesini öneririz. Ancak siteniz veya uygulamanız kullanıcının mevcut konumunu gerektiriyorsa kullanıcının şu anda nerede olduğuna dair en iyi tahmini elde etmenizi sağlayan üçüncü taraf çözümleri vardır.
Bu çözümler genellikle kullanıcının IP adresine bakarak ve bu adresi RIPE veritabanına kayıtlı fiziksel adreslerle eşleştirerek çalışır. Bu konumlar genellikle çok doğru değildir ve normalde kullanıcıya en yakın telekomünikasyon merkezinin veya baz istasyonunun konumunu verir. Çoğu durumda, özellikle de kullanıcı VPN veya başka bir proxy hizmeti kullanıyorsa bu bilgiler o kadar doğru bile olmayabilir.
Kullanıcı hareketiyle her zaman konum erişimi iste
Kullanıcıların, konumlarını neden istediğinizi ve bunun kendilerine ne gibi bir fayda sağlayacağını anladığından emin olun. Site yüklenirken ana sayfada hemen izin istemek kötü bir kullanıcı deneyimine neden olur.
Bunun yerine, kullanıcıya net bir harekete geçirici mesaj verin veya bir işlemin konumuna erişim gerektireceğini belirtin. Böylece kullanıcı, erişim için sistem istemini yeni başlatılan işlemle daha kolay ilişkilendirebilir.
Bir işlemin kullanıcının konumunu isteyeceğini açıkça belirtin.
Google Ads ekibi tarafından yapılan bir çalışmada, bir kullanıcıdan yaklaşan bir konferans için Boston'da bir otel odası rezervasyonu yapması istendiğinde, belirli bir otel sitesinde, ana sayfadaki "Bul ve Rezervasyon Yap" harekete geçirici mesajına dokunduktan hemen sonra GPS konumunu paylaşması istendi.
Bazı durumlarda kullanıcı, Boston'da oda rezervasyonu yapmak isterken neden San Francisco'daki otellerin gösterildiğini anlamadığı için rahatsız oldu.
Kullanıcılara konumlarını neden sorduğunuzu açıklamak daha iyi bir deneyim sunar. Cihazlarda yaygın olarak kullanılan, mesafe ölçer gibi iyi bilinen bir işaretçi veya "Yakınımdakileri Bul" gibi açık bir harekete geçirici mesaj ekleyin.
Kullanıcıları konumlarına erişim izni vermeye teşvik edin
Kullanıcıların yaptığı hiçbir şeye erişiminiz yoktur. Kullanıcıların konumlarına erişime izin vermediği zamanı tam olarak bilirsiniz ancak erişim izni verdikleri zamanı bilemezsiniz. Erişimi elde ettiğinizi yalnızca sonuçlar göründüğünde anlarsınız.
Kullanıcıların bir işlemi tamamlaması gerekiyorsa onları harekete geçirmek için "dürtmek" iyi bir uygulamadır.
Önerilerimiz:
- Kısa bir süre sonra tetiklenen bir zamanlayıcı ayarlayın. 5 saniye iyi bir değerdir.
- Hata mesajı alırsanız kullanıcıya bir mesaj gösterin.
- Olumlu bir yanıt alırsanız zamanlayıcıyı devre dışı bırakın ve sonuçları işleyin.
- Zaman aşımından sonra olumlu bir yanıt almadıysanız kullanıcıya bir bildirim gösterin.
- Yanıt daha sonra gelirse ve bildirim hâlâ ekrandaysa ekrandan kaldırın.
button.onclick = function () {
var startPos;
var nudge = document.getElementById('nudge');
var showNudgeBanner = function () {
nudge.style.display = 'block';
};
var hideNudgeBanner = function () {
nudge.style.display = 'none';
};
var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);
var geoSuccess = function (position) {
hideNudgeBanner();
// We have the location, don't display banner
clearTimeout(nudgeTimeoutId);
// Do magic with location
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
switch (error.code) {
case error.TIMEOUT:
// The user didn't accept the callout
showNudgeBanner();
break;
}
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Tarayıcı desteği
Tarayıcıların çoğu artık Geolocation API'yi desteklemektedir ancak herhangi bir işlem yapmadan önce her zaman destek durumunu kontrol etmek iyi bir uygulamadır.
Coğrafi konum nesnesinin varlığını test ederek uyumluluğu kolayca kontrol edebilirsiniz:
// check for Geolocation support
if (navigator.geolocation) {
console.log('Geolocation is supported!');
} else {
console.log('Geolocation is not supported for this Browser/OS.');
}
Kullanıcının mevcut konumunu belirleme
Geolocation API, kullanıcının konumunu almak için basit ve "tek seferlik" bir yöntem sunar: getCurrentPosition(). Bu yönteme yapılan bir çağrı, kullanıcının mevcut konumunu eşzamansız olarak bildirir.
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
navigator.geolocation.getCurrentPosition(geoSuccess);
};
Bu alandaki bir uygulama ilk kez izin istiyorsa tarayıcı genellikle kullanıcı rızasını kontrol eder. Tarayıcıya bağlı olarak, izin aramalarına her zaman izin verme veya vermeme tercihleri de olabilir. Bu durumda onay süreci atlanır.
Tarayıcınızın kullandığı konum cihazına bağlı olarak konum nesnesi, enlem ve boylamdan çok daha fazlasını içerebilir. Örneğin, rakım veya yön bilgisi de içerebilir. Konum sistemi verileri döndürene kadar hangi ek bilgileri kullandığını bilemezsiniz.
Kullanıcının konumu izleniyor
Geolocation API, getCurrentPosition() için tek bir çağrıyla kullanıcının konumunu (kullanıcı izniyle) almanıza olanak tanır.
Kullanıcının konumunu sürekli olarak izlemek istiyorsanız Geolocation API yöntemini (watchPosition()) kullanın. getCurrentPosition() ile benzer şekilde çalışır ancak konumlandırma yazılımı olarak birden çok kez tetiklenir:
- Kullanıcıyı daha doğru bir şekilde kilitler.
- Kullanıcının konumunun değiştiğini belirler.
var watchId = navigator.geolocation.watchPosition(function (position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});
Kullanıcının konumunu izlemek için coğrafi konum ne zaman kullanılır?
- Kullanıcı konumunu daha hassas bir şekilde belirlemek istiyorsanız.
- Uygulamanızın, kullanıcı arayüzünü yeni konum bilgilerine göre güncellemesi gerekiyor.
- Uygulamanızın, kullanıcı belirli bir tanımlı bölgeye girdiğinde iş mantığını güncellemesi gerekiyor.
Coğrafi konumu kullanmayla ilgili en iyi uygulamalar
Her zaman temizleyin ve pilden tasarruf edin
Coğrafi konumdaki değişiklikleri izlemek ücretsiz bir işlem değildir. İşletim sistemleri, uygulamaların coğrafi alt sisteme bağlanmasına olanak tanıyan platform özellikleri sunuyor olabilir. Ancak web geliştiricisi olarak, kullanıcının cihazının kullanıcının konumunu izlemek için ne tür bir desteğe sahip olduğunu bilemezsiniz ve bir konumu izlerken cihazı çok fazla ekstra işlemle meşgul edersiniz.
Kullanıcının konumunu izlemeniz gerekmediğinde coğrafi konum sistemlerini kapatmak için clearWatch yöntemini çağırın.
Hataları sorunsuz bir şekilde yönetme
Maalesef tüm konum aramaları başarılı olmuyor. GPS bulunamamış veya kullanıcı aniden konum aramalarını devre dışı bırakmış olabilir. Hata durumunda, geri çağırma içinde kullanıcıyı bilgilendirebilmeniz için getCurrentPosition() işlevine isteğe bağlı ikinci bir bağımsız değişken çağrılır:
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Coğrafi konum donanımını başlatma ihtiyacını azaltma
Çoğu kullanım alanında kullanıcının en güncel konumuna ihtiyacınız yoktur; yalnızca kaba bir tahmine ihtiyacınız vardır.
Tarayıcıya, yakın zamanda elde edilen bir coğrafi konum sonucunu kullanmasını söylemek için isteğe bağlı maximumAge özelliğini kullanın. Bu, kullanıcı verileri daha önce istemişse daha hızlı yanıt vermekle kalmaz, aynı zamanda tarayıcının kablosuz nirengi veya GPS gibi coğrafi konum donanım arayüzlerini başlatmasını da engeller.
window.onload = function () {
var startPos;
var geoOptions = {
maximumAge: 5 * 60 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Kullanıcıyı bekletmeyin, zaman aşımı süresi ayarlayın
Zaman aşımı ayarlamadığınız sürece mevcut konum isteğiniz hiçbir zaman yanıtlanmayabilir.
window.onload = function () {
var startPos;
var geoOptions = {
timeout: 10 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Tam konum yerine yaklaşık konumu tercih etme
Bir kullanıcıya en yakın mağazayı bulmak istiyorsanız 1 metrelik hassasiyete ihtiyacınız yoktur. API, mümkün olan en kısa sürede yaklaşık konum döndürecek şekilde tasarlanmıştır.
Yüksek düzeyde kesinliğe ihtiyacınız varsa enableHighAccuracy seçeneğiyle varsayılan ayarı geçersiz kılabilirsiniz. Bu seçeneği dikkatli kullanın. Çözümlenmesi daha yavaştır ve daha fazla pil kullanır.
window.onload = function () {
var startPos;
var geoOptions = {
enableHighAccuracy: true,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Chrome Geliştirici Araçları ile coğrafi konumu taklit etme
Coğrafi konumu ayarladıktan sonra şunları yapmanız gerekir:
- Uygulamanızın farklı coğrafi konumlarda nasıl çalıştığını test edin.
- Coğrafi konum kullanılamadığında uygulamanızın düzgün bir şekilde çalıştığını doğrulayın.
Her ikisini de Chrome Geliştirici Araçları'ndan yapabilirsiniz.
- Chrome Geliştirici Araçları'nı açın.
- Konsol çekmecesini açmak için Esc tuşuna basın.
- Konsol çekmecesi menüsünü açma
- Sensors (Sensörler) sekmesini göstermek için Sensors (Sensörler) seçeneğini tıklayın.
Buradan, konumu önceden ayarlanmış büyük bir şehirle geçersiz kılabilir, özel bir konum girebilir veya geçersiz kılma ayarını Konum kullanılamıyor olarak belirleyerek coğrafi konumu devre dışı bırakabilirsiniz.