Lokalizacja użytkownika

Zamiast tego podaj użytkownikowi wyraźne wezwanie do działania lub informację, że dana operacja wymaga dostępu do lokalizacji. Użytkownik może wtedy łatwiej powiązać prośbę systemu o dostęp z właśnie wykonywaną czynnością.

wyraźnie informować, że dane działanie wymaga dostępu do lokalizacji;

W badaniu przeprowadzonym przez zespół Google Ads, gdy użytkownik chciał zarezerwować pokój hotelowy w Bostonie na zbliżającą się konferencję w witrynie konkretnego hotelu, został poproszony o udostępnienie swojej lokalizacji GPS natychmiast po kliknięciu przycisku „Znajdź i zarezerwuj” na stronie głównej.

W niektórych przypadkach użytkownik był sfrustrowany, ponieważ nie rozumiał, dlaczego wyświetla mu się hotel w Krakowie, gdy chciał zarezerwować pokój w Warszawie.

Aby zapewnić użytkownikom lepsze wrażenia, upewnij się, że rozumieją, dlaczego prosisz ich o podanie lokalizacji. Dodaj dobrze znany symbol, który jest wspólny dla wszystkich urządzeń, np. dalmierz, lub wyraźne wezwanie do działania, np. „Znajdź w pobliżu”.

delikatnie zachęcać użytkowników do udzielenia dostępu do lokalizacji;

Nie masz dostępu do niczego, co robią użytkownicy. Wiesz dokładnie, kiedy użytkownicy odmawiają dostępu do swoich lokalizacji, ale nie wiesz, kiedy Ci go przyznają. Dopiero gdy pojawią się wyniki, będziesz wiedzieć, że uzyskano dostęp.

Jeśli chcesz, aby użytkownicy wykonali określone działanie, warto ich do tego zachęcić.

Zalecamy:

1. Ustaw minutnik, który uruchamia się po krótkim czasie. Dobra wartość to 5 sekund.
2. Jeśli pojawi się komunikat o błędzie, wyświetl go użytkownikowi.
3. Jeśli otrzymasz odpowiedź pozytywną, wyłącz licznik czasu i przetwórz wyniki.
4. Jeśli po upływie limitu czasu nie otrzymasz pozytywnej odpowiedzi, wyświetl użytkownikowi powiadomienie.
5. Jeśli odpowiedź nadejdzie później, a powiadomienie nadal będzie widoczne, usuń je z ekranu.

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

Obsługa przeglądarek

Większość przeglądarek obsługuje obecnie interfejs Geolocation API, ale zawsze warto sprawdzić, czy tak jest, zanim zaczniesz cokolwiek robić.

Zgodność możesz łatwo sprawdzić, testując obecność obiektu geolokalizacji:

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
} else {
  console.log('Geolocation is not supported for this Browser/OS.');
}

Określanie bieżącej lokalizacji użytkownika

Interfejs Geolocation API udostępnia prostą metodę „jednorazową” umożliwiającą uzyskanie lokalizacji użytkownika: getCurrentPosition(). Wywołanie tej metody asynchronicznie informuje o aktualnej lokalizacji użytkownika.

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

Jeśli aplikacja w tej domenie po raz pierwszy prosi o takie uprawnienia, przeglądarka zwykle sprawdza, czy użytkownik wyraził zgodę. W zależności od przeglądarki możesz też mieć ustawienia, które pozwalają zawsze zezwalać lub nie zezwalać na wyszukiwanie uprawnień. W takim przypadku proces potwierdzenia jest pomijany.

W zależności od urządzenia, z którego korzysta przeglądarka, obiekt pozycji może obejmować znacznie więcej niż tylko szerokość i długość geograficzną, np. wysokość lub kierunek. Nie możesz określić, jakich dodatkowych informacji używa system lokalizacji, dopóki nie zwróci danych.

Obserwowanie lokalizacji użytkownika

Interfejs Geolocation API umożliwia uzyskanie lokalizacji użytkownika (za jego zgodą) za pomocą pojedynczego wywołania funkcji getCurrentPosition().

Jeśli chcesz stale monitorować lokalizację użytkownika, użyj metody API Geolocation, watchPosition(). Działa on w sposób podobny do funkcji getCurrentPosition(), ale uruchamia się wielokrotnie, gdy oprogramowanie do pozycjonowania:

1. Uzyskiwanie dokładniejszej blokady użytkownika.
2. Określa, że zmienia się pozycja użytkownika.

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

Kiedy używać geolokalizacji do śledzenia lokalizacji użytkownika

• Chcesz uzyskać dokładniejszą blokadę lokalizacji użytkownika.
• Aplikacja musi zaktualizować interfejs na podstawie nowych informacji o lokalizacji.
• Aplikacja musi aktualizować logikę biznesową, gdy użytkownik wejdzie do określonej zdefiniowanej strefy.

Sprawdzone metody korzystania z geolokalizacji

Zawsze oszczędzaj baterię

Obserwowanie zmian w lokalizacji geograficznej nie jest bezpłatne. Systemy operacyjne mogą wprowadzać funkcje platformy, które umożliwiają aplikacjom korzystanie z podsystemu geolokalizacji, ale jako deweloper stron internetowych nie masz pojęcia o tym, jakie funkcje monitorowania lokalizacji oferuje urządzenie użytkownika. Gdy sprawdzasz pozycję, urządzenie wykonuje wiele dodatkowych operacji przetwarzania.

Jeśli nie chcesz już śledzić pozycji użytkownika, wywołaj clearWatch, by wyłączyć systemy geolokalizacji.

Właściwie radzić z błędami

Niestety nie zawsze uda się wyszukać lokalizację. Być może nie udało się znaleźć modułu GPS lub użytkownik nagle wyłączył wyszukiwanie lokalizacji. W przypadku błędu wywoływany jest drugi opcjonalny argument funkcji getCurrentPosition(), który umożliwia powiadomienie użytkownika w wywołaniu zwrotnym:

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

Ograniczenie konieczności uruchamiania sprzętu do geolokalizacji.

W wielu przypadkach nie potrzebujesz najbardziej aktualnej lokalizacji użytkownika – wystarczy tylko przybliżone oszacowanie.

Użyj właściwości opcjonalnej maximumAge, aby poinformować przeglądarkę o chęci użycia ostatnio uzyskanego wyniku geolokalizacji. Dzięki temu przeglądarka nie tylko szybciej zwraca dane, jeśli użytkownik już je wcześniej zażądał, ale też zapobiega uruchamianiu przez przeglądarkę interfejsów sprzętowych geolokalizacji, takich jak triangulacja Wi-Fi czy 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);
};

Nie zmuszaj użytkownika do czekania, ustaw limit czasu

Jeśli nie ustawisz limitu czasu, prośba o bieżącą pozycję może nigdy nie zostać zrealizowana.

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

Wolę lokalizację przybliżoną niż szczegółową

Jeśli chcesz znaleźć najbliższy sklep dla użytkownika, prawdopodobnie nie potrzebujesz dokładności do 1 metra. Interfejs API jest tak zaprojektowany, aby zwracał przybliżoną lokalizację w jak najkrótszym czasie.

Jeśli potrzebujesz wysokiego poziomu dokładności, możesz zastąpić ustawienie domyślne opcją enableHighAccuracy. Korzystaj z niej z umiarem, ponieważ rozwiązuje się wolniej i zużywa więcej energii.

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

Emulowanie geolokalizacji za pomocą Narzędzi deweloperskich w Chrome

Po skonfigurowaniu geolokalizacji warto:

• Sprawdź, jak aplikacja działa w różnych lokalizacjach geograficznych.
• Sprawdź, czy aplikacja działa płynnie, gdy geolokalizacja jest niedostępna.

Możesz to zrobić w Narzędziach deweloperskich w Chrome.

1. Otwórz Narzędzia deweloperskie w Chrome.
2. Aby otworzyć panel konsoli, naciśnij Esc.
3. Otwórz menu panelu konsoli
4. Kliknij opcję Czujniki, aby wyświetlić kartę „Czujniki”.

Tutaj możesz zastąpić wstępnie ustawioną lokalizację główną miastem, wpisać lokalizację niestandardową lub wyłączyć geolokalizację, ustawiając zastąpienie na Lokalizacja niedostępna.

Prześlij opinię