מיקום המשתמש

Geolocation API מאפשר לך לגלות את מיקום המשתמש, לאחר הבעת הסכמה.

Paul Kinlan

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

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

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

סיכום

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

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

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

בקשת רשות בצורה אחראית

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

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

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

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

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

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

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

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

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

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

להציג אינדיקציה ברורה לכך שפעולה מסוימת תגרום לבקשת מיקום

במחקר שנערך על ידי צוות Google Ads, כשמשתמש התבקש להזמין חדר במלון בבוסטון לקראת כנס קרוב באתר מלונות מסוים, הוא התבקש לשתף את מיקום ה-GPS שלו מיד אחרי הקשה על הקריאה לפעולה 'חיפוש והזמנה' בדף הבית.

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

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

מעודדים את המשתמשים להעניק הרשאה לגישה למיקום שלהם

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

מומלץ "לדחוף" את המשתמשים לפעולה אם אתם צריכים שהם ישלימו את הפעולה.

ההמלצות שלנו:

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(). קריאה ל-method הזו מדווחת באופן אסינכרוני על המיקום הנוכחי של המשתמש.

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 כדי לפתוח את חלונית ההזזה של מסוף Google.
3. פתיחת התפריט של חלונית ההזזה של מסוף
4. לוחצים על האפשרות חיישנים כדי להציג את הכרטיסייה 'חיישנים'.

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

משוב