Lokasi Pengguna

Geolocation API memungkinkan Anda menemukan lokasi pengguna, berdasarkan izin mereka.

Paul Kinlan

Geolocation API memungkinkan Anda menemukan, dengan persetujuan pengguna, lokasi pengguna. Anda dapat menggunakan fungsi ini untuk hal-hal seperti memandu pengguna ke tujuan mereka dan pemberian tag geografis pada konten buatan pengguna; misalnya, menandai lokasi pengambilan foto.

Geolocation API juga memungkinkan Anda melihat di mana pengguna berada dan mengikutinya saat mereka bergerak, selalu dengan persetujuan pengguna (dan hanya saat halaman dibuka). Hal ini akan menciptakan banyak kasus penggunaan yang menarik, seperti mengintegrasikan dengan sistem backend untuk menyiapkan urutan pengumpulan jika pengguna berada di dekatnya.

Anda perlu mengetahui banyak hal saat menggunakan Geolocation API. Panduan ini membimbing Anda melalui kasus penggunaan umum dan solusi.

Ringkasan

• Gunakan geolokasi jika bermanfaat bagi pengguna.
• Meminta 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 posisi pengguna yang paling dekat dengan lokasi fisik tertentu untuk menyesuaikan pengalaman pengguna.
• Sesuaikan informasi (seperti berita) dengan lokasi pengguna.
• Menampilkan posisi pengguna pada peta.
• Beri tag pada data yang dibuat di dalam aplikasi Anda dengan lokasi pengguna (yaitu, beri tag geografis pada gambar).

Minta izin secara bertanggung jawab

Studi pengguna terbaru 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 akan memberikan lokasi mereka

Banyak pengguna yang tidak ingin memberikan lokasi mereka, sehingga Anda perlu mengadopsi gaya pengembangan defensif.

1. Tangani semua error dari geolokasi API agar Anda dapat menyesuaikan situs dengan kondisi ini.
2. Sampaikan dengan jelas dan eksplisit tentang kebutuhan Anda akan lokasi.
3. 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 tebakan terbaik tentang lokasi pengguna saat ini.

Solusi ini biasanya bekerja dengan melihat alamat IP pengguna dan memetakannya ke alamat fisik yang terdaftar di database RIPE. Lokasi ini sering kali tidak terlalu akurat, biasanya memberi Anda posisi hub telekomunikasi atau menara seluler yang paling dekat dengan pengguna. Dalam banyak kasus, bahkan mungkin tidak begitu akurat, terutama jika pengguna menggunakan VPN atau layanan proxy lainnya.

Selalu meminta akses ke lokasi pada gestur pengguna

Pastikan pengguna memahami alasan Anda meminta lokasi mereka, dan apa manfaatnya bagi mereka. Memintanya secara langsung di halaman beranda saat situs sedang dimuat akan mengakibatkan pengalaman pengguna yang buruk.

Sebagai gantinya, berikan pesan ajakan (CTA) yang jelas kepada pengguna atau indikasi bahwa operasi akan memerlukan akses ke lokasi mereka. Selanjutnya, pengguna 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 studi yang dilakukan oleh tim Google Ads, saat pengguna diminta memesan kamar hotel di Boston untuk konferensi mendatang di salah satu situs hotel tertentu, dia diminta untuk langsung membagikan lokasi GPS setelah mengetuk pesan ajakan (CTA) "Find and Book" di halaman beranda.

Dalam beberapa kasus, pengguna merasa frustrasi karena tidak mengerti mengapa mereka ditampilkan 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 terkenal yang umum digunakan di seluruh perangkat, seperti pencari jarak, atau pesan ajakan (CTA) eksplisit seperti "Find Near Me".

Mendorong pengguna dengan hati-hati untuk memberikan izin ke lokasi mereka

Anda tidak memiliki akses ke apa pun yang dilakukan pengguna. Anda mengetahui secara persis kapan pengguna tidak mengizinkan akses ke lokasi mereka, tetapi Anda tidak tahu kapan mereka memberi Anda akses; Anda hanya tahu bahwa Anda memperoleh akses saat ada hasil yang muncul.

Sebaiknya "dorong" pengguna untuk melakukan tindakan jika Anda ingin mereka menyelesaikan tindakan tersebut.

Sebaiknya:

1. Siapkan timer yang terpicu setelah beberapa saat; 5 detik adalah nilai yang bagus.
2. Jika Anda mendapatkan pesan error, tampilkan pesan kepada pengguna.
3. Jika Anda mendapatkan respons positif, nonaktifkan timer dan proses hasilnya.
4. Jika, setelah waktu tunggu, Anda belum mendapatkan respons positif, tampilkan notifikasi kepada pengguna.
5. Jika respons muncul nanti dan notifikasi masih ada, hapus respons 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 merupakan praktik yang baik untuk selalu memeriksa 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 "satu kali" sederhana untuk mendapatkan lokasi pengguna: getCurrentPosition(). Panggilan ke metode ini akan melaporkan lokasi pengguna saat ini secara asinkron.

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 pada domain ini meminta izin, browser biasanya akan memeriksa izin pengguna. Bergantung pada browser, mungkin juga ada preferensi untuk selalu mengizinkan—atau melarang—pencarian izin, sehingga proses konfirmasi akan diabaikan.

Bergantung pada perangkat lokasi yang digunakan browser Anda, objek posisi mungkin sebenarnya berisi lebih dari sekadar lintang dan bujur; misalnya, mungkin mencakup ketinggian atau arah. Anda tidak dapat mengetahui informasi tambahan apa yang digunakan sistem lokasi hingga data tersebut 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(). Ini beroperasi dengan cara yang mirip dengan getCurrentPosition(), tetapi diaktifkan beberapa kali sebagai software pemosisian:

1. Mendapatkan penguncian yang lebih akurat pada pengguna.
2. Menentukan apakah 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 melihat lokasi pengguna

• Anda ingin mendapatkan kunci yang lebih akurat pada lokasi pengguna.
• Aplikasi Anda perlu mengupdate antarmuka pengguna berdasarkan informasi lokasi baru.
• Aplikasi Anda perlu mengupdate logika bisnis saat pengguna memasuki zona tertentu yang ditentukan.

Praktik terbaik saat menggunakan geolokasi

Selalu bersihkan dan hemat baterai

Mengamati perubahan geolokasi bukanlah operasi yang gratis. Meskipun sistem operasi mungkin memperkenalkan fitur platform untuk memungkinkan aplikasi terhubung ke subsistem geografis, Anda, sebagai developer web, tidak tahu dukungan apa yang dimiliki perangkat pengguna untuk memantau lokasi pengguna, dan saat Anda mengamati suatu 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 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 hardware 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. Tindakan ini tidak hanya menampilkan data 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 buat pengguna menunggu, setel waktu tunggu

Kecuali Anda menyetel 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);
};

Pilih lokasi kasar daripada lokasi yang sangat detail

Jika Anda ingin menemukan toko terdekat dengan pengguna, Anda tidak mungkin memerlukan presisi 1 meter. API ini dirancang untuk memberikan lokasi sementara yang ditampilkan secepat mungkin.

Jika memerlukan presisi tingkat tinggi, Anda dapat mengganti setelan default dengan opsi enableHighAccuracy. Gunakan ini seperlunya: lebih lambat diselesaikan 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);
};

Emulasikan geolokasi dengan Chrome DevTools

Setelah menyiapkan geolokasi, Anda dapat:

• Uji cara kerja aplikasi Anda di geolokasi yang berbeda-beda.
• Pastikan aplikasi Anda terdegrasi secara halus saat geolokasi tidak tersedia.

Anda dapat melakukan keduanya dari Chrome DevTools.

1. Buka Chrome DevTools.
2. Tekan Esc untuk Membuka panel samping Konsol.
3. Buka menu panel samping Konsol
4. Klik opsi Sensors untuk menampilkan tab Sensors.

Dari sini, Anda dapat mengganti lokasi ke kota besar preset, memasukkan lokasi kustom, atau menonaktifkan geolokasi dengan menyetel penggantian ke Lokasi tidak tersedia.

Masukan