Interfejs Geolocation API umożliwia wykrywanie lokalizacji użytkownika, który wyraził na to zgodę.
Interfejs Geolocation API umożliwia odkrywanie jego lokalizacji za zgodą użytkownika. Ta funkcja może służyć np. do kierowania użytkownika do miejsca docelowego czy dodawania geotagów do treści utworzonych przez użytkowników, na przykład do oznaczania miejsca zrobienia zdjęcia.
Interfejs Geolocation API pozwala też sprawdzać, gdzie znajduje się użytkownik, oraz obserwować go podczas poruszania się użytkownika – zawsze za jego zgodą (i tylko wtedy, gdy strona jest otwarta). Tworzy to wiele interesujących przypadków użycia, takich jak integracja z systemami backendu w celu przygotowania zamówienia na zbieranie danych, jeśli użytkownik znajduje się w pobliżu.
Korzystając z interfejsu Geolocation API, musisz pamiętać o wielu kwestiach. W tym przewodniku omawiamy najczęstsze przypadki użycia i rozwiązania.
Podsumowanie
- Korzystać z geolokalizacji, gdy przynosi to korzyści użytkownikowi.
- Zapytaj o zgodę jako wyraźną odpowiedź na gest użytkownika.
- Użyj wykrywania funkcji, jeśli przeglądarka użytkownika nie obsługuje geolokalizacji.
- Dowiedz się nie tylko, jak wdrożyć geolokalizację. Poznaj najlepsze sposoby korzystania z tej funkcji.
- Przetestuj geolokalizację w swojej witrynie.
Kiedy używać geolokalizacji
- Sprawdź, gdzie użytkownik znajduje się najbliżej określonej lokalizacji fizycznej, aby dostosować sposób obsługi witryny.
- Dostosować informacje (np. wiadomości) do lokalizacji użytkownika.
- Pokaż pozycję użytkownika na mapie.
- Dodawaj tagi do danych utworzonych w Twojej aplikacji, oznaczając je lokalizacją użytkownika (oznaczając zdjęcie tagami geograficznymi).
Odpowiedzialne proszenie o pozwolenie
Ostatnie badania opinii użytkowników pokazały, że użytkownicy nie ufają witrynom, które tylko nakłaniają ich do podania swojej pozycji podczas wczytywania strony. Jakie są więc sprawdzone metody?
Załóż, że użytkownicy nie podają swojej lokalizacji
Wielu użytkowników nie chce podawać Ci swojej lokalizacji, więc przystosuj styl obronny.
- Usuń wszystkie błędy z interfejsu API geolokalizacji, aby dostosować witrynę do tego warunku.
- Jasno i wyraźnie powiedz, że potrzebujesz lokalizacji.
- W razie potrzeby użyj rozwiązania zastępczego.
Użyj kreacji zastępczej, jeśli geolokalizacja jest wymagana
Zalecamy, aby witryna lub aplikacja nie wymagała dostępu do bieżącej lokalizacji użytkownika. Jeśli jednak Twoja witryna lub aplikacja wymaga bieżącej lokalizacji użytkownika, możesz skorzystać z rozwiązań innych firm, które pozwolą na określenie, gdzie aktualnie znajduje się dany użytkownik.
Rozwiązania te często działają, sprawdzając adres IP użytkownika i mapując go na adresy fizyczne zarejestrowane w bazie danych RIPE. Lokalizacje te często nie są zbyt dokładne. Zazwyczaj wskazuje ono położenie węzła telekomunikacyjnego lub stacji bazowej sieci komórkowej znajdującej się najbliżej użytkownika. W wielu przypadkach mogą one być niedokładne, zwłaszcza gdy użytkownik korzysta z VPN lub innej usługi proxy.
Zawsze proś o dostęp do lokalizacji gestem użytkownika
Zadbaj o to, by użytkownicy rozumieli, dlaczego pytasz o lokalizację i jakie korzyści płyną z tego. Prośba o jej dodanie od razu na stronie głównej od razu po wczytaniu witryny niekorzystnie wpływa na wrażenia użytkowników.
Zamiast tego podaj użytkownikowi wyraźne wezwanie do działania lub informację, że operacja będzie wymagała dostępu do jego lokalizacji. W ten sposób użytkownik będzie mógł łatwiej powiązać prośbę systemową o dostęp z inicjowanym właśnie działaniem.
Wyraźnie poinformuj użytkowników o tym działaniu.
Według badania przeprowadzonego przez zespół Google Ads, gdy użytkownik został poproszony o zarezerwowanie pokoju hotelowego w Bostonie na zbliżającą się konferencję w jednej witrynie hotelu, tuż po kliknięciu wezwania do działania „Znajdź i zarezerwuj” na stronie głównej został poproszony o udostępnienie lokalizacji GPS.
W niektórych przypadkach użytkownik zaczął frustrować się, ponieważ nie rozumieł, dlaczego pokazywano im hotele w San Francisco, gdy chcieli zarezerwować pokój w Bostonie.
Lepiej się upewnić, że użytkownicy rozumieją, dlaczego pytasz ich o lokalizację. Dodaj dobrze znany symbol, który jest dostępny na wszystkich urządzeniach, np. dalmierz, lub wyraźne wezwanie do działania, takie jak „Znajdź w pobliżu”.
Delikatnie zachęcaj użytkowników do przyznania uprawnień do lokalizacji
Nie masz dostępu do informacji o czynnościach wykonywanych przez użytkowników. Dokładnie wiesz, kiedy użytkownicy blokują dostęp do swoich lokalizacji, ale nie wiesz, kiedy przyznają Ci dostęp. O uzyskaniu dostępu wiesz tylko wtedy, gdy pojawią się wyniki.
Warto zachęcać użytkowników do działania, jeśli chcesz, aby wykonali działanie.
Nasze wskazówki
- Ustaw minutnik, który uruchamia się po krótkim czasie; dobra wartość to 5 sekund.
- Jeśli pojawi się komunikat o błędzie, pokaż komunikat użytkownikowi.
- Jeśli otrzymasz pozytywną odpowiedź, wyłącz licznik czasu i przetwórz wyniki.
- Jeśli po upływie limitu czasu nie otrzymasz pozytywnej odpowiedzi, pokaż użytkownikowi powiadomienie.
- 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ługiwane przeglądarki
Większość przeglądarek obsługuje teraz interfejs Geolocation API, ale dobrze jest zawsze najpierw sprawdzić pomoc.
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ę „one-shot”, która pozwala uzyskać lokalizację użytkownika: getCurrentPosition(). Wywołanie tej metody asynchronicznie przekazuje informacje o bieżącej 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 uprawnienia, przeglądarka zwykle sprawdza zgodę użytkownika. W zależności od przeglądarki mogą być też dostępne ustawienia „Zawsze zezwalaj” lub „Nie zezwalaj na wyszukiwanie uprawnień”. W takim przypadku proces potwierdzania jest pomijany.
W zależności od lokalizacji, z której korzysta przeglądarka, obiekt pozycji może zawierać znacznie więcej informacji niż tylko szerokość i długość geograficzną – na przykład wysokość lub kierunek. Nie dowiesz się, jakich dodatkowych informacji używa system lokalizacji, dopóki nie zwrócisz danych.
Obserwowanie lokalizacji użytkownika
Interfejs Geolocation API umożliwia uzyskiwanie lokalizacji użytkownika (za zgodą użytkownika) za pomocą pojedynczego wywołania getCurrentPosition().
Jeśli chcesz stale monitorować lokalizację użytkownika, użyj metody Geolocation API (watchPosition()). Działa on w sposób podobny do getCurrentPosition(), ale uruchamia się kilka razy jako oprogramowanie pozycjonujące:
- Daje dokładniejszą blokadę użytkownika.
- informuje, ż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 obserwowania lokalizacji użytkownika
- Chcesz uzyskać dokładniejszą blokadę lokalizacji użytkownika.
- Twoja aplikacja musi zaktualizować interfejs użytkownika na podstawie nowych informacji o lokalizacji.
- Gdy użytkownik wejdzie do określonej strefy, aplikacja musi zaktualizować logikę biznesową.
Sprawdzone metody korzystania z geolokalizacji
Zawsze czyść dane i oszczędzaj baterię
Monitorowanie zmian geolokalizacji nie jest funkcją bezpłatną. Systemy operacyjne mogą wprowadzać funkcje platformy, aby umożliwić aplikacjom łączenie się z podsystemem geograficznym, ale jako deweloper nie masz pojęcia, jakie wsparcie ma urządzenie użytkownika w zakresie monitorowania lokalizacji użytkownika. Gdy oglądasz daną pozycję, intensywnie angażujesz urządzenie w dodatkowe przetwarzanie.
Gdy nie musisz już śledzić pozycji użytkownika, wywołaj funkcję clearWatch, aby wyłączyć systemy geolokalizacji.
Lepsze obsługę błędów
Nie wszystkie wyszukiwania lokalizacji zakończyły się powodzeniem. Możliwe, że nie udało się zlokalizować odbiornika GPS
lub użytkownik nagle wyłączył wyszukiwanie lokalizacji. W przypadku błędu wywoływany jest drugi, opcjonalny argument funkcji getCurrentPosition(), dzięki czemu możesz powiadomić użytkownika o 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);
};
Zmniejsz potrzebę uruchamiania sprzętu do geolokalizacji
W wielu przypadkach nie potrzebujesz najbardziej aktualnej lokalizacji użytkownika – wystarczy przybliżone oszacowanie.
Użyj opcjonalnej właściwości maximumAge, aby poinformować przeglądarkę, że ma użyć ostatnio uzyskanego wyniku geolokalizacji. Ten kod nie tylko szybciej zwraca dane, jeśli użytkownik już wcześniej poprosił o dostęp, ale także uniemożliwia przeglądarce uruchomienie interfejsów sprzętowych do 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 każ użytkownikowi czekać, ustaw czas oczekiwania
Jeśli nie ustawisz czasu oczekiwania, żądanie dotyczące bieżącej pozycji może nigdy nie zostać zwrócone.
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);
};
preferowanie przybliżonej lokalizacji zamiast lokalizacji szczegółowej,
Aby znaleźć sklep najbliżej użytkownika, prawdopodobnie nie będzie potrzebna 1-metrowa precyzja. Interfejs API ma za zadanie podać przybliżone położenie, które zwraca się tak szybko, jak to możliwe.
Jeśli potrzebujesz dużej dokładności, możesz zastąpić ustawienie domyślne za pomocą opcji enableHighAccuracy. Korzystaj z niej z umiarem, bo działa 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);
};
Emuluj geolokalizację za pomocą Narzędzi deweloperskich w Chrome
Po skonfigurowaniu geolokalizacji:
- Sprawdź, jak działa Twoja aplikacja w różnych lokalizacjach geograficznych.
- Sprawdź, czy aplikacja działa płynnie w sytuacji, gdy geolokalizacja jest niedostępna.
Oba możesz zrobić w Narzędziach deweloperskich w Chrome.
- Otwórz Narzędzia deweloperskie w Chrome.
- Naciśnij Esc, aby otworzyć panel konsoli.
- Otwórz menu panelu konsoli
- Kliknij opcję Czujniki, aby wyświetlić kartę Czujniki.
W tym miejscu możesz zastąpić lokalizację ustawioną wstępnie dużym miastem, wpisać lokalizację niestandardową lub wyłączyć geolokalizację, ustawiając zastąpienie na Lokalizacja niedostępna.