Lokasi Pengguna

Geolocation API memungkinkan Anda menemukan lokasi pengguna, dengan persetujuan mereka.

Paul Kinlan

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 akan menciptakan banyak kasus penggunaan yang menarik, seperti berintegrasi dengan sistem backend untuk menyiapkan urutan pengumpulan jika pengguna berada dekat.

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.
• Minta izin sebagai respons yang jelas terhadap 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) dengan 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.

1. Tangani semua error dari geolocation API sehingga Anda dapat menyesuaikan situs dengan kondisi ini.
2. Jelaskan kebutuhan Anda akan lokasi secara jelas dan eksplisit.
3. Gunakan solusi penggantian jika diperlukan.

Gunakan fallback 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 tersebut saat ini.

Solusi ini sering bekerja dengan melihat alamat IP pengguna dan memetakannya 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 minta akses ke lokasi dengan gestur 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 terkenal yang umum di seluruh perangkat, seperti pengukur jarak, atau pesan ajakan (CTA) eksplisit seperti “Find Near Me”.

Mendorong pengguna dengan halus agar memberikan izin ke lokasi mereka

Anda tidak memiliki akses ke apa pun yang 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:

1. Siapkan timer yang dipicu setelah jangka waktu singkat; 5 detik adalah nilai yang baik.
2. Jika Anda mendapatkan pesan error, tampilkan pesan kepada pengguna.
3. Jika Anda mendapatkan respons positif, nonaktifkan timer dan proses hasilnya.
4. Jika Anda belum mendapatkan respons positif setelah waktu tunggu, tampilkan notifikasi kepada pengguna.
5. 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

Sebagian besar browser kini mendukung Geolocation API, tetapi sebaiknya selalu memeriksa dukungan sebelum 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 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 melarang—pencarian izin, yang dalam hal ini proses konfirmasi akan diabaikan.

Bergantung pada perangkat lokasi yang digunakan browser Anda, objek posisi mungkin sebenarnya berisi lebih dari sekadar lintang dan bujur; misalnya, objek tersebut dapat mencakup ketinggian atau arah. Anda tidak dapat mengetahui informasi tambahan apa yang digunakan sistem lokasi hingga data benar-benar ditampilkan.

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(). Metode 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 menggunakan geolokasi untuk mengamati lokasi pengguna

• Anda tentunya ingin mendapatkan penguncian yang lebih akurat pada lokasi pengguna.
• Aplikasi Anda perlu memperbarui antarmuka pengguna berdasarkan informasi lokasi 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 terikat ke subsistem geografis, Anda, sebagai developer web, tidak tahu dukungan apa yang dimiliki perangkat pengguna untuk memantau lokasi pengguna, dan, saat Anda melihat 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 menampilkan 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 biarkan pengguna menunggu, setel 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 sementara yang ditampilkan secepat mungkin.

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

Mengemulasikan geolokasi dengan Chrome DevTools

Setelah menyiapkan geolokasi, Anda perlu:

• Uji cara kerja aplikasi Anda di berbagai geolokasi.
• Verifikasi bahwa aplikasi Anda melakukan degradasi halus bila geolokasi tidak tersedia.

Anda dapat melakukan keduanya dari Chrome DevTools.

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

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

Masukan