Geolocation API memungkinkan Anda menemukan lokasi pengguna, dengan persetujuan mereka.
Geolocation API memungkinkan Anda menemukan, dengan persetujuan pengguna, lokasi pengguna tersebut. Anda dapat menggunakan fungsi ini untuk hal-hal seperti memandu pengguna ke tujuan mereka dan memberi geotag pada materi buatan pengguna; misalnya, menandai tempat pengambilan foto.
Geolocation API juga memungkinkan Anda mengetahui di mana pengguna berada dan mengikutinya saat mereka bergerak, selalu dengan persetujuan pengguna (dan hanya saat halaman dibuka). Hal ini menciptakan banyak kasus penggunaan yang menarik, seperti mengintegrasikan dengan sistem backend untuk menyiapkan pesanan untuk diambil jika pengguna berada di sekitar.
Anda perlu mengetahui banyak hal saat menggunakan Geolocation API. Panduan ini membimbing Anda melalui beberapa kasus penggunaan umum dan solusi.
Ringkasan
- Gunakan geolokasi jika bermanfaat bagi pengguna.
- Mintalah izin sebagai respons jelas pada gestur pengguna.
- Gunakan deteksi fitur jika browser pengguna tidak mendukung geolokasi.
- Jangan sekadar mempelajari cara mengimplementasikan geolokasi; pelajari cara terbaik untuk menggunakan geolokasi.
- Uji geolokasi dengan situs Anda.
Kapan harus menggunakan geolokasi
- Menemukan posisi pengguna yang paling dekat dengan lokasi fisik tertentu untuk menyesuaikan pengalaman pengguna.
- Menyesuaikan informasi (seperti berita) sesuai lokasi pengguna.
- Menampilkan posisi pengguna pada peta.
- Memberi tag pada data yang dibuat dalam aplikasi Anda dengan lokasi pengguna (yaitu, memberi geotag pada gambar).
Meminta izin secara bertanggung jawab
Studi pengguna terbaru telah menunjukkan bahwa pengguna tidak percaya dengan situs yang hanya meminta pengguna untuk memberikan posisi mereka saat pemuatan halaman. Jadi, apa praktik terbaiknya?
Asumsikan pengguna tidak memberikan lokasi mereka
Banyak pengguna tidak mau memberikan lokasi mereka kepada Anda, jadi Anda perlu mengadopsi gaya pengembangan defensif.
- Tangani semua error dari geolocation API sehingga Anda dapat menyesuaikan situs dengan kondisi ini.
- Jelaskan dengan jelas dan eksplisit kebutuhan Anda akan lokasi tersebut.
- Gunakan solusi penggantian jika diperlukan.
Gunakan penggantian jika diperlukan geolokasi
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 memperoleh tebakan terbaik untuk lokasi orang saat ini.
Solusi ini sering kali berfungsi dengan melihat alamat IP pengguna dan memetakan alamat tersebut ke alamat fisik yang terdaftar dengan database RIPE. Lokasi ini sering kali tidak begitu akurat, biasanya memberikan Anda posisi hub telekomunikasi atau menara BTS yang paling dekat dengan pengguna. Dalam banyak kasus, bahkan mungkin tidak begitu akurat, terutama jika pengguna berada pada VPN atau layanan proxy lainnya.
Selalu meminta akses ke lokasi berdasarkan isyarat pengguna
Pastikan pengguna memahami alasan Anda meminta lokasi mereka, dan apa manfaat yang mereka dapatkan. Memintanya secara langsung di halaman beranda saat situs sedang memuat akan menjadikan pengalaman pengguna yang buruk.
Sebagai gantinya, berikan pengguna ajakan bertindak yang jelas atau indikasi bahwa operasi akan memerlukan akses ke lokasi mereka. Pengguna kemudian dapat lebih mudah mengaitkan perintah sistem untuk akses dengan tindakan yang baru saja dimulai.
Berikan indikasi yang jelas bahwa tindakan akan meminta lokasi mereka
Dalam sebuah studi oleh tim Google Ads, saat pengguna diminta untuk memesan kamar hotel di Boston untuk konferensi mendatang di situs hotel tertentu, mereka langsung diminta untuk membagikan lokasi GPS mereka setelah mengetuk pesan ajakan "Temukan dan Pesan" di halaman beranda.
Dalam beberapa kasus, pengguna menjadi frustrasi karena tidak memahami mengapa mereka melihat hotel di San Francisco padahal mereka ingin memesan kamar di Boston.
Pengalaman yang lebih baik adalah memastikan pengguna memahami alasan Anda meminta lokasi mereka. Tambahkan penanda yang dikenal baik dan sudah umum pada banyak perangkat, seperti pengukur jarak, atau ajakan bertindak eksplisit seperti “Find Near Me”.
Mendorong pengguna dengan halus agar memberikan izin ke lokasi mereka
Anda tidak memiliki akses ke apa pun yang sedang dilakukan pengguna. Anda mengetahui dengan persis kapan pengguna tidak mengizinkan akses ke lokasi mereka, tetapi Anda tidak tahu kapan mereka memberikan akses; Anda hanya mengetahui bahwa Anda memperoleh akses saat hasil muncul.
Praktik yang baik adalah "menyenggol" pengguna untuk mengambil tindakan jika Anda ingin mereka menyelesaikan tindakan.
Sebaiknya:
- Siapkan timer yang dipicu setelah periode singkat; 5 detik adalah nilai yang baik.
- Jika Anda mendapatkan pesan error, tampilkan pesan kepada pengguna.
- Jika Anda mendapatkan respons positif, nonaktifkan timer dan proses hasilnya.
- Jika, setelah waktu tunggu habis, Anda belum mendapatkan respons positif, tampilkan notifikasi kepada pengguna.
- Jika respons datang 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
Mayoritas browser kini mendukung Geolocation API, tetapi sebaiknya selalu periksa dukungan sebelum Anda melakukan apa pun.
Anda dapat dengan mudah memeriksa kompatibilitas dengan melakukan pengujian 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 "satu-kali" sederhana untuk mendapatkan lokasi pengguna: getCurrentPosition(). Panggilan ke metode ini akan 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 sebuah aplikasi pada domain meminta izin, browser biasanya akan memeriksa persetujuan pengguna. Bergantung pada browser, mungkin juga ada preferensi untuk selalu mengizinkan—atau melarang—pencarian izin, sehingga proses konfirmasi akan dilewati.
Bergantung pada perangkat lokasi yang digunakan browser Anda, objek posisi mungkin sebenarnya berisi lebih banyak dari sekadar lintang dan bujur; misalnya, objek tersebut mungkin menyertakan ketinggian atau arah. Anda tidak dapat mengetahui informasi tambahan apa yang digunakan sistem lokasi hingga data benar-benar ditampilkan.
Mengamati 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 sebagai software
pemosisian:
- 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 menggunakan geolokasi untuk mengamati lokasi pengguna
- Anda tentunya ingin mendapatkan penguncian yang lebih akurat pada lokasi pengguna.
- Aplikasi Anda harus memperbarui antarmuka pengguna berdasarkan informasi lokasi yang baru.
- Aplikasi Anda harus memperbarui logika bisnis saat pengguna memasuki zona tertentu yang ditentukan.
Praktik terbaik saat menggunakan geolokasi
Selalu membersihkan dan menghemat baterai
Mengamati perubahan geolokasi bukanlah operasi yang gratis. Meskipun sistem operasi mungkin memperkenalkan fitur platform untuk memungkinkan aplikasi terhubung ke subsistem geo, Anda, sebagai developer web, tidak tahu dukungan apa saja yang dimiliki perangkat pengguna untuk memantau lokasi pengguna, dan, saat Anda memantau 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 cara halus
Sayangnya, tidak semua pencarian lokasi berhasil. Mungkin GPS tidak dapat
ditemukan atau pengguna tiba-tiba menonaktifkan pencarian lokasi. Jika terjadi
error, argumen opsional kedua 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 perangkat keras geolokasi
Untuk banyak kasus penggunaan, Anda tidak memerlukan lokasi terbaru pengguna; Anda hanya perlu perkiraan kasar.
Gunakan properti opsional maximumAge untuk memberi tahu browser agar menggunakan hasil geolokasi yang baru diperoleh. Hal ini tidak hanya mengembalikan lebih cepat jika pengguna telah
meminta data sebelumnya, tetapi juga mencegah browser memulai
antarmuka hardware geolokasinya 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 biarkan pengguna menunggu, tetapkan waktu tunggu
Kecuali jika Anda telah menyetel waktu tunggu, permintaan posisi saat ini mungkin tidak akan pernah kembali.
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);
};
Memilih lokasi kasar daripada lokasi yang sangat detail
Jika Anda ingin menemukan toko terdekat dengan pengguna, kemungkinan Anda tidak membutuhkan presisi 1 meter. API ini dirancang untuk memberikan lokasi kasar yang dikembalikan secepat mungkin.
Jika Anda membutuhkan presisi tingkat tinggi, Anda dapat mengganti setelan default
dengan opsi enableHighAccuracy. Gunakan secukupnya: hal ini lebih lambat
diatasi 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);
};
Mengemulasikan geolokasi dengan Chrome DevTools
Setelah menyiapkan geolokasi, Anda perlu:
- Uji cara kerja aplikasi Anda di beberapa geolokasi berbeda.
- Verifikasi apakah aplikasi Anda mengalami degradasi secara halus bila 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 preset, memasukkan lokasi kustom, atau menonaktifkan geolokasi dengan menetapkan penggantian ke Lokasi tidak tersedia.