Interfejs Geolocation API umożliwia określenie lokalizacji użytkownika, jeśli wyrazi on na to zgodę.
Interfejs Geolocation API umożliwia określenie lokalizacji użytkownika za jego zgodą. Możesz używać tej funkcji na przykład do prowadzenia użytkownika do miejsca docelowego i dodawania tagów geograficznych do treści utworzonych przez użytkownika, np. oznaczania miejsca, w którym zrobiono zdjęcie.
Interfejs Geolocation API pozwala też sprawdzić, gdzie znajduje się użytkownik, i śledzić jego lokalizację, gdy się przemieszcza – zawsze za zgodą użytkownika (i tylko wtedy, gdy strona jest otwarta). Dzięki temu można tworzyć wiele ciekawych zastosowań, takich jak integracja z systemami backendu, aby przygotować zamówienie do odbioru, gdy użytkownik jest w pobliżu.
Podczas korzystania z interfejsu Geolocation API musisz pamiętać o wielu kwestiach. W tym przewodniku znajdziesz typowe przypadki użycia i rozwiązania.
Podsumowanie
- Używaj geolokalizacji, gdy jest to korzystne dla użytkownika.
- Poproś o uprawnienia w ramach wyraźnej odpowiedzi na gest użytkownika.
- Użyj wykrywania funkcji, jeśli przeglądarka użytkownika nie obsługuje geolokalizacji.
- Nie tylko dowiesz się, jak wdrożyć geolokalizację, ale też jak najlepiej z niej korzystać.
- Przetestuj geolokalizację w swojej witrynie.
Kiedy używać geolokalizacji
- Znajdź miejsce, w którym użytkownik znajduje się najbliżej określonej lokalizacji fizycznej, aby dostosować jego wrażenia.
- dostosowywać informacje (np. wiadomości) do lokalizacji użytkownika;
- pokazywać pozycję użytkownika na mapie;
- tagowanie danych utworzonych w aplikacji lokalizacją użytkownika (np. dodawanie geotagów do zdjęć);
Odpowiedzialne proszenie o zgodę
Ostatnie badania użytkowników wykazały, że użytkownicy nie ufają witrynom, które po prostu proszą o podanie lokalizacji podczas wczytywania strony. Jakie są sprawdzone metody?
Załóż, że użytkownicy nie udostępnią Ci swojej lokalizacji
Wielu użytkowników nie będzie chciało podawać swojej lokalizacji, dlatego musisz przyjąć defensywny styl programowania.
- Obsługuj wszystkie błędy z interfejsu API geolokalizacji, aby móc dostosować witrynę do tych warunków.
- Jasno i wyraźnie określ, dlaczego potrzebujesz lokalizacji.
- W razie potrzeby użyj rozwiązania zastępczego.
Używanie kreacji zastępczej, gdy wymagana jest geolokalizacja
Zalecamy, aby Twoja 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, istnieją rozwiązania innych firm, które pozwalają uzyskać przybliżone informacje o tym, gdzie dana osoba się znajduje.
Te rozwiązania często działają na podstawie adresu IP użytkownika i mapują go na adresy fizyczne zarejestrowane w bazie danych RIPE. Te lokalizacje często nie są zbyt dokładne i zwykle wskazują pozycję najbliższego użytkownikowi węzła telekomunikacyjnego lub masztu telefonii komórkowej. W wielu przypadkach mogą nie być zbyt dokładne, zwłaszcza jeśli użytkownik korzysta z sieci VPN lub innej usługi pośredniczącej.
Zawsze proś o dostęp do lokalizacji po wykonaniu gestu przez użytkownika
Upewnij się, że użytkownicy rozumieją, dlaczego prosisz o ich lokalizację i jakie korzyści im to przyniesie. Proszenie o to od razu na stronie głównej podczas jej wczytywania powoduje, że użytkownicy mają złe wrażenia.
Zamiast tego wyświetl użytkownikowi wyraźne wezwanie do działania lub informację, że operacja będzie wymagać dostępu do jego lokalizacji. Użytkownik może wtedy łatwiej powiązać prośbę systemu o dostęp z właśnie rozpoczętym działaniem.
Wyraźnie poinformuj, że akcja będzie wymagać dostępu do lokalizacji.
W badaniu przeprowadzonym przez zespół Google Ads użytkownik został poproszony o zarezerwowanie pokoju hotelowego w Bostonie na nadchodzącą konferencję na stronie konkretnego hotelu. Natychmiast po kliknięciu wezwania do działania „Znajdź i zarezerwuj” na stronie głównej został poproszony o udostępnienie swojej lokalizacji GPS.
W niektórych przypadkach użytkownik był sfrustrowany, ponieważ nie rozumiał, dlaczego wyświetlają mu się hotele w San Francisco, skoro chciał zarezerwować pokój w Bostonie.
Lepiej jest upewnić się, że użytkownicy rozumieją, dlaczego prosisz ich o lokalizację. Dodaj dobrze znany i powszechny na różnych urządzeniach element, np. dalmierz, lub wyraźne wezwanie do działania, np. „Znajdź w pobliżu”.
Delikatnie zachęcaj użytkowników do przyznania uprawnień do lokalizacji
Nie masz dostępu do żadnych działań użytkowników. Wiesz dokładnie, kiedy użytkownicy nie zezwalają na dostęp do swoich lokalizacji, ale nie wiesz, kiedy go udzielają. O tym, że masz dostęp, dowiadujesz się dopiero, gdy pojawią się wyniki.
Jeśli chcesz, aby użytkownicy wykonali działanie, warto ich do tego „zachęcić”.
Zalecamy:
- Skonfiguruj minutnik, który uruchomi się po krótkim czasie – 5 sekund to dobra wartość.
- Jeśli pojawi się komunikat o błędzie, wyświetl użytkownikowi wiadomość.
- Jeśli otrzymasz pozytywną odpowiedź, wyłącz licznik czasu i przetwórz wyniki.
- Jeśli po upływie limitu czasu nie otrzymasz pozytywnej odpowiedzi, wyświetl 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ługa przeglądarek
Większość przeglądarek obsługuje obecnie interfejs Geolocation API, ale dobrą praktyką jest zawsze sprawdzanie, czy jest on obsługiwany, zanim cokolwiek zrobisz.
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 oferuje prostą, „jednorazową” metodę uzyskiwania lokalizacji użytkownika: getCurrentPosition(). Wywołanie tej metody asynchronicznie raportuje bieżącą lokalizację 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, czy użytkownik wyraził zgodę. W zależności od przeglądarki mogą też być dostępne ustawienia, które zawsze zezwalają na sprawdzanie uprawnień lub nie zezwalają na nie. W takim przypadku proces potwierdzania jest pomijany.
W zależności od urządzenia lokalizacyjnego, którego używa przeglądarka, obiekt pozycji może zawierać znacznie więcej informacji niż tylko szerokość i długość geograficzną, np. wysokość lub kierunek. Nie możesz wiedzieć, jakich dodatkowych informacji używa system lokalizacji, dopóki nie zwróci on danych.
Obserwowanie lokalizacji użytkownika
Interfejs Geolocation API umożliwia uzyskanie lokalizacji użytkownika (za jego zgodą) za pomocą jednego wywołania getCurrentPosition().
Jeśli chcesz stale monitorować lokalizację użytkownika, użyj metody interfejsu Geolocation API watchPosition(). Działa podobnie do getCurrentPosition(), ale uruchamia się wielokrotnie, gdy oprogramowanie do pozycjonowania:
- Zapewnia dokładniejsze określanie lokalizacji użytkownika.
- określa, że pozycja użytkownika się zmienia;
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ładniejsze informacje o lokalizacji użytkownika.
- Aplikacja musi zaktualizować interfejs na podstawie nowych informacji o lokalizacji.
- Twoja aplikacja musi zaktualizować logikę biznesową, gdy użytkownik wejdzie do określonej zdefiniowanej strefy.
Sprawdzone metody korzystania z geolokalizacji
Zawsze czyść i oszczędzaj baterię
Obserwowanie zmian geolokalizacji nie jest operacją bezpłatną. Systemy operacyjne mogą wprowadzać funkcje platformy, które pozwalają aplikacjom na podłączanie się do podsystemu geolokalizacji, ale jako twórca stron internetowych nie masz pojęcia, jak urządzenie użytkownika obsługuje monitorowanie jego lokalizacji. Podczas śledzenia pozycji urządzenie wykonuje wiele dodatkowych operacji.
Gdy nie musisz już śledzić pozycji użytkownika, wywołaj clearWatch, aby wyłączyć systemy geolokalizacji.
Płynna obsługa błędów
Niestety nie wszystkie wyszukiwania lokalizacji kończą się powodzeniem. Być może nie udało się znaleźć GPS-a 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 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);
};
Zmniejszanie potrzeby uruchamiania sprzętu geolokalizacyjnego
W wielu przypadkach nie potrzebujesz najbardziej aktualnej lokalizacji użytkownika, wystarczy jej przybliżone oszacowanie.
Użyj opcjonalnej właściwości maximumAge, aby poinformować przeglądarkę, że ma użyć ostatnio uzyskanego wyniku geolokalizacji. Dzięki temu nie tylko szybciej uzyskasz odpowiedź, jeśli użytkownik wcześniej prosił o te dane, ale też zapobiegniesz 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 każ użytkownikowi czekać, ustaw limit czasu
Jeśli nie ustawisz limitu czasu, żądanie 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);
};
Preferuj przybliżoną lokalizację zamiast dokładnej.
Jeśli chcesz znaleźć najbliższy sklep, nie potrzebujesz dokładności do 1 metra. Interfejs API został zaprojektowany tak, aby jak najszybciej podawać przybliżoną lokalizację.
Jeśli potrzebujesz wysokiego poziomu precyzji, możesz zastąpić ustawienie domyślne opcją enableHighAccuracy. Używaj tej opcji oszczędnie, ponieważ
powoduje wolniejsze określanie lokalizacji
i większe zużycie baterii.
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:
- Sprawdź, jak aplikacja działa w różnych lokalizacjach geograficznych.
- Sprawdź, czy aplikacja działa prawidłowo, gdy geolokalizacja jest niedostępna.
Obie te czynności możesz wykonać w Narzędziach deweloperskich w Chrome.
- Otwórz Narzędzia deweloperskie w Chrome.
- Naciśnij Esc, aby otworzyć panel konsoli.
- Otwieranie menu panelu konsoli
- Kliknij opcję Czujniki, aby wyświetlić kartę Czujniki.
Możesz tu zastąpić lokalizację wstępnie ustawionym dużym miastem, wpisać niestandardową lokalizację lub wyłączyć geolokalizację, ustawiając zastąpienie na Lokalizacja niedostępna.