Implementing Geolocation in a PWA
The Geolocation API enables your app to ask users to share their location. For privacy reasons, the user is asked for permission before their geolocation data is shared with your PWA.
, open it from your homescreen/desktop. Then tap the button below to get your location and plot it on the map.
How it works
Under the hood, the Geolocation API utilizes a combination of technologies including GPS, Wi-Fi, and cellular network data to determine the device's physical location. It gathers information from available sources, triangulates the position, and provides the latitude and longitude coordinates to your PWA.
You can use the Geolocation API to display a user's location on a map, calculate directions to a destination, or show personalized content relevant to their location.
There are two ways to access a user's location:
navigator.geolocation.getCurrentPosition(), you can get the device's current location. The demo on this page uses this method to render it on a map powered by Leaflet.js and OpenStreetMap (see code below).
navigator.geolocation.watchPosition(), you can monitor the user's position and know whenever their position changes. Be aware that for privacy purposes, this function may stop reporting the user's location to your PWAs when the screen of the device is turned off.
There are many examples of PWAs using the Geolocation API, as it is easy to implement and can improve user experience. For example, in January 2020, I built The Coronavirus App to enable users to track the spread of COVID-19 — my app used the Geolocation API to center the view around the user's country.
The Geolocation API is supported by all major browsers. A Progressive Web App can use this feature on almost any device regardless of its installation status.