Comment intégrer la géolocalisation dans votre PWA

Supposons que l'utilisateur utilise un navigateur pris en charge, vous pouvez faire en sorte que votre PWA détecte facilement l'emplacement de l'utilisateur en utilisant l'API de géolocalisation, ou pour être plus précis, en utilisant l'objet navigator.geolocation qu'il contient. Voici comment procéder directement dans votre PWA :

Conditions préalables

• Solides connaissances JavaScript et HTML.
• Une PWA fonctionnelle servie sur HTTPS (suivez notre tutoriel PWA pour en créer une).

La géolocalisation en action

Vous n'êtes probablement pas étranger à la géolocalisation maintenant. Avec votre permission, un site Web intégrant la géolocalisation peut accéder à votre position, à l'aide de laquelle il peut afficher des informations pertinentes dans votre région, ou simplement afficher votre position sur la carte.

Comment intégrer la géolocalisation dans votre PWA

Les bases

Tout d'abord, nous devons comprendre le mécanisme sous-jacent derrière l'objet navigator.geolocation . L'objet navigator est un objet conteneur avec lequel de nombreuses API Web sont mises à notre disposition. À l'intérieur du conteneur du navigator se trouve l'objet de geolocation , fourni par ces trois méthodes :

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

Utiliser getCurrentPosition() pour obtenir la position de l'utilisateur

Le but de la première méthode, getCurrentPosition() , devrait être explicite pour vous - il récupère une position de l'appareil de l'utilisateur.

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

Les positions récupérées sont disponibles dans coords et timestamp , coords étant un objet Coordinates . Par défaut, l'objet Coordinates est défini par ces propriétés :

• accuracy la précision de la position en mètres
• altitude l'altitude de la position
• accuracy la précision de l'altitude de la position en mètres
• heading la direction vers laquelle se dirige l'appareil, exprimée en degrés. (0 = Nord, Est = 90, Sud = 180, Ouest = 270)
• latitude la latitude de la position
• longitude la longitude de la position
• speed la vitesse à laquelle se déplace l'appareil, exprimée en mètres/seconde

Comme vous l'avez peut-être deviné, les appareils qui ne disposent pas du matériel de suivi approprié ne bénéficieront tout simplement pas de tous les avantages de cette API, ne renvoyant ainsi que certaines valeurs et laissant d'autres valeurs null . Par exemple, sur un ordinateur de bureau, nous ne pouvons recevoir que les valeurs de longitude , latitude et accuracy , tandis que les autres valeurs demandées ( heading , speed ) reviennent null .

watchPosition() — récupération périodique de la position de l'utilisateur

Bien que la méthode susmentionnée soit principalement utilisée pour récupérer la position de l'utilisateur, elle n'est pas aussi utile pour les applications qui reposent sur l'emplacement précis de l'utilisateur, car vos utilisateurs sont connus pour être fréquemment en déplacement. C'est alors que nous avons besoin de la méthode watchPosition() de navigator.geolocation qui enregistrera une fonction de rappel pour les mises à jour périodiques de la position de l'utilisateur.

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

La méthode watchPosition renvoie un id de transaction unique qui peut être utilisé pour arrêter de recevoir des mises à jour de localisation. En utilisant l' id unique et la méthode navigator.geolocation.clearWatch() , nous pouvons arrêter de surveiller une position :

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

//arrêter de regarder après 10 secondes
setTimeout(() => {
  navigator.geolocation.clearWatch(id)
}, 10 * 1000)

La gestion des erreurs

Cela peut très vite se détraquer lorsque vous n'avez pas configuré de fonction appropriée pour gérer toutes les erreurs. Pour afficher les erreurs dans un bloc lisible par l'homme, vous devez ajouter le code suivant dans votre fonction d'affichage de l'emplacement :

 fonction locationError (erreur) {
    switch(error.code) {
        erreur de cas.PERMISSION_DENIED :
            return "L'utilisateur a refusé la demande de géolocalisation.";
        erreur de cas.POSITION_UNAVAILABLE :
            return "Les informations de localisation sont actuellement indisponibles.";
        erreur de cas.TIMEOUT :
            return "La demande de localisation de l'utilisateur a expiré.";
        erreur de cas.UNKNOWN_ERROR :
            return "Une erreur inconnue s'est produite.";
    }
}

De plus, vous pouvez tester cela dans la console :

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

Cela renverra une propriété de code , avec 1 signifie que l'autorisation de l'utilisateur a été refusée, 2 signifie que la position de l'utilisateur est actuellement indisponible et 3 signifie que la demande a expiré.

Au-delà des bases

Comprendre les bases est une chose, mais vous pouvez toujours vous efforcer d'être meilleur. Voici comment vous pouvez encore améliorer votre fonction de géolocalisation.

Un délai d'attente lors de la recherche de coordonnées

Si vos utilisateurs ont un réseau lent, un délai peut être utilisé pour indiquer que l'opération a expiré. Pour ajouter un délai d'attente, nous devons ajouter un troisième paramètre, dans lequel contient les propriétés suivantes :

• timeout le nombre de millisecondes avant l'expiration de l'opération.
• maxiumAge l'âge maximum de la position mise en cache par les navigateurs, mesuré en millisecondes.
• enableHighAccuracy une option true/false explicite qui peut consommer plus de temps et de ressources afin de récupérer des positions plus précises.

 navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, erreur => {
	console.error (erreur)
}, {
  délai d'attente : 2000,
  Âge maximal : 20 000,
  enableHighAccuracy : vrai
})

Affichage de la position de l'utilisateur sur Google Maps

En utilisant l'API Google Maps, nous pouvons afficher la position de l'utilisateur sur une carte Google.

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

Pour une démonstration de l'API Google Map sur le Web, nous vous recommandons ce guide de Google : Afficher la position de l'utilisateur ou de l'appareil sur les cartes. Dans le guide, vous trouverez un code HTML de base avec l'API Google Maps intégrée.

Vous pouvez également utiliser react-geolocated pour votre PWA basée sur React

Si vous ne vous sentez pas à la hauteur, react-geolocated est également un excellent moyen d'intégrer la géolocalisation à votre application basée sur React de manière rapide et sans effort. Installez simplement le module au-dessus de votre PWA existante en utilisant :

 npm installer réagir-géolocalisé --save

Après quoi, suivez les étapes fournies dans le lien officiel GitHub et vous devriez avoir pour vous-même une PWA fonctionnelle avec géolocalisation intégrée.

Conclusion

Et voilà pour le processus d'intégration de la géolocalisation de votre PWA. Si vous trouvez cela difficile dans n'importe quelle partie du didacticiel, n'hésitez pas à nous poser une question ci-dessous !

Pour les marchands Magento à la recherche d'une solution fiable, nous proposons une solution Magento PWA complète et rentable pour votre entreprise.