Come integrare la geolocalizzazione nella tua PWA

Supponiamo che l'utente si trovi su un browser supportato, puoi fare in modo che la tua PWA rilevi facilmente la posizione dell'utente utilizzando l'API di geolocalizzazione o, per essere più specifici, utilizzando l'oggetto navigator.geolocation al suo interno. Ecco come farlo correttamente nella tua PWA:

Prerequisiti

• Solida conoscenza di JavaScript e HTML.
• Una PWA funzionante servita su HTTPS (segui il nostro tutorial PWA per crearne una).

Geolocalizzazione in azione

Probabilmente non sei estraneo alla geolocalizzazione ormai. Con la tua autorizzazione, un sito Web con geolocalizzazione integrata può accedere alla tua posizione, utilizzando la quale può visualizzare informazioni rilevanti nella tua zona o semplicemente mostrare la tua posizione sulla mappa.

Come integrare la geolocalizzazione nella tua PWA

Le basi

Innanzitutto, dobbiamo comprendere il meccanismo alla base dell'oggetto navigator.geolocation . L'oggetto navigator è un oggetto contenitore con il quale ci vengono messe a disposizione molte API Web. All'interno del contenitore del navigator c'è l'oggetto di geolocation , fornito da questi tre metodi:

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

Utilizzo di getCurrentPosition() per ottenere la posizione dell'utente

Lo scopo del primo metodo, getCurrentPosition() , dovrebbe essere autoesplicativo: recupera una posizione del dispositivo dell'utente.

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

Le posizioni recuperate sono disponibili in coords e timestamp , con coords coordinate come oggetto Coordinates . Per impostazione predefinita, l'oggetto Coordinates è definito da queste proprietà:

• accuracy la precisione della posizione in metri
• altitude l'altitudine della posizione
• accuracy la precisione dell'altitudine della posizione in metri
• heading la quale si sta dirigendo il dispositivo, espressa in gradi. (0 = Nord, Est = 90, Sud = 180, Ovest = 270)
• latitude la latitudine della posizione
• longitude la longitudine della posizione
• speed la velocità alla quale sta andando il dispositivo, espressa in metri/secondo

Come avrai intuito, i dispositivi privi dell'hardware di tracciamento appropriato non riceveranno tutti i vantaggi di questa API, restituendo così solo alcuni valori e lasciando altri valori null . Ad esempio, su un computer desktop, possiamo ricevere solo i valori di longitude , latitude e accuracy , mentre gli altri valori richiesti ( heading , speed ) tornano null .

watchPosition() — recupero periodico della posizione dell'utente

Sebbene il metodo di cui sopra sia utilizzato principalmente per recuperare la posizione dell'utente, non è così utile per le app che si basano sulla posizione precisa dell'utente, poiché è noto che i tuoi utenti sono spesso in movimento. Questo è quando abbiamo bisogno del metodo watchPosition() di navigator.geolocation che registrerà una funzione di callback per gli aggiornamenti periodici della posizione dell'utente.

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

Il metodo watchPosition restituisce un id transazione univoco che può essere utilizzato per interrompere la ricezione di aggiornamenti sulla posizione. Usando l' id univoco e il metodo navigator.geolocation.clearWatch() , possiamo interrompere la ricerca di una posizione:

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

//smetti di guardare dopo 10 secondi
setTimeout(() => {
  navigator.geolocation.clearWatch(id)
}, 10 * 1000)

Gestione degli errori

Può andare in tilt molto presto quando non hai una funzione adeguata impostata per gestire tutti gli errori. Per mostrare gli errori in un blocco leggibile dall'uomo, devi aggiungere il seguente codice in qualunque sia la tua funzione per mostrare la posizione:

 posizione della funzioneError(errore) {
    switch(codice errore) {
        errore caso.PERMISSION_DENIED:
            return "L'utente ha negato la richiesta di geolocalizzazione.";
        errore maiuscolo.POSITION_UNAVAILABLE:
            return "Le informazioni sulla posizione non sono attualmente disponibili.";
        errore caso.TIMEOUT:
            return "Richiesta di localizzazione utente scaduta.";
        errore caso.UNKNOWN_ERROR:
            return "Si è verificato un errore sconosciuto.";
    }
}

Inoltre, puoi provarlo su console:

 navigator.geolocation.getCurrentPosition(position => {
  console.log(posizione)
}, errore => {
	console.error(errore)
})

Questo restituirà una proprietà code , con 1 significa che l'autorizzazione dell'utente è stata negata, 2 significa che la posizione dell'utente non è attualmente disponibile e 3 significa che la richiesta è scaduta.

Oltre le basi

Comprendere le basi è una cosa, ma puoi sempre sforzarti di essere migliore. Ecco come puoi migliorare ulteriormente la tua funzione di geolocalizzazione.

Un timeout durante la ricerca delle coordinate

Nel caso in cui gli utenti abbiano una condizione di rete lenta, è possibile utilizzare un timeout per indicare che l'operazione è scaduta. Per aggiungere un timeout, dobbiamo aggiungere un terzo parametro, che contiene le seguenti proprietà:

• timeout il numero di millisecondi prima della scadenza dell'operazione.
• maxiumAge l'età massima della posizione memorizzata nella cache dai browser, misurata in millisecondi.
• enableHighAccuracy un'opzione vero/falso autoesplicativa che potrebbe richiedere più tempo e risorse per recuperare posizioni più accurate.

 navigator.geolocation.getCurrentPosition(position => {
  console.log(posizione)
}, errore => {
	console.error(errore)
}, {
  timeout: 2000,
  età massima: 20000,
  enableHighAccuracy: true
})

Visualizzazione della posizione dell'utente su Google Maps

Utilizzando l'API di Google Maps, possiamo visualizzare la posizione dell'utente su una mappa di Google.

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

Per una dimostrazione dell'API di Google Map sul Web, consigliamo questa guida di Google: Visualizza la posizione dell'utente o del dispositivo sulle mappe. Nella guida troverai un codice HTML di base con l'API di Google Maps integrata.

In alternativa, usa react-geolocated per la tua PWA basata su React

Nel caso in cui non ti senti all'altezza, react-geolocated è anche un ottimo modo per integrare la geolocalizzazione con la tua app basata su React in modo rapido e semplice. Installa semplicemente il modulo sopra la tua PWA esistente usando:

 npm install react-geolocalizzato --save

Dopodiché, segui i passaggi forniti nel collegamento GitHub ufficiale e dovresti avere per te una PWA funzionale con geolocalizzazione integrata.

Conclusione

E questo è tutto per il processo di integrazione della geolocalizzazione della tua PWA. Se lo trovi difficile in qualsiasi parte del tutorial, non esitare a farci una domanda qui sotto!

Per i commercianti Magento che cercano una soluzione affidabile, offriamo una soluzione Magento PWA completa ed economica per la tua azienda.