Cum să integrați geolocalizarea în PWA dvs

Să presupunem că utilizatorul se află într-un browser acceptat, puteți face ca PWA să detecteze cu ușurință locația utilizatorului utilizând API-ul de geolocație sau, pentru a fi mai specific, utilizând obiectul navigator.geolocation din acesta. Iată cum o faci corect în PWA:

Cerințe preliminare

• Cunoștințe solide JavaScript și HTML.
• Un PWA funcțional oferit prin HTTPS (urmați tutorialul nostru PWA pentru a crea unul).

Geolocalizarea în acțiune

Probabil că nu ești străin de geolocalizare până acum. Cu permisiunea dvs., un site web care are geolocalizare integrată poate accesa locația dvs., folosindu-se de care poate afișa informații relevante din zona dvs. sau pur și simplu vă poate afișa locația pe hartă.

Cum să integrezi geolocalizarea în PWA

Cele elementare

În primul rând, trebuie să înțelegem mecanismul de bază din spatele obiectului navigator.geolocation . Obiectul navigator este un obiect container cu care ne sunt puse la dispoziție o mulțime de API-uri web. În interiorul containerului navigator se află obiectul de geolocation , oferit prin care sunt următoarele trei metode:

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

Folosind getCurrentPosition() pentru a obține poziția utilizatorului

Scopul primei metode, getCurrentPosition() , ar trebui să se explice de la sine - preia o poziție a dispozitivului utilizatorului.

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

Pozițiile preluate sunt disponibile în coords și timestamp , coords fiind un obiect Coordinates . În mod implicit, obiectul Coordinates este definit de aceste proprietăți:

• accuracy precizia poziției în metri
• altitude altitudinea poziţiei
• accuracy precizia altitudinii poziției în metri
• heading în direcția către care se îndreaptă dispozitivul, exprimată în grade. (0 = Nord, Est = 90, Sud = 180, Vest = 270)
• latitude latitudinea poziţiei
• longitude longitudinea pozitiei
• speed viteza cu care merge dispozitivul, exprimata in metri/secunda

După cum probabil ați ghicit, dispozitivele cărora le lipsește hardware-ul de urmărire adecvat pur și simplu nu vor primi beneficiile complete ale acestui API, returnând astfel doar unele valori și lăsând alte valori null . De exemplu, pe un computer desktop, putem primi doar valorile pentru longitude , latitude și accuracy , în timp ce celelalte valori solicitate ( heading , speed ) revin null .

watchPosition() — preluarea periodică a poziției utilizatorului

În timp ce metoda menționată mai sus este folosită mai ales pentru recuperarea poziției utilizatorului, nu este la fel de utilă pentru aplicațiile care se bazează pe locația precisă a utilizatorului, deoarece utilizatorii dvs. sunt cunoscuți că sunt frecvent în mișcare. Acesta este momentul în care avem nevoie de metoda watchPosition() a navigator.geolocation care va înregistra o funcție de apel invers pentru actualizări periodice ale poziției utilizatorului.

 navigator.gelocation.watchPosition(poziție => {
    console.log(poziție)
})

Metoda watchPosition returnează un id de tranzacție unic care poate fi folosit pentru a nu mai primi actualizări de locație. Folosind id -ul unic și metoda navigator.geolocation.clearWatch() , putem opri urmărirea unei poziții:

 const id = navigator.gelocation.watchPosition(poziție => {
    console.log(poziție)
})

//oprește vizionarea după 10 secunde
setTimeout(() => {
  navigator.gelocation.clearWatch(id)
}, 10 * 1000)

Eroare de manipulare

Se poate exploda destul de curând când nu aveți nicio funcție adecvată configurată pentru a gestiona toate erorile. Pentru a afișa erori într-un bloc care poate fi citit de om, trebuie să adăugați următorul cod în oricare dintre funcția dvs. de afișare a locației:

 function locationError(eroare) {
    comutare(cod.eroare) {
        caz eroare.PERMISSION_DENIED:
            returnează „Utilizatorul a respins cererea de geolocalizare.”;
        eroare de caz.POSITION_UNAVAILABLE:
            returnează „Informațiile despre locație sunt momentan indisponibile.”;
        caz eroare.TIMEOUT:
            returnează „Solicitarea locației utilizatorului a expirat.”;
        caz eroare.UNKNOWN_ERROR:
            return „A apărut o eroare necunoscută.”;
    }
}

În plus, puteți testa acest lucru în consolă:

 navigator.geolocation.getCurrentPosition(poziție => {
  console.log(poziție)
}, eroare => {
	console.error(eroare)
})

Aceasta va returna o proprietate de code , cu 1 înseamnă că permisiunea utilizatorului a fost refuzată, 2 înseamnă că poziția utilizatorului este indisponibilă momentan și 3 înseamnă că solicitarea a fost expirată.

Dincolo de elementele de bază

Înțelegerea elementelor de bază este un lucru, dar poți oricând să te străduiești să fii mai bun. Iată cum vă puteți îmbunătăți și mai mult funcția de geolocalizare.

Un timeout la căutarea coordonatelor

În cazul în care utilizatorii dvs. au o stare de rețea lentă, poate fi folosit un timeout pentru a indica faptul că operațiunea a expirat. Pentru a adăuga un timeout, trebuie să adăugăm un al treilea parametru, în care conține următoarele proprietăți:

• timeout numărul de milisecunde înainte ca operațiunea să expire.
• maxiumAge vârsta maximă a poziției memorate în cache de browsere, măsurată în milisecunde.
• enableHighAccuracy o opțiune adevărat/fals care se explică de la sine, care ar putea consuma mai mult timp și resurse pentru a obține poziții mai precise.

 navigator.geolocation.getCurrentPosition(poziție => {
  console.log(poziție)
}, eroare => {
	console.error(eroare)
}, {
  timeout: 2000,
  varsta maxima: 20000,
  enableHighAccuracy: adevărat
})

Afișarea poziției utilizatorului pe Google Maps

Folosind API-ul Google Maps, putem afișa poziția utilizatorului pe o hartă Google.

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

Pentru o demonstrație a API-ului Google Map pe web, vă recomandăm acest ghid de la Google: Afișați poziția utilizatorului sau a dispozitivului pe hărți. În ghid, veți găsi un cod HTML de bază cu API-ul Google Maps integrat.

Ca alternativă, utilizați react-geolocated pentru PWA bazat pe React

În cazul în care nu vă simțiți în stare, react-geolocated este, de asemenea, o modalitate excelentă de a integra geolocalizarea cu aplicația dvs. bazată pe React într-un mod rapid și fără efort. Pur și simplu instalați modulul deasupra PWA existent folosind:

 npm install react-geolocated --save

După care, urmați pașii prevăzuți în linkul oficial GitHub și ar trebui să aveți pentru dvs. un PWA funcțional cu geolocalizare încorporată.

Concluzie

Și asta este tot pentru procesul de integrare a geolocalizării PWA. Dacă vă este greu în orice parte a tutorialului, nu ezitați să ne adresați o întrebare mai jos!

Pentru comercianții Magento care caută o soluție de încredere, oferim o soluție Magento PWA completă și rentabilă pentru afacerea dvs.