مکان کاربر

Geolocation API به شما امکان می دهد با توجه به رضایت کاربر، مکان آن را کشف کنید.

Paul Kinlan

API Geolocation به شما امکان می دهد با رضایت کاربر، مکان کاربر را کشف کنید. شما می توانید از این قابلیت برای مواردی مانند راهنمایی کاربر به مقصد و برچسب گذاری جغرافیایی محتوای ایجاد شده توسط کاربر استفاده کنید. به عنوان مثال، علامت گذاری جایی که یک عکس گرفته شده است.

Geolocation API همچنین به شما این امکان را می‌دهد که ببینید کاربر کجاست و همیشه با رضایت کاربر (و فقط زمانی که صفحه باز است) در حین جابجایی او، او را نگه دارید. این موارد استفاده جالب زیادی را ایجاد می کند، مانند ادغام با سیستم های پشتیبان برای آماده کردن سفارش برای جمع آوری در صورتی که کاربر نزدیک باشد.

هنگام استفاده از Geolocation API باید از خیلی چیزها آگاه باشید. این راهنما شما را از طریق موارد استفاده متداول و راه حل ها راهنمایی می کند.

توجه: از Chrome 50، Geolocation API فقط در زمینه‌های امن (HTTPS) کار می‌کند . اگر سایت شما روی یک منبع غیر ایمن (مانند HTTP ) میزبانی می شود، هر گونه درخواستی برای مکان کاربر دیگر عمل نمی کند.

خلاصه

• زمانی که به نفع کاربر است از موقعیت جغرافیایی استفاده کنید.
• به عنوان پاسخی واضح به ژست کاربر، اجازه بخواهید.
• در صورتی که مرورگر کاربر از موقعیت جغرافیایی پشتیبانی نمی کند، از تشخیص ویژگی استفاده کنید.
• فقط یاد نگیرید که چگونه موقعیت جغرافیایی را پیاده سازی کنید. بهترین روش استفاده از موقعیت جغرافیایی را بیاموزید.
• موقعیت جغرافیایی را با سایت خود تست کنید.

زمان استفاده از موقعیت جغرافیایی

• محل نزدیک‌ترین مکان کاربر به یک مکان فیزیکی خاص را پیدا کنید تا تجربه کاربر را متناسب کنید.
• اطلاعات (مانند اخبار) را متناسب با موقعیت مکانی کاربر تنظیم کنید.
• موقعیت یک کاربر را روی نقشه نشان دهید.
• داده های ایجاد شده در داخل برنامه شما را با موقعیت مکانی کاربر تگ کنید (یعنی یک عکس را برچسب جغرافیایی کنید).

مسئولانه اجازه بخواهید

مطالعات اخیر کاربران نشان داده است که کاربران به سایت‌هایی که به سادگی از کاربر می‌خواهند موقعیت خود را در بارگذاری صفحه نشان دهد، بی‌اعتماد هستند. بنابراین بهترین شیوه ها چیست؟

فرض کنید کاربران مکان خود را به شما نمی دهند

بسیاری از کاربران شما نمی خواهند موقعیت مکانی خود را به شما بدهند، بنابراین شما باید یک سبک توسعه دفاعی را اتخاذ کنید.

1. تمام خطاهای خارج از API موقعیت جغرافیایی را مدیریت کنید تا بتوانید سایت خود را با این شرایط تطبیق دهید.
2. در مورد نیاز خود به مکان روشن و واضح باشید.
3. در صورت نیاز از یک راه حل بازگشتی استفاده کنید.

در صورت نیاز به موقعیت جغرافیایی از یک بک گراند استفاده کنید

توصیه می کنیم سایت یا برنامه شما نیازی به دسترسی به مکان فعلی کاربر نداشته باشد. با این حال، اگر سایت یا برنامه شما به مکان فعلی کاربر نیاز دارد، راه حل های شخص ثالثی وجود دارد که به شما امکان می دهد بهترین حدس را از اینکه شخص در حال حاضر کجاست به دست آورید.

این راه حل ها اغلب با مشاهده آدرس IP کاربر و نگاشت آن به آدرس های فیزیکی ثبت شده در پایگاه داده RIPE کار می کنند. این مکان‌ها اغلب خیلی دقیق نیستند، معمولاً موقعیت مرکز مخابراتی یا دکل تلفن همراه را که نزدیک‌ترین نقطه به کاربر است به شما می‌دهند. در بسیاری از موارد، حتی ممکن است دقیق نباشند، به خصوص اگر کاربر از VPN یا برخی از سرویس های پروکسی دیگر استفاده کند.

همیشه با اشاره کاربر درخواست دسترسی به مکان را داشته باشید

اطمینان حاصل کنید که کاربران متوجه می شوند که چرا مکان آنها را می خواهید و چه سودی برای آنها خواهد داشت. درخواست فوراً در صفحه اصلی با بارگیری سایت منجر به تجربه کاربری ضعیف می شود.

DO : همیشه با اشاره کاربر درخواست دسترسی به مکان را داشته باشید.

انجام ندهید : با بارگیری سایت، آن را در صفحه اصلی بخواهید. این منجر به تجربه کاربری ضعیف می شود.

در عوض، به کاربر یک فراخوان واضح برای اقدام یا نشانه ای مبنی بر اینکه یک عملیات نیاز به دسترسی به مکان او دارد، بدهید. سپس کاربر می‌تواند آسان‌تر درخواست سیستم را برای دسترسی با عملی که تازه شروع شده است مرتبط کند.

نشانه واضحی ارائه دهید که یک عمل مکان آن را درخواست می کند

در مطالعه‌ای که توسط تیم Google Ads انجام شد ، هنگامی که از کاربر خواسته شد برای یک کنفرانس آتی در یک سایت هتل خاص، اتاق هتلی در بوستون رزرو کند، از آن‌ها خواسته شد بلافاصله پس از ضربه زدن روی تماس «یافتن و رزرو» موقعیت مکانی GPS خود را به اشتراک بگذارند. اقدام در صفحه اصلی

در برخی موارد، کاربر ناامید می‌شد، زیرا نمی‌دانست چرا وقتی می‌خواهند اتاقی در بوستون رزرو کنند، هتل‌هایی در سانفرانسیسکو به آنها نشان داده می‌شود.

یک تجربه بهتر این است که مطمئن شوید کاربران متوجه می شوند که چرا از آنها مکان خود را می خواهید. یک دال شناخته شده را اضافه کنید که در همه دستگاه‌ها رایج است، مانند محدوده یاب، یا یک فراخوان برای اقدام صریح مانند "Find Near Me".

از فاصله یاب استفاده کنید

یک فراخوان خاص برای یافتن نزدیک من

به آرامی کاربران را برای اعطای مجوز به مکان خود سوق دهید

شما به هر کاری که کاربران انجام می دهند دسترسی ندارید. شما دقیقا می دانید که کاربران چه زمانی دسترسی به مکان های خود را ممنوع می کنند، اما نمی دانید چه زمانی به شما اجازه دسترسی می دهند. شما فقط می‌دانید که وقتی نتایج ظاهر می‌شوند، دسترسی پیدا کرده‌اید.

اگر به آنها برای تکمیل عمل نیاز دارید، این تمرین خوبی است که کاربران را به عمل "تحریک" کنید.

توصیه می کنیم:

1. یک تایمر تنظیم کنید که پس از مدت کوتاهی فعال شود. 5 ثانیه مقدار خوبی است.
2. اگر پیغام خطایی دریافت کردید، پیامی را به کاربر نشان دهید.
3. اگر پاسخ مثبت دریافت کردید، تایمر را غیرفعال کنید و نتایج را پردازش کنید.
4. اگر پس از اتمام زمان، پاسخ مثبتی دریافت نکردید، یک اعلان به کاربر نشان دهید.
5. اگر پاسخ بعداً دریافت شد و اعلان همچنان وجود داشت، آن را از صفحه حذف کنید.

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() عمل می کند، اما چندین بار به عنوان نرم افزار موقعیت یابی فعال می شود:

1. قفل دقیق تری بر روی کاربر دریافت می کند.
2. تعیین می کند که موقعیت کاربر در حال تغییر است.

var watchId = navigator.geolocation.watchPosition(function (position) {
  document.getElementById('currentLat').innerHTML = position.coords.latitude;
  document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

زمان استفاده از موقعیت جغرافیایی برای تماشای موقعیت مکانی کاربر

• شما می خواهید قفل دقیق تری در محل کاربر به دست آورید.
• برنامه شما باید رابط کاربری را بر اساس اطلاعات مکان جدید به روز کند.
• هنگامی که کاربر وارد یک منطقه تعریف شده خاص می شود، برنامه شما باید منطق تجاری را به روز کند.

بهترین روش ها هنگام استفاده از موقعیت جغرافیایی

همیشه باتری را پاک کنید و در مصرف آن صرفه جویی کنید

مشاهده تغییرات در یک موقعیت جغرافیایی یک عملیات رایگان نیست. در حالی که سیستم‌عامل‌ها ممکن است ویژگی‌های پلتفرمی را برای اتصال برنامه‌ها به زیرسیستم جغرافیایی معرفی کنند، شما، به عنوان یک توسعه‌دهنده وب، نمی‌دانید که دستگاه کاربر چه پشتیبانی برای نظارت بر موقعیت کاربر دارد، و در حالی که در حال تماشای موقعیت هستید، شما دستگاه را درگیر پردازش های اضافی زیادی می کنید.

بعد از اینکه دیگر نیازی به ردیابی موقعیت کاربر ندارید، با clearWatch تماس بگیرید تا سیستم های موقعیت جغرافیایی را خاموش کنید.

با ظرافت به خطاها رسیدگی کنید

متأسفانه، همه جستجوهای مکان موفقیت آمیز نیستند. شاید GPS نمی تواند پیدا شود یا کاربر به طور ناگهانی جستجوی مکان را غیرفعال کرده است. در صورت بروز خطا، یک آرگومان اختیاری دوم برای getCurrentPosition() فراخوانی می شود تا بتوانید کاربر را در داخل callback مطلع کنید:

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);
};

یک مکان درشت را به یک مکان دانه ریز ترجیح دهید

اگر می‌خواهید نزدیک‌ترین فروشگاه به کاربر را پیدا کنید، بعید است که به دقت 1 متری نیاز داشته باشید. API طوری طراحی شده است که مکان درشتی را ارائه دهد که در سریع ترین زمان ممکن برگردد.

اگر به دقت بالایی نیاز دارید، می‌توانید تنظیمات پیش‌فرض را با گزینه 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 انجام دهید.

1. Chrome DevTools را باز کنید .
2. Esc را فشار دهید تا کشوی کنسول باز شود .
3. منوی کشوی کنسول را باز کنید
4. روی گزینه Sensors کلیک کنید تا تب Sensors نمایش داده شود.

از اینجا می‌توانید مکان را به یک شهر اصلی از پیش تعیین‌شده لغو کنید، یک مکان سفارشی را وارد کنید، یا با تنظیم نادیده گرفتن موقعیت مکانی در دسترس نیست، موقعیت جغرافیایی را غیرفعال کنید.

بازخورد