Coğrafi Konumlandırmayı PWA'nıza Nasıl Entegre Edersiniz?

Kullanıcının desteklenen bir tarayıcıda olduğunu varsayalım, Geolocation API'sini kullanarak veya daha spesifik olmak gerekirse, içindeki navigator.geolocation nesnesini kullanarak PWA'nızın kullanıcının konumunu kolayca algılamasını sağlayabilirsiniz. PWA'nızda bunu nasıl yapacağınız aşağıda açıklanmıştır:

Önkoşullar

• Sağlam JavaScript ve HTML bilgisi.
• HTTPS üzerinden sunulan çalışan bir PWA (bir tane oluşturmak için PWA eğitimimizi izleyin).

Coğrafi konum iş başında

Muhtemelen şimdiye kadar coğrafi konum belirlemeye yabancı değilsiniz. İzninizle, entegre coğrafi konumu olan bir web sitesi konumunuza erişebilir ve bunu kullanarak bölgenizdeki ilgili bilgileri görüntüleyebilir veya yalnızca konumunuzu haritada gösterebilir.

Coğrafi konumu PWA'nıza nasıl entegre edebilirsiniz?

Temeller

İlk olarak, navigator.geolocation nesnesinin altında yatan mekanizmayı anlamamız gerekiyor. navigator nesnesi, birçok Web API'sinin bize sağlandığı bir kapsayıcı nesnedir. navigator kabının içinde, bu üç yöntemin sağladığı geolocation nesnesi bulunur:

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

Kullanıcının konumunu almak için getCurrentPosition() kullanma

İlk yöntemin amacı olan getCurrentPosition() , sizin için açıklayıcı olmalıdır - kullanıcının cihazının bir konumunu getirir.

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

Getirilen konumlar, koordinatlar bir Coordinates coords olmak üzere, koordinatlarda ve timestamp coords . Varsayılan olarak, Coordinates nesnesi şu özelliklerle tanımlanır:

• accuracy , konumun metre cinsinden doğruluğu
• altitude pozisyonun yüksekliği
• accuracy , pozisyonun metre cinsinden yüksekliğinin doğruluğu
• derece cinsinden ifade edilen, aygıtın heading yön. (0 = Kuzey, Doğu = 90, Güney = 180, Batı = 270)
• latitude konumun enlemi
• longitude konumun boylamı
• metre/saniye cinsinden ifade edilen, cihazın gittiği speed

Tahmin edebileceğiniz gibi, uygun izleme donanımına sahip olmayan cihazlar bu API'nin tüm avantajlarından yararlanamayacak, bu nedenle yalnızca bazı değerleri döndürecek ve diğer değerleri null bırakacaktır. Örneğin, bir masaüstü bilgisayarda yalnızca longitude , latitude ve accuracy değerlerini alabilirken istenen diğer değerler ( heading , speed ) null olarak geri gelir.

watchPosition() — kullanıcının konumunun periyodik olarak alınması

Yukarıda bahsedilen yöntem çoğunlukla kullanıcının konumunu almak için kullanılsa da, kullanıcılarınızın sık sık hareket halinde olduğu bilindiğinden, kullanıcının kesin konumuna dayanan uygulamalar için kullanışlı değildir. Bu, kullanıcının konumunun periyodik güncellemeleri için bir geri arama işlevi kaydedecek olan navigator.geolocation watchPosition() yöntemine ihtiyacımız olduğu zamandır.

 navigator.geolocation.watchPosition(konum => {
    konsol.log(konum)
})

watchPosition yöntemi, konum güncellemelerini almayı durdurmak için kullanılabilecek benzersiz bir işlem id döndürür. Benzersiz id ve navigator.geolocation.clearWatch() yöntemini kullanarak bir konumu izlemeyi bırakabiliriz:

 const id = navigator.geolocation.watchPosition(konum => {
    konsol.log(konum)
})

// 10 saniye sonra izlemeyi bırak
setTimeout(() => {
  navigator.geolocation.clearWatch(id)
}, 10 * 1000)

Hata yönetimi

Tüm hataların üstesinden gelmek için uygun bir işleve sahip olmadığınızda, kısa sürede bozulabilir. İnsan tarafından okunabilen bir blokta hataları göstermek için, konum gösterme işleviniz hangisiyse, aşağıdaki kodu eklemeniz gerekir:

 function locationError(hata) {
    switch(hata.kodu) {
        vaka hatası.PERMISSION_DENIED:
            return "Kullanıcı coğrafi konum belirleme talebini reddetti.";
        vaka hatası.POSITION_UNAVAILABLE:
            return "Konum bilgisi şu anda mevcut değil.";
        vaka hatası.TIMEOUT:
            return "Kullanıcı konumu isteği zaman aşımına uğradı.";
        vaka hatası.UNKNOWN_ERROR:
            "Bilinmeyen bir hata oluştu.";
    }
}

Ek olarak, bunu konsolda test edebilirsiniz:

 navigator.geolocation.getCurrentPosition(konum => {
  konsol.log(konum)
}, hata => {
	konsol.hata(hata)
})

Bu, bir code özelliği döndürür; 1 , kullanıcı izninin reddedildiği anlamına gelir, 2 , kullanıcı konumunun şu anda kullanılamadığı ve 3 , isteğin zaman aşımına uğradığı anlamına gelir.

Temellerden öte

Temelleri anlamak bir şeydir, ancak her zaman daha iyi olmak için çabalayabilirsiniz. Coğrafi konum işlevinizi nasıl daha da iyileştirebileceğiniz aşağıda açıklanmıştır.

Koordinatları ararken bir zaman aşımı

Kullanıcılarınızın yavaş bir ağ durumu olması durumunda, işlemin süresinin dolduğunu belirtmek için bir zaman aşımı kullanılabilir. Bir zaman aşımı eklemek için, aşağıdaki özellikleri içeren üçüncü bir parametre eklememiz gerekir:

• timeout işlemin süresi dolmadan önceki milisaniye sayısı.
• maxiumAge , milisaniye cinsinden ölçülen, tarayıcılar tarafından önbelleğe alınan konumun maksimum yaşı.
• enableHighAccuracy , daha doğru konumlar elde etmek için daha fazla zaman ve kaynak tüketebilecek, kendi kendini açıklayan bir doğru/yanlış seçeneğidir.

 navigator.geolocation.getCurrentPosition(konum => {
  konsol.log(konum)
}, hata => {
	konsol.hata(hata)
}, {
  zaman aşımı: 2000,
  maksimumYaş: 20000,
  enableHighAccuracy: true
})

Google Haritalar'da kullanıcı konumunu görüntüleme

Google Haritalar API'sini kullanarak kullanıcının konumunu bir Google Haritasında görüntüleyebiliriz.

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

Web'de Google Harita API'sının bir gösterimi için, Google'dan şu kılavuzu öneriyoruz: Haritalarda Kullanıcı veya Cihaz Konumunu Görüntüle. Kılavuzda, Google Haritalar API'sinin entegre edildiği temel bir HTML bulacaksınız.

Alternatif olarak, React tabanlı PWA'nız için tepki react-geolocated konumlu kullanın

Kendinizi iyi hissetmiyorsanız, react-geolocated , coğrafi konumu React tabanlı uygulamanızla hızlı ve zahmetsiz bir şekilde entegre etmenin harika bir yoludur. Modülü, aşağıdakileri kullanarak mevcut PWA'nızın üzerine kurun:

 npm install tepki coğrafi konumlu --save

Bundan sonra, resmi GitHub bağlantısında sağlanan adımları izleyin ve kendiniz için yerleşik coğrafi konum belirleme özelliğine sahip işlevsel bir PWA'nız olmalıdır.

Çözüm

Ve PWA'nızın coğrafi konum entegrasyon süreci için bu kadar. Eğitimin herhangi bir bölümünde zorlanırsanız, aşağıda bize soru sormaktan çekinmeyin!

Güvenilir bir çözüm arayan Magento tüccarları için işletmeniz için eksiksiz ve uygun maliyetli Magento PWA çözümü sunuyoruz.