Cara Mengintegrasikan Geolokasi Ke PWA Anda

Misalkan pengguna menggunakan browser yang didukung, Anda bisa membuat PWA Anda dengan mudah mendeteksi lokasi pengguna dengan menggunakan Geolocation API, atau lebih spesifik, dengan menggunakan objek navigator.geolocation di dalamnya. Inilah cara Anda melakukannya dengan benar di PWA Anda:

Prasyarat

• Pengetahuan JavaScript & HTML yang solid.
• PWA yang berfungsi disajikan melalui HTTPS (ikuti tutorial PWA kami untuk membuatnya).

Geolokasi beraksi

Anda mungkin tidak asing dengan geolokasi sekarang. Dengan izin Anda, situs web yang memiliki geolokasi terintegrasi dapat mengakses lokasi Anda, yang dengannya dapat menampilkan informasi yang relevan di wilayah Anda, atau sekadar menunjukkan lokasi Anda di peta.

Cara mengintegrasikan geolokasi ke PWA Anda

Dasar

Pertama, kita perlu memahami mekanisme yang mendasari di balik objek navigator.geolocation . Objek navigator adalah objek wadah yang dengannya banyak API Web tersedia untuk kita. Di dalam wadah navigator adalah objek geolocation , yang menyediakan tiga metode berikut:

• getCurrentPosition()
• watchPosition()
• clearWatch()

Menggunakan getCurrentPosition() untuk mendapatkan posisi pengguna

Tujuan metode pertama, getCurrentPosition() , harus cukup jelas bagi Anda — metode ini mengambil posisi perangkat pengguna.

 navigator.geolocation.getCurrentPosition(() => {})

Posisi yang diambil tersedia dalam coords dan timestamp , dengan coords menjadi objek Coordinates . Secara default, objek Coordinates didefinisikan oleh properti ini:

• accuracy akurasi posisi dalam meter
• altitude ketinggian posisi
• accuracy akurasi ketinggian posisi dalam meter
• heading arah yang dituju perangkat, dinyatakan dalam derajat. (0 = Utara, Timur = 90, Selatan = 180, Barat = 270)
• latitude garis lintang posisi
• longitude bujur posisi
• speed kecepatan perangkat, dinyatakan dalam meter/detik

Seperti yang mungkin sudah Anda duga, perangkat yang tidak memiliki perangkat keras pelacakan yang tepat tidak akan menerima manfaat penuh dari API ini, sehingga hanya mengembalikan beberapa nilai dan membiarkan nilai lainnya null . Misalnya, di komputer desktop, kami hanya dapat menerima nilai longitude , latitude , dan accuracy , sedangkan nilai lain yang diminta ( heading , speed ) kembali null .

watchPosition() — mengambil posisi pengguna secara berkala

Meskipun metode yang disebutkan di atas sebagian besar digunakan untuk mengambil posisi pengguna, itu tidak berguna untuk aplikasi yang bergantung pada lokasi pengguna yang tepat, karena pengguna Anda diketahui sering berpindah-pindah. Ini adalah saat kita membutuhkan metode watchPosition() dari navigator.geolocation yang akan mendaftarkan fungsi panggilan balik untuk pembaruan berkala posisi pengguna.

 navigator.geolocation.watchPosition(posisi => {
    console.log(posisi)
})

Metode watchPosition mengembalikan id transaksi unik yang dapat digunakan untuk berhenti menerima pembaruan lokasi. Menggunakan id unik dan metode navigator.geolocation.clearWatch() , kita dapat berhenti mengamati posisi:

 const id = navigator.geolocation.watchPosition(posisi => {
    console.log(posisi)
})

//berhenti menonton setelah 10 detik
setTimeout(() => {
  navigator.geolocation.clearWatch(id)
}, 10 * 1000)

Penanganan kesalahan

Ini bisa segera rusak ketika Anda tidak memiliki fungsi yang tepat untuk menangani semua kesalahan. Untuk menampilkan kesalahan dalam blok yang dapat dibaca manusia, Anda perlu menambahkan kode berikut ke mana pun fungsi Anda untuk menunjukkan lokasi:

 fungsi lokasiError(kesalahan) {
    switch(error.code) {
        kesalahan kasus.PERMISSION_DENIED:
            return "Pengguna menolak permintaan geolokasi.";
        kesalahan kasus.POSITION_UNAVAILABLE:
            return "Informasi lokasi saat ini tidak tersedia.";
        kesalahan kasus.TIMEOUT:
            return "Waktu permintaan lokasi pengguna habis.";
        kesalahan kasus.UNKNOWN_ERROR:
            return "Terjadi kesalahan yang tidak diketahui.";
    }
}

Selain itu, Anda dapat menguji ini di konsol:

 navigator.geolocation.getCurrentPosition(posisi => {
  console.log(posisi)
}, kesalahan => {
	konsol.error(kesalahan)
})

Ini akan mengembalikan properti code , dengan 1 berarti izin pengguna telah ditolak, 2 berarti posisi pengguna saat ini tidak tersedia, dan 3 berarti permintaan telah habis.

Di luar dasar-dasar

Memahami dasar-dasar adalah satu hal, tetapi Anda selalu dapat berusaha untuk menjadi lebih baik. Inilah cara Anda dapat lebih meningkatkan fungsi geolokasi Anda.

Batas waktu saat mencari koordinat

Jika pengguna Anda memiliki kondisi jaringan yang lamban, batas waktu dapat digunakan untuk menunjukkan bahwa operasi telah kedaluwarsa. Untuk menambahkan batas waktu, kita perlu menambahkan parameter ketiga, yang berisi properti berikut:

• timeout jumlah milidetik sebelum operasi berakhir.
• maxiumAge usia maksimum posisi yang di-cache oleh browser, diukur dalam milidetik.
• enableHighAccuracy opsi benar/salah yang cukup jelas yang mungkin menghabiskan lebih banyak waktu dan sumber daya untuk mengambil posisi yang lebih akurat.

 navigator.geolocation.getCurrentPosition(posisi => {
  console.log(posisi)
}, kesalahan => {
	konsol.error(kesalahan)
}, {
  batas waktu: 2000,
  Usia maksimum: 20000,
  aktifkanHighAccuracy: benar
})

Menampilkan posisi pengguna di Google Maps

Dengan menggunakan Google Maps API, kita dapat menampilkan posisi pengguna di Google Map.

 <script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

Untuk demonstrasi Google Map API di Web, kami merekomendasikan panduan ini dari Google: Tampilkan Posisi Pengguna atau Perangkat di Maps. Dalam panduan ini, Anda akan menemukan HTML dasar dengan Google Maps API terintegrasi.

Atau, gunakan react-geolocated untuk PWA berbasis React Anda

Jika Anda tidak ingin melakukannya, react-geolocated juga merupakan cara yang bagus untuk membuat geolocation terintegrasi dengan aplikasi berbasis React Anda dengan cara yang cepat dan mudah. Cukup instal modul di atas PWA Anda yang ada menggunakan:

 npm install react-geolocated --save

Setelah itu, ikuti langkah-langkah seperti yang disediakan di tautan GitHub resmi dan Anda harus memiliki PWA fungsional dengan geolokasi bawaan.

Kesimpulan

Dan itu saja untuk proses integrasi geolokasi PWA Anda. Jika Anda merasa kesulitan di bagian mana pun dari tutorial ini, jangan ragu untuk mengajukan pertanyaan kepada kami di bawah ini!

Untuk pedagang Magento yang mencari solusi yang andal, kami menawarkan solusi PWA Magento yang lengkap dan hemat biaya untuk bisnis Anda.