Geolocation API memungkinkan Anda menemukan lokasi pengguna, dengan izin pengguna.
Geolocation API memungkinkan Anda menemukan lokasi pengguna, dengan izin pengguna. Anda dapat menggunakan fungsi ini untuk hal-hal seperti memandu pengguna ke tujuan mereka dan memberi geotag pada konten buatan pengguna; misalnya, menandai tempat pengambilan foto.
Geolocation API juga memungkinkan Anda melihat lokasi pengguna dan terus memantau mereka saat mereka berpindah, selalu dengan izin pengguna (dan hanya saat halaman terbuka). Hal ini menciptakan banyak kasus penggunaan yang menarik, seperti berintegrasi dengan sistem backend untuk menyiapkan pesanan yang akan diambil jika pengguna berada di dekatnya.
Anda perlu memperhatikan banyak hal saat menggunakan Geolocation API. Panduan ini akan membahas kasus penggunaan dan solusi umum.
Ringkasan
- Gunakan geolokasi jika bermanfaat bagi pengguna.
- Minta izin sebagai respons yang jelas terhadap gestur pengguna.
- Gunakan deteksi fitur jika browser pengguna tidak mendukung geolokasi.
- Jangan hanya mempelajari cara menerapkan geolokasi; pelajari cara terbaik untuk menggunakan geolokasi.
- Uji geolokasi dengan situs Anda.
Kapan harus menggunakan geolokasi
- Menemukan lokasi pengguna yang paling dekat dengan lokasi fisik tertentu untuk menyesuaikan pengalaman pengguna.
- Menyesuaikan informasi (seperti berita) dengan lokasi pengguna.
- Menampilkan posisi pengguna di peta.
- Menandai data yang dibuat di dalam aplikasi Anda dengan lokasi pengguna (yaitu, memberi geotag pada gambar).
Meminta izin secara bertanggung jawab
Studi pengguna terbaru telah menunjukkan bahwa pengguna tidak memercayai situs yang hanya meminta pengguna untuk memberikan posisi mereka saat pemuatan halaman. Jadi, apa saja praktik terbaiknya?
Asumsikan pengguna tidak akan memberikan lokasinya kepada Anda
Banyak pengguna tidak ingin memberikan lokasi mereka kepada Anda, jadi Anda perlu menerapkan gaya pengembangan defensif.
- Tangani semua error dari API geolokasi sehingga Anda dapat menyesuaikan situs dengan kondisi ini.
- Jelaskan secara jelas dan eksplisit kebutuhan Anda akan lokasi.
- Gunakan solusi penggantian jika diperlukan.
Menggunakan penggantian jika geolokasi diperlukan
Sebaiknya situs atau aplikasi Anda tidak memerlukan akses ke lokasi pengguna saat ini. Namun, jika situs atau aplikasi Anda memerlukan lokasi pengguna saat ini, ada solusi pihak ketiga yang memungkinkan Anda mendapatkan perkiraan terbaik tentang lokasi pengguna saat ini.
Solusi ini sering kali berfungsi dengan melihat alamat IP pengguna dan memetakannya ke alamat fisik yang terdaftar di database RIPE. Lokasi ini sering kali tidak terlalu akurat, biasanya memberikan posisi hub telekomunikasi atau menara ponsel yang terdekat dengan pengguna. Dalam banyak kasus, data tersebut mungkin tidak terlalu akurat, terutama jika pengguna menggunakan VPN atau layanan proxy lainnya.
Selalu minta akses ke lokasi pada gestur pengguna
Pastikan pengguna memahami alasan Anda meminta lokasi mereka, dan apa manfaatnya bagi mereka. Meminta izin langsung di halaman beranda saat situs dimuat akan menghasilkan pengalaman pengguna yang buruk.
Sebagai gantinya, berikan pesan ajakan (CTA) yang jelas kepada pengguna atau indikasi bahwa suatu operasi akan memerlukan akses ke lokasi mereka. Kemudian, pengguna dapat lebih mudah mengaitkan perintah sistem untuk akses dengan tindakan yang baru saja dimulai.
Berikan indikasi yang jelas bahwa suatu tindakan akan meminta lokasi mereka
Dalam studi yang dilakukan oleh tim Google Ads, saat pengguna diminta memesan kamar hotel di Boston untuk konferensi mendatang di salah satu situs hotel, mereka diminta untuk membagikan lokasi GPS segera setelah mengetuk pesan ajakan (CTA) "Temukan dan Pesan" di halaman beranda.
Dalam beberapa kasus, pengguna merasa frustrasi karena tidak memahami alasan mereka ditampilkan hotel di San Francisco saat ingin memesan kamar di Boston.
Pengalaman yang lebih baik adalah memastikan pengguna memahami alasan Anda meminta lokasi mereka. Tambahkan penanda terkenal yang umum di berbagai perangkat, seperti pengukur jarak, atau pesan ajakan (CTA) eksplisit seperti “Temukan di Dekat Saya”.
Mendorong pengguna secara halus untuk memberikan izin akses ke lokasi mereka
Anda tidak memiliki akses ke aktivitas pengguna. Anda tahu persis kapan pengguna melarang akses ke lokasi mereka, tetapi Anda tidak tahu kapan mereka memberi Anda akses; Anda hanya tahu bahwa Anda memperoleh akses saat hasil muncul.
Sebaiknya "dorong" pengguna untuk mengambil tindakan jika Anda ingin mereka menyelesaikan tindakan tersebut.
Sebaiknya:
- Siapkan timer yang terpicu setelah jangka waktu singkat; 5 detik adalah nilai yang baik.
- Jika Anda menerima pesan error, tampilkan pesan kepada pengguna.
- Jika Anda mendapatkan respons positif, nonaktifkan timer dan proses hasilnya.
- Jika, setelah waktu tunggu, Anda belum mendapatkan respons positif, tampilkan notifikasi kepada pengguna.
- Jika respons masuk nanti dan notifikasi masih ada, hapus dari layar.
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);
};
Dukungan browser
Sebagian besar browser kini mendukung Geolocation API, tetapi sebaiknya selalu periksa dukungan sebelum Anda melakukan apa pun.
Anda dapat dengan mudah memeriksa kompatibilitas dengan menguji keberadaan objek geolokasi:
// check for Geolocation support
if (navigator.geolocation) {
console.log('Geolocation is supported!');
} else {
console.log('Geolocation is not supported for this Browser/OS.');
}
Menentukan lokasi pengguna saat ini
Geolocation API menawarkan metode "sekali pakai" yang sederhana untuk mendapatkan lokasi pengguna: getCurrentPosition(). Panggilan ke metode ini secara asinkron
melaporkan lokasi pengguna saat ini.
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);
};
Jika ini adalah pertama kalinya aplikasi di domain ini meminta izin, browser biasanya akan memeriksa izin pengguna. Bergantung pada browser, mungkin juga ada preferensi untuk selalu mengizinkan—atau tidak mengizinkan—pencarian izin, sehingga proses konfirmasi akan dilewati.
Bergantung pada perangkat lokasi yang digunakan browser Anda, objek posisi mungkin sebenarnya berisi lebih dari sekadar lintang dan bujur; misalnya, objek tersebut mungkin menyertakan ketinggian atau arah. Anda tidak dapat mengetahui informasi tambahan apa yang digunakan sistem lokasi tersebut hingga sistem tersebut benar-benar menampilkan data.
Memantau lokasi pengguna
Geolocation API memungkinkan Anda mendapatkan lokasi pengguna (dengan izin pengguna) dengan satu panggilan ke getCurrentPosition().
Jika Anda ingin terus memantau lokasi pengguna, gunakan metode Geolocation API, watchPosition(). Fungsi ini beroperasi dengan cara yang mirip dengan
getCurrentPosition(), tetapi diaktifkan beberapa kali saat software
penentuan posisi:
- Mendapatkan penguncian yang lebih akurat pada pengguna.
- Menentukan bahwa posisi pengguna berubah.
var watchId = navigator.geolocation.watchPosition(function (position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});
Kapan harus menggunakan geolokasi untuk memantau lokasi pengguna
- Anda ingin mendapatkan penguncian yang lebih akurat pada lokasi pengguna.
- Aplikasi Anda perlu mengupdate antarmuka pengguna berdasarkan informasi lokasi baru.
- Aplikasi Anda perlu memperbarui logika bisnis saat pengguna memasuki zona tertentu yang ditentukan.
Praktik terbaik saat menggunakan geolokasi
Selalu bersihkan dan hemat baterai
Mengamati perubahan geolokasi bukanlah operasi gratis. Meskipun sistem operasi mungkin memperkenalkan fitur platform untuk memungkinkan aplikasi terhubung ke subsistem wilayah geografis, Anda, sebagai developer web, tidak tahu dukungan apa yang dimiliki perangkat pengguna untuk memantau lokasi pengguna, dan, saat Anda mengamati posisi, Anda melibatkan perangkat dalam banyak pemrosesan tambahan.
Setelah Anda tidak perlu lagi melacak posisi pengguna, panggil clearWatch untuk menonaktifkan sistem geolokasi.
Menangani error dengan baik
Sayangnya, tidak semua pencarian lokasi berhasil. Mungkin GPS tidak dapat ditemukan atau pengguna tiba-tiba menonaktifkan pencarian lokasi. Jika terjadi error, argumen kedua opsional untuk getCurrentPosition() akan dipanggil sehingga Anda dapat memberi tahu pengguna di dalam callback:
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);
};
Mengurangi kebutuhan untuk memulai hardware geolokasi
Untuk banyak kasus penggunaan, Anda tidak memerlukan lokasi terbaru pengguna; Anda hanya memerlukan perkiraan kasar.
Gunakan properti opsional maximumAge untuk memberi tahu browser agar menggunakan hasil geolokasi yang baru diperoleh. Hal ini tidak hanya memberikan hasil lebih cepat jika pengguna telah
meminta data sebelumnya, tetapi juga mencegah browser memulai
antarmuka hardware geolokasi seperti triangulasi Wi-Fi atau 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);
};
Jangan membuat pengguna menunggu, tetapkan waktu tunggu
Kecuali jika Anda menetapkan waktu tunggu, permintaan Anda untuk posisi saat ini mungkin tidak akan pernah ditampilkan.
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);
};
Lebih memilih perkiraan lokasi daripada lokasi akurat
Jika Anda ingin menemukan toko terdekat dari pengguna, Anda mungkin tidak memerlukan presisi 1 meter. API ini dirancang untuk memberikan perkiraan lokasi yang ditampilkan secepat mungkin.
Jika Anda memerlukan tingkat presisi yang tinggi, Anda dapat mengganti setelan default dengan opsi enableHighAccuracy. Gunakan ini seperlunya: perlu waktu lebih lama
untuk menyelesaikan dan menggunakan lebih banyak baterai.
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);
};
Mengemulasi geolokasi dengan Chrome DevTools
Setelah menyiapkan geolokasi, Anda perlu:
- Uji cara kerja aplikasi Anda di berbagai geolokasi.
- Pastikan aplikasi Anda mengalami degradasi halus saat geolokasi tidak tersedia.
Anda dapat melakukan keduanya dari Chrome DevTools.
- Buka Chrome DevTools.
- Tekan Esc untuk Membuka panel samping Konsol.
- Membuka menu panel samping Konsol
- Klik opsi Sensors untuk menampilkan tab Sensors.
Dari sini, Anda dapat mengganti lokasi ke kota besar yang telah ditetapkan, memasukkan lokasi kustom, atau menonaktifkan geolokasi dengan menetapkan penggantian ke Lokasi tidak tersedia.