Geolocation API به شما امکان می‌دهد مکان کاربر را با رضایت او پیدا کنید.
Geolocation API به شما امکان می‌دهد با رضایت کاربر، مکان او را پیدا کنید. می‌توانید از این عملکرد برای کارهایی مثل راهنمایی کاربر به مقصدش و برچسب‌گذاری جغرافیایی محتوای ایجادشده توسط کاربر استفاده کنید؛ برای مثال، علامت‌گذاری جایی که عکس گرفته شده است.
میانای برنامه‌سازی کاربردی Geolocation همچنین به شما امکان می‌دهد ببینید کاربر کجا است و او را هنگام جابه‌جایی زیرنظر داشته باشید، البته همیشه با رضایت کاربر (و فقط زمانی که صفحه باز است). این موجب ایجاد موارد استفاده جالب زیادی می‌شود، مثل ادغام با سیستم‌های پس‌بک برای آماده کردن سفارش برای تحویل گرفتن درصورتی‌که کاربر در آن نزدیکی باشد.
هنگام استفاده از Geolocation API باید از موارد زیادی آگاه باشید. این راهنما شما را با موارد استفاده و راه‌حل‌های رایج آشنا می‌کند.
خلاصه
- از مکان‌یابی جغرافیایی زمانی استفاده کنید که برای کاربر مفید باشد.
- درخواست اجازه به‌عنوان پاسخی واضح به اشاره کاربر.
- درصورتی‌که مرورگر کاربر از موقعیت جغرافیایی پشتیبانی نمی‌کند، از تشخیص ویژگی استفاده کنید.
- فقط نحوه پیاده‌سازی مکان‌یابی جغرافیایی را یاد نگیرید؛ بهترین روش استفاده از مکان‌یابی جغرافیایی را یاد بگیرید.
- موقعیت جغرافیایی را با سایتتان آزمایش کنید.
چه زمانی از مکان‌یابی جغرافیایی استفاده کنیم
- برای سفارشی‌سازی تجربه کاربری، ببینید کاربر در کجا به مکان فیزیکی خاصی نزدیک‌تر است.
- اطلاعات (مانند اخبار) را با مکان کاربر تطبیق دهد.
- نمایش موقعیت کاربر روی نقشه.
- برچسب‌گذاری داده‌های ایجادشده در برنامه با مکان کاربر (یعنی برچسب‌گذاری جغرافیایی عکس).
درخواست اجازه به‌طور مسئولانه
مطالعات اخیر کاربران نشان داده است که کاربران به سایت‌هایی که به‌محض بار شدن صفحه از کاربر می‌خواهند موقعیتش را ارائه دهد اعتماد ندارند. پس روال‌های مطلوب کدام‌اند؟
فرض کنید کاربران مکانشان را به شما نمی‌دهند
بسیاری از کاربران شما نمی‌خواهند مکانشان را به شما بدهند، بنابراین باید سبک توسعه دفاعی را اتخاذ کنید.
- همه خطاهای خارج از میانای برنامه‌سازی کاربردی موقعیت جغرافیایی را مدیریت کنید تا بتوانید سایتتان را با این شرایط تطبیق دهید.
- درباره نیازتان به مکان، شفاف و صریح باشید.
- درصورت نیاز، از راه‌حل جایگزین استفاده کنید.
اگر موقعیت جغرافیایی لازم است، از بازگشت استفاده کنید
توصیه می‌کنیم سایت یا برنامه‌تان به دسترسی به مکان فعلی کاربر نیاز نداشته باشد. بااین‌حال، اگر سایت یا برنامه شما به مکان فعلی کاربر نیاز دارد، راهکارهای طرف سومی وجود دارد که به شما امکان می‌دهد بهترین حدس را درباره مکان فعلی فرد به‌دست آورید.
این راهکارها اغلب با نگاه کردن به نشانی IP کاربر و نگاشت آن به نشانی‌های فیزیکی ثبت‌شده در پایگاه داده RIPE کار می‌کنند. این مکان‌ها اغلب خیلی دقیق نیستند و معمولاً موقعیت مرکز مخابراتی یا دکل تلفن همراهی را که به کاربر نزدیک‌تر است به شما می‌دهند. در بسیاری از موارد، ممکن است حتی چندان دقیق نباشند، به‌ویژه اگر کاربر از VPN یا سرویس پراکسی دیگری استفاده کند.
همیشه دسترسی به مکان را با اشاره کاربر درخواست کنید
مطمئن شوید که کاربران متوجه می‌شوند چرا مکانشان را درخواست می‌کنید و این کار چه مزیتی برای آن‌ها دارد. درخواست کردن آن بلافاصله در صفحه اصلی هنگام بار شدن سایت منجر به تجربه کاربری ضعیف می‌شود.
درعوض، دعوت به اقدام واضحی به کاربر ارائه دهید یا نشان دهید که عملیات به دسترسی به مکان او نیاز دارد. سپس کاربر می‌تواند پیام‌واره سیستم برای دسترسی را راحت‌تر با کنشی که به‌تازگی شروع شده است مرتبط کند.
به‌طور واضح نشان دهید که کنشی مکان آن‌ها را درخواست خواهد کرد
در مطالعه‌ای که توسط تیم Google Ads انجام شد، وقتی از کاربری خواسته شد تا برای کنفرانس آتی در یک سایت هتل خاص، اتاق هتلی را در بوستون رزرو کند، بلافاصله پس‌از ضربه زدن روی دعوت به اقدام «یافتن و رزرو کردن» در صفحه اصلی، از او خواسته شد تا مکان GPS خود را هم‌رسانی کند.
در برخی موارد، کاربر ناامید شد زیرا متوجه نشد چرا وقتی می‌خواست اتاقی در بوستون رزرو کند، هتل‌های سانفرانسیسکو به او نشان داده می‌شد.
تجربه بهتر این است که مطمئن شوید کاربران متوجه می‌شوند چرا از آن‌ها می‌خواهید مکانشان را ارائه دهند. یک نشانگر شناخته‌شده که در همه دستگاه‌ها رایج است، مانند فاصله‌یاب، یا یک دعوت به اقدام صریح مانند «پیدا کردن در نزدیکی من» اضافه کنید.
به‌طور ملایم به کاربران یادآوری کنید که اجازه دسترسی به مکانشان را اعطا کنند
به کارهایی که کاربران انجام می‌دهند دسترسی ندارید. دقیقاً می‌دانید چه زمانی کاربران اجازه دسترسی به مکانشان را نمی‌دهند، اما نمی‌دانید چه زمانی به شما اجازه دسترسی می‌دهند؛ فقط زمانی متوجه می‌شوید که دسترسی را دریافت کرده‌اید که نتایج ظاهر شوند.
اگر می‌خواهید کاربران کنشی را تکمیل کنند، بهتر است آن‌ها را به انجام آن کنش «ترغیب» کنید.
توصیه می‌کنیم:
- زمان‌سنجی راه‌اندازی کنید که پس‌از مدت کوتاهی فعال شود؛ ۵ ثانیه مقدار خوبی است.
- اگر پیام خطا دریافت کردید، پیامی به کاربر نشان دهید.
- اگر پاسخ مثبت دریافت کردید، زمان‌سنج را غیرفعال کنید و نتایج را پردازش کنید.
- اگر پس‌از اتمام زمان، پاسخ مثبتی دریافت نکرده‌اید، اعلانی به کاربر نشان دهید.
- اگر پاسخ دیرتر دریافت شد و اعلان همچنان وجود داشت، آن را از صفحه بردارید.
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);
};
پشتیبانی مرورگر
اکثر مرورگرها اکنون از Geolocation API پشتیبانی می‌کنند، اما بهتر است همیشه قبل‌از انجام هر کاری، پشتیبانی را بررسی کنید.
می‌توانید به‌راحتی سازگاری را با آزمایش وجود شیء موقعیت جغرافیایی بررسی کنید:
// check for Geolocation support
if (navigator.geolocation) {
console.log('Geolocation is supported!');
} else {
console.log('Geolocation is not supported for this Browser/OS.');
}
تعیین مکان فعلی کاربر
Geolocation API روشی ساده و «یک‌باره» برای دریافت مکان کاربر ارائه می‌دهد: getCurrentPosition(). فراخوانی این روش به‌صورت ناهمگام
مکان فعلی کاربر را گزارش می‌کند.
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);
};
اگر این اولین‌باری است که برنامه‌ای در این دامنه درخواست اجازه‌ها را کرده است، مرورگر معمولاً رضایت کاربر را بررسی می‌کند. بسته به مرورگر، ممکن است اولویت‌هایی نیز برای همیشه مجاز کردن—یا غیرمجاز کردن—جستجوهای اجازه وجود داشته باشد که در این صورت فرایند تأیید دور زده می‌شود.
بسته به دستگاه مکانی که مرورگرتان استفاده می‌کند، شیء موقعیت ممکن است درواقع حاوی اطلاعاتی بسیار بیشتر از طول و عرض جغرافیایی باشد؛ برای مثال، ممکن است شامل ارتفاع یا جهت باشد. تا زمانی که سیستم مکان داده‌ها را برنگرداند، نمی‌توانید متوجه شوید که از چه اطلاعات اضافه‌ای استفاده می‌کند.
مشاهده مکان کاربر
Geolocation API به شما امکان می‌دهد مکان کاربر را (با رضایت کاربر) با یک تماس با getCurrentPosition() به‌دست آورید.
اگر می‌خواهید به‌طور مداوم مکان کاربر را پایش کنید، از روش Geolocation
API، watchPosition() استفاده کنید. این رویداد به‌شیوه‌ای مشابه با
getCurrentPosition() عمل می‌کند، اما چندین‌بار به‌عنوان نرم‌افزار موقعیت‌یابی
فعال می‌شود:
- مکان کاربر را دقیق‌تر قفل می‌کند.
- تعیین می‌کند که موقعیت کاربر درحال تغییر است.
var watchId = navigator.geolocation.watchPosition(function (position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});
چه زمانی از مکان‌یابی جغرافیایی برای نظارت بر مکان کاربر استفاده شود
- می‌خواهید مکان کاربر را دقیق‌تر قفل کنید.
- برنامه شما باید میانای کاربر را براساس اطلاعات مکان جدید به‌روز کند.
- برنامه شما باید منطق کسب‌وکار را وقتی کاربر وارد منطقه تعریف‌شده خاصی می‌شود به‌روز کند.
روال‌های مطلوب هنگام استفاده از مکان‌یابی جغرافیایی
همیشه باتری را پاک‌سازی و حفظ می‌کند
نظارت بر تغییرات موقعیت جغرافیایی عملیات رایگانی نیست. درحالی‌که سیستم‌عامل‌ها ممکن است ویژگی‌های پلاتفرمی را معرفی کنند که به برنامه‌ها اجازه می‌دهد به زیرسیستم جغرافیایی متصل شوند، شما به‌عنوان توسعه‌دهنده وب نمی‌دانید که دستگاه کاربر چه پشتیبانی‌ای برای نظارت بر مکان کاربر دارد، و درحالی‌که موقعیتی را تماشا می‌کنید، دستگاه را درگیر پردازش‌های اضافی زیادی می‌کنید.
وقتی دیگر نیازی به ردیابی موقعیت کاربر ندارید، clearWatch را فراخوانی کنید تا
سیستم‌های مکان‌یابی جغرافیایی خاموش شود.
مدیریت کردن خطاها به‌خوبی
متأسفانه، همه جستجوهای مکان موفقیت‌آمیز نیستند. شاید GPS نتوانسته است مکان را پیدا کند یا کاربر به‌طور ناگهانی جستجوی مکان را غیرفعال کرده است. درصورت بروز خطا، آرگومان اختیاری دوم برای getCurrentPosition() فراخوانی می‌شود تا بتوانید در فراخوانی برگشتی به کاربر اطلاع دهید:
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);
};
کاهش نیاز به راه‌اندازی سخت‌افزار مکان‌یابی جغرافیایی
برای بسیاری از موارد استفاده، به به‌روزترین مکان کاربر نیاز ندارید؛ فقط به تخمین حدودی نیاز دارید.
از ویژگی اختیاری maximumAge استفاده کنید تا به مرورگر بگویید از نتیجه موقعیت جغرافیایی که اخیراً
به‌دست آمده است استفاده کند. این کار نه تنها درصورتی‌که کاربر قبلاً داده‌ها را درخواست کرده باشد سریع‌تر برمی‌گردد، بلکه از راه‌اندازی واسط‌های سخت‌افزاری مکان‌یابی جغرافیایی مرورگر مانند مثلث‌بندی Wifi یا GPS نیز جلوگیری می‌کند.
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);
};
کاربر را منتظر نگذارید، زمان استراحت تنظیم کنید
مگر اینکه زمان استراحت تنظیم کنید، درخواست شما برای موقعیت فعلی ممکن است هرگز برنگردد.
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);
};
مکان غیردقیق را به مکان دقیق ترجیح دهید
اگر می‌خواهید نزدیک‌ترین فروشگاه به کاربر را پیدا کنید، بعید است به دقت ۱ متری نیاز داشته باشید. این میانای برنامه‌سازی کاربردی برای ارائه مکان غیردقیق طراحی شده است که در سریع‌ترین زمان ممکن برمی‌گردد.
اگر به سطح بالایی از دقت نیاز دارید، می‌توانید تنظیم پیش‌فرض را با گزینه enableHighAccuracy لغو کنید. از این گزینه به‌ندرت استفاده کنید: حل کردن آن کندتر است و باتری بیشتری مصرف می‌کند.
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 DevTools
وقتی موقعیت جغرافیایی را راه‌اندازی کردید، باید:
- نحوه عملکرد برنامه‌تان را در موقعیت‌های جغرافیایی مختلف آزمایش کنید.
- بررسی کنید که وقتی مکان‌یابی جغرافیایی دردسترس نیست، برنامه‌تان به‌درستی تنزل پیدا کند.
می‌توانید هر دو کار را از Chrome DevTools انجام دهید.
- Chrome DevTools را باز کنید.
- برای باز کردن کشوی «کنسول»، کلید Esc را فشار دهید.
- باز کردن منو کشوی کنسول
- روی گزینه حسگرها کلیک کنید تا برگه «حسگرها» نشان داده شود.
از اینجا می‌توانید مکان را به یک شهر بزرگ ازپیش‌تنظیم‌شده لغو کنید، مکان سفارشی وارد کنید، یا با تنظیم لغو روی مکان دردسترس نیست، مکان‌یابی جغرافیایی را غیرفعال کنید.