המיקום של המשתמש

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

Paul Kinlan

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

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

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

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

סיכום

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

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

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

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

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

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

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

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().

אם אתם רוצים לעקוב אחרי מיקום המשתמש באופן רציף, השתמשו בשיטה watchPosition() של Geolocation API. הוא פועל באופן דומה ל-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 כדי להורות לדפדפן להשתמש בתוצאת מיקום גיאוגרפי שהתקבלה לאחרונה. כך לא רק שהנתונים יוחזרו מהר יותר אם המשתמש ביקש אותם בעבר, אלא גם הדפדפן לא יפעיל את ממשקי החומרה של המיקום הגיאוגרפי, כמו טריאנגולציה של 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. לוחצים על האפשרות חיישנים כדי להציג את הכרטיסייה "חיישנים".

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

משוב