Geolocation API cho phép bạn khám phá vị trí của người dùng, nếu họ đồng ý.
Geolocation API cho phép bạn tìm vị trí của người dùng khi có sự đồng ý của họ. Bạn có thể sử dụng chức năng này cho những việc như hướng dẫn người dùng đến điểm đến và gắn thẻ địa lý cho nội dung do người dùng tạo; ví dụ: đánh dấu nơi chụp ảnh.
API Định vị địa lý cũng cho phép bạn xem vị trí của người dùng và theo dõi họ khi họ di chuyển, luôn có sự đồng ý của người dùng (và chỉ khi trang đang mở). Điều này tạo ra nhiều trường hợp sử dụng thú vị, chẳng hạn như tích hợp với hệ thống phụ trợ để chuẩn bị đơn đặt hàng cho việc thu thập nếu người dùng ở gần.
Bạn cần lưu ý nhiều điều khi sử dụng Geolocation API. Hướng dẫn này sẽ trình bày các trường hợp sử dụng và giải pháp phổ biến.
Tóm tắt
- Sử dụng tính năng định vị vị trí khi tính năng này mang lại lợi ích cho người dùng.
- Yêu cầu cấp quyền như một phản hồi rõ ràng cho cử chỉ của người dùng.
- Sử dụng tính năng phát hiện trong trường hợp trình duyệt của người dùng không hỗ trợ vị trí địa lý.
- Đừng chỉ tìm hiểu cách triển khai tính năng định vị địa lý; hãy tìm hiểu cách tốt nhất để sử dụng tính năng định vị địa lý.
- Kiểm tra vị trí địa lý bằng trang web của bạn.
Trường hợp sử dụng thông tin vị trí địa lý
- Tìm vị trí gần nhất của người dùng so với một vị trí thực tế cụ thể để điều chỉnh trải nghiệm người dùng.
- Điều chỉnh thông tin (chẳng hạn như tin tức) cho phù hợp với vị trí của người dùng.
- Hiển thị vị trí của người dùng trên bản đồ.
- Gắn thẻ dữ liệu được tạo trong ứng dụng bằng thông tin vị trí của người dùng (tức là gắn thẻ địa lý cho ảnh).
Yêu cầu cấp quyền một cách có trách nhiệm
Các nghiên cứu người dùng gần đây cho thấy rằng người dùng không tin tưởng những trang web chỉ đơn giản là nhắc người dùng cung cấp vị trí của họ khi tải trang. Vậy các phương pháp hay nhất là gì?
Giả sử người dùng sẽ không cung cấp thông tin vị trí của họ cho bạn
Nhiều người dùng sẽ không muốn cung cấp thông tin vị trí của họ cho bạn, vì vậy, bạn cần áp dụng một kiểu phát triển mang tính phòng vệ.
- Xử lý tất cả lỗi ngoài API vị trí địa lý để bạn có thể điều chỉnh trang web của mình cho phù hợp với điều kiện này.
- Nêu rõ ràng và cụ thể lý do bạn cần thông tin vị trí.
- Sử dụng giải pháp dự phòng nếu cần.
Sử dụng phương án dự phòng nếu cần có thông tin vị trí địa lý
Bạn không nên yêu cầu quyền truy cập vào vị trí hiện tại của người dùng trên trang web hoặc ứng dụng của mình. Tuy nhiên, nếu trang web hoặc ứng dụng của bạn yêu cầu vị trí hiện tại của người dùng, thì có các giải pháp của bên thứ ba cho phép bạn phỏng đoán chính xác nhất về vị trí hiện tại của người dùng.
Các giải pháp này thường hoạt động bằng cách xem địa chỉ IP của người dùng và liên kết địa chỉ đó với địa chỉ thực tế đã đăng ký với cơ sở dữ liệu RIPE. Những vị trí này thường không chính xác, thường cung cấp cho bạn vị trí của trung tâm viễn thông hoặc tháp điện thoại di động gần người dùng nhất. Trong nhiều trường hợp, các thông tin này thậm chí có thể không chính xác, đặc biệt là nếu người dùng đang sử dụng VPN hoặc một số dịch vụ proxy khác.
Luôn yêu cầu quyền truy cập thông tin vị trí khi người dùng thực hiện cử chỉ của người dùng
Đảm bảo rằng người dùng hiểu lý do bạn yêu cầu thông tin vị trí của họ và lợi ích mà họ sẽ nhận được. Việc yêu cầu quyền này ngay trên trang chủ khi trang web tải sẽ mang lại trải nghiệm không tốt cho người dùng.
Thay vào đó, hãy đưa ra lời kêu gọi hành động rõ ràng cho người dùng hoặc cho biết rằng một thao tác sẽ yêu cầu quyền truy cập vào thông tin vị trí của họ. Sau đó, người dùng có thể dễ dàng liên kết lời nhắc của hệ thống về quyền truy cập với hành động vừa bắt đầu.
Cho biết rõ ràng rằng một hành động sẽ yêu cầu thông tin vị trí của họ
Trong một nghiên cứu của nhóm Google Ads, khi người dùng được yêu cầu đặt phòng khách sạn ở Boston cho một hội nghị sắp tới trên một trang web khách sạn cụ thể, họ được nhắc chia sẻ vị trí GPS ngay sau khi nhấn vào lời kêu gọi hành động "Tìm và đặt phòng" trên trang chủ.
Trong một số trường hợp, người dùng cảm thấy khó chịu vì không hiểu lý do họ thấy các khách sạn ở San Francisco trong khi họ muốn đặt phòng ở Boston.
Để mang lại trải nghiệm tốt hơn, hãy đảm bảo người dùng hiểu lý do bạn yêu cầu họ cung cấp thông tin vị trí. Thêm một ký hiệu nổi tiếng phổ biến trên các thiết bị, chẳng hạn như công cụ tìm phạm vi hoặc lời kêu gọi hành động rõ ràng như "Tìm gần tôi".
Nhẹ nhàng nhắc người dùng cấp quyền truy cập thông tin vị trí
Bạn không có quyền truy cập vào bất kỳ hoạt động nào của người dùng. Bạn biết chính xác thời điểm người dùng không cho phép truy cập vào vị trí của họ, nhưng bạn không biết thời điểm họ cấp quyền truy cập cho bạn; bạn chỉ biết mình đã có quyền truy cập khi kết quả xuất hiện.
Bạn nên "nhắc nhở" người dùng thực hiện hành động nếu cần họ hoàn tất hành động đó.
Đề xuất:
- Thiết lập bộ hẹn giờ kích hoạt sau một khoảng thời gian ngắn; 5 giây là một giá trị phù hợp.
- Nếu bạn nhận được thông báo lỗi, hãy hiển thị thông báo cho người dùng.
- Nếu bạn nhận được phản hồi tích cực, hãy tắt bộ tính giờ và xử lý kết quả.
- Nếu sau thời gian chờ mà bạn vẫn chưa nhận được phản hồi tích cực, hãy hiện thông báo cho người dùng.
- Nếu phản hồi đến muộn hơn và thông báo vẫn còn, hãy xoá thông báo đó khỏi màn hình.
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);
};
Hỗ trợ trình duyệt
Hầu hết các trình duyệt hiện nay đều hỗ trợ API vị trí địa lý, nhưng bạn nên luôn kiểm tra xem có hỗ trợ hay không trước khi thực hiện bất kỳ thao tác nào.
Bạn có thể dễ dàng kiểm tra khả năng tương thích bằng cách kiểm tra sự hiện diện của đối tượng vị trí địa lý:
// check for Geolocation support
if (navigator.geolocation) {
console.log('Geolocation is supported!');
} else {
console.log('Geolocation is not supported for this Browser/OS.');
}
Xác định vị trí hiện tại của người dùng
API Định vị địa lý cung cấp một phương thức đơn giản, "một lần" để lấy thông tin vị trí của người dùng: getCurrentPosition(). Lệnh gọi đến phương thức này sẽ báo cáo không đồng bộ về vị trí hiện tại của người dùng.
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);
};
Nếu đây là lần đầu tiên một ứng dụng trên miền này yêu cầu cấp quyền, thì trình duyệt thường sẽ kiểm tra sự đồng ý của người dùng. Tuỳ thuộc vào trình duyệt, có thể có các lựa chọn ưu tiên để luôn cho phép hoặc không cho phép tra cứu quyền, trong trường hợp đó, quy trình xác nhận sẽ bị bỏ qua.
Tuỳ thuộc vào thiết bị vị trí mà trình duyệt của bạn đang sử dụng, đối tượng vị trí thực sự có thể chứa nhiều thông tin hơn là chỉ vĩ độ và kinh độ; ví dụ: đối tượng này có thể bao gồm độ cao hoặc hướng. Bạn không thể biết hệ thống vị trí đó sử dụng thông tin bổ sung nào cho đến khi hệ thống thực sự trả về dữ liệu.
Theo dõi vị trí của người dùng
API Định vị địa lý cho phép bạn lấy thông tin vị trí của người dùng (với sự đồng ý của người dùng) bằng một lệnh gọi duy nhất đến getCurrentPosition().
Nếu bạn muốn liên tục theo dõi vị trí của người dùng, hãy sử dụng phương thức API vị trí địa lý, watchPosition(). Trình nghe này hoạt động tương tự như getCurrentPosition(), nhưng kích hoạt nhiều lần khi phần mềm định vị:
- Xác định vị trí của người dùng chính xác hơn.
- Xác định rằng vị trí của người dùng đang thay đổi.
var watchId = navigator.geolocation.watchPosition(function (position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});
Trường hợp nên sử dụng thông tin vị trí địa lý để theo dõi vị trí của người dùng
- Bạn muốn xác định vị trí chính xác hơn của người dùng.
- Ứng dụng của bạn cần cập nhật giao diện người dùng dựa trên thông tin vị trí mới.
- Ứng dụng của bạn cần cập nhật logic nghiệp vụ khi người dùng nhập một vùng nhất định được xác định.
Các phương pháp hay nhất khi sử dụng thông tin vị trí địa lý
Luôn dọn dẹp và tiết kiệm pin
Việc theo dõi các thay đổi đối với vị trí địa lý không phải là một thao tác miễn phí. Mặc dù hệ điều hành có thể đang giới thiệu các tính năng của nền tảng để cho phép ứng dụng kết nối với hệ thống con địa lý, nhưng bạn, với tư cách là nhà phát triển web, không biết thiết bị của người dùng hỗ trợ những gì để theo dõi vị trí của người dùng và trong khi theo dõi vị trí, bạn đang khiến thiết bị phải xử lý thêm rất nhiều.
Sau khi bạn không cần theo dõi vị trí của người dùng nữa, hãy gọi clearWatch để tắt hệ thống vị trí địa lý.
Xử lý lỗi một cách linh hoạt
Rất tiếc, không phải lúc nào việc tra cứu vị trí cũng thành công. Có thể không tìm thấy GPS hoặc người dùng đột ngột tắt tính năng tra cứu vị trí. Trong trường hợp xảy ra lỗi, đối số thứ hai (không bắt buộc) cho getCurrentPosition() sẽ được gọi để bạn có thể thông báo cho người dùng bên trong lệnh gọi lại:
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);
};
Giảm nhu cầu khởi động phần cứng định vị địa lý
Trong nhiều trường hợp sử dụng, bạn không cần vị trí mới nhất của người dùng mà chỉ cần thông tin ước đoán sơ bộ.
Sử dụng thuộc tính không bắt buộc maximumAge để yêu cầu trình duyệt sử dụng kết quả vị trí địa lý mới nhận được. Điều này không chỉ trả về nhanh hơn nếu người dùng đã yêu cầu dữ liệu trước đó, mà còn ngăn trình duyệt khởi động các giao diện phần cứng vị trí địa lý như phép đo tam giác Wi-Fi hoặc 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);
};
Đừng để người dùng phải chờ, hãy đặt thời gian chờ
Trừ phi bạn đặt thời gian chờ, yêu cầu của bạn về vị trí hiện tại có thể không bao giờ trả về.
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);
};
Ưu tiên vị trí tương đối hơn vị trí chính xác
Nếu muốn tìm cửa hàng gần nhất với người dùng, bạn không cần độ chính xác đến 1 mét. API này được thiết kế để cung cấp vị trí tương đối và trả về kết quả nhanh nhất có thể.
Nếu cần độ chính xác cao, bạn có thể ghi đè chế độ cài đặt mặc định bằng tuỳ chọn enableHighAccuracy. Hãy hạn chế sử dụng chế độ này vì chế độ này mất nhiều thời gian hơn để phân giải và tốn nhiều pin hơn.
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);
};
Mô phỏng vị trí địa lý bằng Chrome DevTools
Sau khi thiết lập tính năng định vị vị trí, bạn nên:
- Kiểm thử cách ứng dụng hoạt động ở nhiều vị trí địa lý.
- Xác minh rằng ứng dụng của bạn xuống cấp nhẹ khi không có thông tin vị trí địa lý.
Bạn có thể thực hiện cả hai việc này trong Chrome DevTools.
- Mở Chrome DevTools.
- Nhấn phím Esc để Mở ngăn Console.
- Mở trình đơn ngăn Bảng điều khiển
- Nhấp vào tuỳ chọn Sensors (Cảm biến) để hiện thẻ Sensors (Cảm biến).
Tại đây, bạn có thể ghi đè vị trí thành một thành phố lớn đặt trước, nhập vị trí tuỳ chỉnh hoặc tắt tính năng định vị địa lý bằng cách đặt chế độ ghi đè thành Không có vị trí.