מיקום המשתמש

ה-API למיקום גיאוגרפי מאפשר לכם לגלות את המיקום של המשתמש, בכפוף להסכמתו.

Paul Kinlan

ה-API למיקום גיאוגרפי מאפשר לכם לגלות את מיקומו של המשתמש, בהסכמת המשתמש. אפשר להשתמש בפונקציונליות הזו לדברים כמו הפניית משתמשים אל היעד שלהם ותיוג גיאוגרפי של תוכן שנוצר על ידי משתמשים. לדוגמה, סימון מקום שבו התמונה צולמה.

ה-API של מיקום גיאוגרפי מאפשר גם לראות איפה המשתמש נמצא ולעקוב אחר הפעילות שלו בזמן שהוא עובר ממקום למקום, תמיד בהסכמת המשתמש (ורק בזמן שהדף פתוח). כך נוצרים הרבה תרחישים מעניינים, כמו שילוב עם מערכות עורפיות כדי להכין הזמנה לאיסוף אם המשתמש נמצא בקרבת מקום.

עליך להיות מודע לדברים רבים בעת שימוש ב-Geolocation API. במדריך הזה מפורטים תרחישים לדוגמה ופתרונות נפוצים.

הערה: החל מגרסה 50 של Chrome, ממשק ה-API של Geolocation API פועל רק בהקשרים מאובטחים (HTTPS). אם האתר שלך מתארח במקור לא מאובטח (כמו HTTP), כל הבקשות למיקום של המשתמש יפסיקו לפעול.

סיכום

• השתמש במיקום גיאוגרפי כאשר הוא שימושי למשתמש.
• עליך לבקש הרשאה כתגובה ברורה לתנועה של המשתמש.
• כדאי להשתמש בזיהוי תכונות במקרה שהדפדפן של המשתמש לא תומך במיקום גיאוגרפי.
• אל תלמד רק כיצד ליישם מיקום גיאוגרפי; למד את הדרך הטובה ביותר להשתמש במיקום גיאוגרפי.
• בדיקת מיקום גיאוגרפי באתר.

מתי כדאי להשתמש במיקום גיאוגרפי

• כדי להתאים אישית את חוויית המשתמש, אפשר לזהות את המקום שבו המשתמש הכי קרוב למיקום פיזי ספציפי.
• להתאים פרטים (כמו חדשות) למיקום של המשתמש.
• הצגת המיקום של משתמש במפה.
• מתייגים נתונים שנוצרו בתוך האפליקציה עם המיקום של המשתמש (כלומר, תיוג גיאוגרפי של תמונה).

מבקשים הרשאה באופן אחראי

מחקרים שנערכו לאחרונה על ידי משתמשים הראו שהמשתמשים לא נותנים אמון באתרים שפשוט מבקשים מהם לוותר על המיקום שלהם בטעינת הדף. אז מהן השיטות המומלצות?

נניח שהמשתמשים לא יספקו לכם את המיקום שלהם

רוב המשתמשים לא ירצו לתת לכם את המיקום שלהם, לכן תצטרכו לאמץ סגנון של פיתוח הגנתי.

1. טפלו בכל השגיאות ב-API של המיקום הגיאוגרפי כדי שתוכלו להתאים את האתר שלכם לתנאי הזה.
2. התיאור צריך להיות ברור ומפורש כמפורט במיקום.
3. במקרה הצורך, אפשר להשתמש בפתרון חלופי.

שימוש באפשרות החלופית אם נדרש מיקום גיאוגרפי

מומלץ לא לאפשר לאתר או לאפליקציה שלכם גישה למיקום הנוכחי של המשתמש. אבל אם האתר או האפליקציה דורשים את המיקום הנוכחי של המשתמש, יש פתרונות של צד שלישי שמאפשרים לנחש בצורה מדויקת ככל האפשר איפה המשתמש נמצא כרגע.

לרוב הפתרונות האלה בוחנים את כתובת ה-IP של המשתמש וממפים אותה לכתובות הפיזיות שרשומות במסד הנתונים RIPE. המיקומים האלה לעיתים קרובות לא מאוד מדויקים, ובדרך כלל הם מספקים את המיקום של מרכז הטלקומוניקציה או מגדל הטלפון הסלולרי הקרוב ביותר למשתמש. במקרים רבים, יכול להיות שהם לא יהיו מדויקים אפילו כל כך, במיוחד אם המשתמש משתמש ב-VPN או בשירות proxy אחר.

בקשת גישה למיקום בכל תנועת משתמש

ודאו שהמשתמשים מבינים למה אתם מבקשים לדעת את המיקום שלהם ומה היתרון שלהם. אם האתר נטען מיד בדף הבית, מתקבלת חוויית משתמש גרועה.

כן: תמיד צריך לבקש גישה למיקום בתנועה של המשתמש.

לא: כדאי לבקש את זה בדף הבית בזמן שהאתר נטען, כי התוצאה היא חוויית משתמש גרועה.

במקום זאת, צריך לתת למשתמש קריאה ברורה לפעולה או לציין שפעולה תדרוש גישה למיקום שלו. לאחר מכן המשתמש יוכל לשייך בקלות רבה יותר את בקשת הגישה לפעולה שמשויכת למערכת.

לציין בבירור שפעולה מסוימת תבקש את המיקום שלהם

במחקר של צוות 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() כדי שתוכלו להודיע למשתמש בתוך הקריאה החוזרת:

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 על מנת להורות לדפדפן להשתמש בתוצאה של מיקום גיאוגרפי שהתקבל לאחרונה. החזרה מהירה יותר אם המשתמש ביקש את הנתונים בעבר, אלא גם מונעת מהדפדפן להפעיל את ממשקי החומרה שלו לפי מיקום גיאוגרפי, כמו טריאנגולציית Wi-Fi או 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);
};

העדף מיקום משוער על פני מיקום מפורט

אם אתם רוצים למצוא את החנות הקרובה ביותר למשתמש, סביר להניח שלא תצטרכו דיוק של מטר אחד. ה-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

לאחר שהגדרת מיקום גיאוגרפי, עליך לבצע את הפעולות הבאות:

• אתם יכולים לבדוק איך האפליקציה פועלת במיקומים גיאוגרפיים שונים.
• מוודאים שהאפליקציה נחלשת בצורה חלקה כשאין מיקום גיאוגרפי זמין.

אפשר לעשות את שתי הפעולות האלה דרך כלי הפיתוח ל-Chrome.

1. פותחים את כלי הפיתוח ל-Chrome.
2. מקישים על Esc כדי לפתוח את חלונית ההזזה של המסוף.
3. פתיחת התפריט של חלונית ההזזה של המסוף
4. לוחצים על האפשרות חיישנים כדי להציג את כרטיסיית החיישנים.

מכאן אפשר לשנות את הגדרת המיקום לעיר גדולה מוגדרת מראש, להזין מיקום מותאם אישית או להשבית את המיקום הגיאוגרפי על ידי הגדרת השינוי למיקום לא זמין.

משוב