Interfejs Geolocation API umożliwia poznanie lokalizacji użytkownika, jeśli wyraził on na to zgodę.
Interfejs Geolocation API umożliwia ustalenie lokalizacji użytkownika (za jego zgodą). Możesz używać tej funkcji, aby na przykład wskazywać użytkownikowi miejsce docelowe i dodawać tagi geograficzne do treści utworzonych przez użytkowników, np. oznaczać, gdzie zostało zrobione zdjęcie.
Interfejs Geolocation API pozwala też śledzić lokalizację użytkownika i śledzić jego ruchy (z jego zgodą i tylko wtedy, gdy strona jest otwarta). Daje to wiele ciekawych możliwości zastosowania, np. integrację z systemami backendu w celu przygotowania zamówienia do odbioru, jeśli użytkownik jest w pobliżu.
Podczas korzystania z interfejsu Geolocation API musisz pamiętać o wielu kwestiach. Ten przewodnik zawiera opis typowych zastosowań i rozwiązań.
Podsumowanie
- Używaj geolokalizacji, gdy jest to korzystne dla użytkownika.
- Prośba o zgodę powinna być wyraźną reakcją na działanie użytkownika.
- Używaj wykrywania funkcji, gdy przeglądarka użytkownika nie obsługuje geolokalizacji.
- Nie wystarczy tylko dowiedzieć się, jak zaimplementować geolokalizację. Dowiedz się, jak najlepiej z niej korzystać.
- Przetestuj geolokalizację w swojej witrynie.
Kiedy używać geolokalizacji
- znajdować, gdzie użytkownik jest najbliżej określonej lokalizacji fizycznej, aby dostosować wyświetlane treści;
- dostosowywać informacje (np. wiadomości) do lokalizacji użytkownika;
- wyświetlać pozycję użytkownika na mapie.
- tagowanie danych utworzonych w aplikacji za pomocą lokalizacji użytkownika (czyli dodawanie geotagów do zdjęć).
Proś o zgodę w odpowiedni sposób
Z niedawnych badań dotyczących użytkowników wynika, że nie ufają one witrynom, które po prostu proszą o podanie pozycji na stronie. Jakie są sprawdzone metody?
Zakładaj, że użytkownicy nie podadzą Ci swojej lokalizacji
Wielu użytkowników nie chce udostępniać swojej lokalizacji, więc musisz przyjąć styl programowania oparty na obronie.
- Przetwarzaj wszystkie błędy z interfejsu API geolokalizacji, aby móc dostosować swoją witrynę do tego warunku.
- Jasno i wyraźnie określ, dlaczego potrzebujesz lokalizacji.
- W razie potrzeby użyj rozwiązania zastępczego.
W razie potrzeby użyj rozwiązania alternatywnego.
Zalecamy, aby Twoja witryna lub aplikacja nie wymagały 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, aby uzyskać najlepsze przybliżenie miejsca pobytu danej osoby.
Te rozwiązania często działają na podstawie adresu IP użytkownika i mapowania go na adresy fizyczne zarejestrowane w bazie danych RIPE. Te lokalizacje są często niedokładne, ponieważ zwykle wskazują pozycję najbliższego użytkownikowi węzła telekomunikacyjnego lub wieży telefonii komórkowych. W wielu przypadkach mogą one być niedokładne, zwłaszcza jeśli użytkownik korzysta z sieci VPN lub innej usługi proxy.
Zawsze proś o dostęp do lokalizacji po wykonaniu przez użytkownika odpowiedniego działania
Upewnij się, że użytkownicy rozumieją, dlaczego prosisz o ich lokalizację i jakie korzyści mogą z tego mieć. Proszenie o to od razu na stronie głównej po jej załadowaniu powoduje niewygodę użytkowników.
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 podania 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żytkownicy byli sfrustrowani, ponieważ nie rozumieli, dlaczego wyświetlają im się hotele w San Francisco, skoro chcieli zarezerwować pokój w Bostonie.
Aby zapewnić użytkownikom lepsze wrażenia, upewnij się, że rozumieją, dlaczego prosisz ich o podanie lokalizacji. Dodaj dobrze znany symbol, który jest powszechny na różnych urządzeniach, np. dalmierz, lub wyraźne wezwanie do działania, np. „Znajdź w pobliżu”.
Delikatnie zachęcaj 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:
- Skonfiguruj minutnik, który będzie się uruchamiał po krótkim czasie. Dobra wartość to 5 sekund.
- Jeśli pojawi się komunikat o błędzie, wyświetl go użytkownikowi.
- Jeśli otrzymasz pozytywną odpowiedź, wyłącz minutnik 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 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ż ustawić preferencje, które zawsze zezwalają lub nie zezwalają na wyszukiwanie uprawnień. W takim przypadku proces potwierdzenia jest pomijany.
W zależności od urządzenia do określania lokalizacji używanego przez przeglądarkę obiekt position może zawierać znacznie więcej niż tylko współrzędne geograficzne. Może to być na przykład wysokość lub kierunek. Nie możesz określić, jakich dodatkowych informacji używa system lokalizacji, dopóki nie zwróci danych.
śledzenie 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 watchPosition() interfejsu API Geolocation. Działa on w sposób podobny do funkcji getCurrentPosition(), ale uruchamia się wielokrotnie, gdy oprogramowanie do pozycjonowania:
- Uzyskiwanie dokładniejszej blokady 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 dane o 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ę
Sprawdzanie 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.
Gdy nie będziesz już potrzebować śledzenia pozycji użytkownika, zadzwoń pod numer clearWatch, aby wyłączyć systemy geolokalizacji.
Obsługa błędów
Niestety nie wszystkie wyszukiwania lokalizacji kończą się sukcesem. 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(), aby można było powiadomić użytkownika w ramach wywołania zwrotnego:
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 najnowszej lokalizacji użytkownika; wystarczy Ci przybliżony szacunek.
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ż nie uruchamia 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);
};
preferuj przybliżoną lokalizację zamiast dokładnej lokalizacji;
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. Używaj tej opcji z umiarkowaniem: powoduje ona dłuższe ładowanie 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 możesz:
- Sprawdź, jak aplikacja działa w różnych lokalizacjach geograficznych.
- Sprawdź, czy aplikacja działa prawidłowo, gdy geolokalizacja jest niedostępna.
Możesz to zrobić w Narzędziach deweloperskich w Chrome.
- Otwórz Narzędzia deweloperskie w Chrome.
- Aby otworzyć panel konsoli, naciśnij Esc.
- Otwieranie menu panelu konsoli
- Kliknij opcję Czujniki, aby wyświetlić kartę „Czujniki”.
Możesz tutaj zastąpić lokalizację gotowym ustawieniem dużego miasta, wpisać niestandardową lokalizację lub wyłączyć geolokalizację, ustawiając zastąpienie na Brak lokalizacji.